Downloaded 46 times
More Related Content
Similar to Progressive Web Applications - The Next Gen Web Technologies
Progressive Web Applications - The Next Gen Web Technologies
- 1.
- 2. Agenda Evolution of progressiveweb 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 ProgressiveWeb App
- 4. Native Apps Business/Developers Engagement Access tonative features Users User experience Engagement Offline support
- 5. Native Apps Business/Developers Engagement Access tonative 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 installationneeded No additional storage Easy discovery Business/Developers Less development effort Upgrade
- 7. Web Apps Users No installationneeded No additional storage User experience Offline support Engagement Business/Developers Less development effort Upgrade Engagement
- 8. Progressive web appsevolution Addressing the gaps in web apps and native apps Middle ground Best of native and Best of web apps
- 9. Progressive web applicationsare regular web applications with an app like experience.
- 10. End of theday. It’s a Web App
- 11. Gaps in regularWeb Apps App like experience User experience Offline support Re engagement
- 12. Gaps in regularWeb Apps App like experience User experience Offline support Re engagement
- 13. User Experience App onHome Screen Full Screen experience Recently used apps
- 14. Add to HomeScreen
- 15.
- 17. Add to Homescreen availability in different browsers Source: caniuse.com
- 18. Gaps in regularweb apps App like experience User experience Offline support Re engagement
- 19. What it islike now What will make the user happy Web app in offline mode
- 20. Caching to theRescue
- 21. App cache isa 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 browservendors and did not provide developers the flexibility to customise Deprecated in Chrome and Firefox browsers. Limitations with App cache
- 23.
- 24. Service workers areknown as a low level api which acts as a client side proxy.
- 25. How does thissimple javascript file help me make my app.. offline?
- 26. Browser Server Server How does theService Worker works? Service Worker Client side proxy
- 27. Service Worker LifeCycle
- 28. Service Worker LifeCycle
- 29. Service Worker LifeCycle
- 30. Service Worker LifeCycle
- 31. Service Worker LifeCycle
- 32. Service Worker LifeCycle
- 33.
- 34. What can happenon Install Event
- 35. What to cacheduring this Install Event?!
- 36. Application shell isthe minimal HTML, CSS, and JavaScript powering a user interface Application Shell
- 37. What do weachieve by using App Shell Architecture?
- 38.
- 39.
- 40.
- 41. When is myapp updated?
- 42. When is myapp updated? New Service Worker?
- 43. The app iscontrolled by a service worker
- 44. Browser detects newservice worker and installs it
- 45. New service workerwaits until the pages controlled by existing worker are closed
- 46. This new serviceworker takes control of the website once all the pages controlled by old service worker are closed
- 47. is ServiceWorker ready? Source:caniuse.com
- 48.
- 49. Should I careabout all this If I don’t support offline? How do I support offline in all browsers?
- 50. Gaps in regularweb apps App like experience User experience Offline support Re engagement
- 51.
- 52. Service Worker AppServer Uses Notification API to send a notification to the user Send message Push Server
- 53. Service Worker PushServer Subscribe and Get End Point
- 54. Service Worker AppServer Send endpoint to the App Server Push Server
- 55. Service Worker Make requestto endpoint Push Server App Server
- 56. Service Worker Wakes upthe service worker Push Server App Server
- 57. Service Worker Uses NotificationAPI to send a notification to the user Push Server App Server
- 58. Subscribing to pushnotification
- 59. Listening to pushnotification
- 60. Push Notification availabilityin different browsers Source: caniuse.com
- 61. The best codeis no code at all
- 63. Libraries for ServiceWorkers Sw-Precache Sw-Toolbox
- 64. Sw-Precache It is amodule 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.
- 66.
- 67. Server V1 V2 V1 isfully downloaded V2 only changed files are downloaded Downloads only delta
- 68.
- 69. SW-Toolbox It is anotherhelping 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.
- 71.
- 72. Caching Strategies Network First CacheFirst Fastest Cache Only Network Only
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. Things to noteabout Service Workers ServerHTTPS No Business Logic
- 79. Are you alreadya progressive web app
- 80. Websites adopted Progressiveweb apps
- 81. Flipkart Lite 3x moretime 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 MBon Android ~100 MB on IOS ~0.5 MB as a PWA Source: https://developers.google.com/web/showcase/2017/ola
- 83. Our Application Offline firstApplication. Smaller upgrades.
- 84. Limitations with PWA- Cross Browser Support
- 85. Convert your responsivesites to PWA
- 86.
- 87.