Progressive web applications (PWAs) address gaps in regular web apps and native apps. PWAs use technologies like service workers, the web app manifest, and the app shell model to provide native-app-like functionality while still being web apps. Service workers allow PWAs to work offline through caching strategies. Push notifications and app install banners further enhance the user experience. Libraries like Sw-Precache and Sw-Toolbox help implement service worker caching strategies. Major companies have adopted PWAs to increase user engagement and reduce data usage compared to regular web and native apps. Cross-browser support and business logic limitations remain challenges for PWAs.

1. Progressive Web Applications

2. Agenda
Evolution of progressive web apps (PWAs)
Gaps in regular web application
Technologies behind PWAs
Libraries and Tools to work with progressive web app technologies
A Use Case
Limitations with PWAs

3. Evolution of Progressive Web App

4. Native Apps
Business/Developers
Engagement
Access to native features
Users
User experience
Engagement
Offline support

5. Native Apps
Business/Developers
Engagement
Access to native features
High development effort
Very less new app installs
20% of users drop while installation
Upgrade
Users
User experience
Engagement
Offline support
Storage
Installation

6. Web Apps
Users
No installation needed
No additional storage
Easy discovery
Business/Developers
Less development effort
Upgrade

7. Web Apps
Users
No installation needed
No additional storage
User experience
Offline support
Engagement
Business/Developers
Less development effort
Upgrade
Engagement

8. Progressive web apps evolution
Addressing the gaps in web apps and native apps
Middle ground
Best of native and Best of web apps

9. Progressive web applications are
regular web applications with an app like experience.

10. End of the day. It’s a
Web App

11. Gaps in regular Web Apps
App like experience
User experience Offline support Re engagement

12. Gaps in regular Web Apps
App like experience
User experience Offline support Re engagement

13. User Experience
App on Home Screen Full Screen experience Recently used apps

14. Add to Home Screen

15. Web App Manifest

17. Add to Home screen availability in different browsers
Source: caniuse.com

18. Gaps in regular web apps
App like experience
User experience Offline support Re engagement

19. What it is like now What will make the user happy
Web app in offline mode

20. Caching to the Rescue

21. App cache is a high level,
declarative API with which you
can specify the resources
you’d want the browser to
cache.
Are we going to use.. App cache?

22. Rigid
Developed by browser vendors and did not provide developers the
flexibility to customise
Deprecated in Chrome and Firefox browsers.
Limitations with App cache

23. Service Worker

24. Service workers are known as a low level api which
acts as a client side proxy.

25. How does this simple javascript file help me make
my app.. offline?

26. Browser
Server
Server
How does the Service Worker works?
Service Worker
Client side proxy

27. Service Worker Life Cycle

28. Service Worker Life Cycle

29. Service Worker Life Cycle

30. Service Worker Life Cycle

31. Service Worker Life Cycle

32. Service Worker Life Cycle

33. Registering Service Worker

34. What can happen on Install Event

35. What to cache during this Install Event?!

36. Application shell is the
minimal HTML, CSS,
and JavaScript powering
a user interface
Application Shell

37. What do we achieve by using App Shell Architecture?

38. Installing Service Worker

39. Fetch event handler

40. Demo

41. When is my app updated?

42. When is my app updated?
New Service Worker?

43. The app is controlled by a
service worker

44. Browser detects new service
worker and installs it

45. New service worker waits until
the pages controlled by
existing worker are closed

46. This new service worker takes control of the website once
all the pages controlled by old service worker are closed

47. is ServiceWorker ready?
Source: caniuse.com

48. Questions?

49. Should I care about all this If I don’t support
offline?
How do I support offline in all browsers?

50. Gaps in regular web apps
App like experience
User experience Offline support Re engagement

51. Push Notification

52. Service Worker App Server
Uses Notification API to send a
notification to the user
Send message
Push Server

53. Service Worker Push Server
Subscribe and Get End Point

54. Service Worker App Server
Send endpoint to the App Server
Push Server

55. Service Worker
Make request to endpoint
Push Server App Server

56. Service Worker
Wakes up the service worker
Push Server App Server

57. Service Worker
Uses Notification API to send a
notification to the user
Push Server App Server

58. Subscribing to push notification

59. Listening to push notification

60. Push Notification availability in different browsers
Source: caniuse.com

61. The best code is no code at all

63. Libraries for Service Workers
Sw-Precache
Sw-Toolbox

64. Sw-Precache
It is a module to generate service worker.
It can be easily integrated with Javascript based build scripts like gulp and grunt.
This generates service worker which caches all the resources according to the
configuration provided.

65. Sw-Precache

66. Cache First Strategy

67. Server
V1 V2
V1 is fully downloaded
V2 only changed files are downloaded
Downloads only delta

68. Demo

69. SW-Toolbox
It is another helping library for generating service worker.
Caching strategy for dynamic content.
It can be integrated with Sw-Precache or used individually.
Sw-Precache + Sw-Toolbox = Offline first caching for static content + Choose a
caching strategy for dynamic content.

70. Sw-Precache + Sw-Toolbox

71. Demo

72. Caching Strategies
Network First
Cache First
Fastest
Cache Only
Network Only

73. Network First

74. Cache First

75. Fastest

76. Cache Only

77. Network only

78. Things to note about Service Workers
ServerHTTPS No Business Logic

79. Are you already a progressive web app

80. Websites adopted Progressive web apps

81. Flipkart Lite
3x more time spent on the site
40% higher re-engagement rate
70% greater conversion rate via home screen
3x lower data usage
Source: https://developers.google.com/web/showcase/2016/flipkart

82. OLA PWA
~60 MB on Android
~100 MB on IOS
~0.5 MB as a PWA
Source: https://developers.google.com/web/showcase/2017/ola

83. Our Application
Offline first Application.
Smaller upgrades.

84. Limitations with PWA - Cross Browser Support

85. Convert your responsive sites to PWA

86. References
https://www.youtube.com/watch?v=fGTUIlEM0m8
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
https://jakearchibald.com/2014/offline-cookbook/
https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/
https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker
https://github.com/GoogleChrome/sw-precache
https://github.com/GoogleChrome/sw-toolbox
https://developers.google.com/web/progressive-web-apps/checklist
https://jakearchibald.github.io/isserviceworkerready/
https://whatwebcando.today/
https://developers.google.com/web/tools/lighthouse/
https://medium.com/progressive-web-apps/building-flipkart-lite-a-progressive-web-app-2c211e641883

87. Questions?