Progressive web apps

Benefits of progressive web apps

Transcript

1. + Progressive web apps -Navya Vuppala
2. + what are Progressive web apps? ◼ PWA are enhanced web apps which look and feel like native apps ◼ Reliable: Provides offline support through caching ◼ Fast: quickly respond to user requests ◼ Engaging: send feed like native apps on mobile devices.
3. + Features supported by PWA ◼ Offline loading. Service worker ◼ Push notifications. Service worker ◼ Home screen icons. App manifest ◼ Background sync of user data. Service worker
4. + App manifest code • Provides ability to add home screen icon
5. + Service worker ◼ Service worker is a web worker which runs in the browser ◼ Ability for offline loading through caching ◼ Push notifications through web apps ◼ Acts as proxy server Web server Service worker Send request
6. + Service worker cache ◼ Service worker cache resides in the browser. ◼ Data can be retrieved from cache instead of sending network request. ◼ App Shell needs to be loaded from this cache. ◼ App Shell includes basic files of the app eg: images,css files, js files, layout files etc.
7. + Cache API Service worker Cache Normal JavaScript Value : Response Key : Request Cache data can be retrieved instead of sending requests
8. + Service worker Demo!!!
9. + Background sync in ◼ SyncManager is used for background sync. ◼ Data is stored in indexedDB (transactional key value store db in browser). ◼ Service worker syncs the data once internet is established.
10. + Background sync Demo!!!
11. + Push notifications ◼ Using notification API. ◼ Notifications are sent by the webserver. ◼ Click event on notifications are handled by service worker because it runs in the background. (sw.js). ◼ Each browser + device combination results in a subscription. ◼ Subscription contains the end point of browser + device combination where we send push notifications
12. + Real time PWA apps ◼ mobile.twitter.com ◼ Flipboard ◼ Telegram web app ◼ many more…………
13. + Resources ◼ https://deanhume.com/5-awesome-progressive-web-apps- worth-exploring/ ◼ https://developers.google.com/web/progressive-web-apps/ ◼ https://pplearn.udemy.com/progressive-web-app-pwa-the- complete-guide ◼ https://ionicframework.com/docs/developer- resources/progressive-web-apps/ ◼ https://developer.mozilla.org/en- US/docs/Web/API/IndexedDB_API ◼ https://developers.google.com/web/updates/2015/12/backgro und-sync
14. + Contact me! ◼ On Slack nvuppala ◼ Email: navya.vn330@gmail.com
15. +