Progressive Web Apps (PWAs) combine the best features of web and native apps, offering faster loading times, offline accessibility, and push notifications while being easy to install and use. They address the limitations of traditional native apps, such as high costs and lengthy development times, but face challenges like platform restrictions and lack of visibility on app stores. Successful examples, like Twitter's PWA, show substantial improvements in user engagement metrics.

1. Progressive
Web APP
( PWA)
By: Bijaya Kumar Oli

2. THE AVERAGE WEB APP EXPERIENCE IS
POOR FOR MOBILE
2
❖ Most websites are optimised for Desktop even those who
claim to be “mobile first”
❖ Mobile users are less patient and websites are slower on
smartphones
❖ 53% of visits are likely to be abandoned if pages take longer
than 3 seconds to load

3. WHAT MAKES NATIVE APPS SO
AWESOME?
3
❖ Super fast: loading time of a few seconds
❖ Reachable from home screen
❖ Easy to use: focus on what’s completely necessary
❖ Offline accessible
❖ Push notifications
❖ Good UX practices by default

4. INTRODUCTION TO PWA
4
Progressive Web Apps are Web Apps which combines the best
features of Web and Native Apps. It is progressive because it is
constantly progressing.
❖ Fast Loading
❖ Native mobile feeling (Home screen, Push notification)
❖ Offline experience

5. IS A PROGRESSIVE WEB APPLICATION IS A
WEB APPLICATION ?
BUT BETTER
5
❖ Progressive and responsive
❖ Connectivity independent
❖ Like App
❖ Easily installable
❖ Fast and fresh data
❖ Linkable and discoverable
❖ Engageable

6. THE PROBLEM WITH NATIVE APPS
6
❖ Poorly accessible coding languages
❖ Java?, Android SDK, Swift, C
❖ More than one codebase
❖ Necessary to deal with AppStore and PlayStore
❖ Take a lot of time to build
❖ Crazy expensive
❖ Reaching users.

7. TECHNICAL COMPONENT Of PWA
7
❖ Application shell
❖ Service worker
❖ Manifest json
❖ HTTPS

8. SERVICE WORKER
8
❖ This is web worker, a Javascript file that run separately from
the browser thread.
❖ Handle the cache.
❖ Manage the push message

9. HOW SERVICE WORKER WORKS FOR
OFFLINE FIRST SOLUTION?
9

10. 10
PWA
NETWORK
SERVICE WORKER
CACHE
1 .Send Request

11. 11
PWA
NETWORK
SERVICE WORKER
CACHE
2. Check From
Cache if any

12. 12
PWA
NETWORK
SERVICE WORKER
CACHE
3 .Return cache result

13. 13
PWA
NETWORK
SERVICE WORKER
CACHE
4 .Send Request to
server

14. 14
PWA
NETWORK
SERVICE WORKER
CACHE
5 .Return Data

15. 15
PWA
NETWORK
SERVICE WORKER
CACHE
6. Update Cache

16. 16
PWA
NETWORK
SERVICE WORKER
CACHE
7. Send copy response
back. Update the pwa

17. 17
PWA
NETWORK
SERVICE WORKER
CACHE
Response
Request
Fetch from cache
LOCAL NETWORK

18. DRAWBACK OF PWA
18
❖ Platform limitations prevent PWAs from providing re-
engagement for iOS users.
❖ PWAs can’t use some of the latest hardware advancements
(like fingerprint scanner).
❖ You are not on Play Store, You miss significant traffic who use
Play store for their primary search.
❖ Full support for PWAs are not available in default browsers of
some of the manufacturers
❖ Cannot communicate with native apps. ( ie. facebook login )

19. DEMO & EXAMPLES
19
❖ https://web.dev
❖ https://twitter.com/
❖ Uber
❖ Flipkart
❖ Aliexpress

20. SUCCESS STORY
Twitter PWA ( home screen )
20
❖ 65% increase in pages per session
❖ 75% increase in Tweets sent
❖ 20% decrease in bounce rate
Source : https://developers.google.com/web/showcase/2017/twitter

21. 21
Thanks!
Any questions?