Offline-First Patterns for Progressive Web Apps

Progressive Web Apps (PWAs) are here with wide support by modern browsers (mobile & desktop). Becoming a PWA should be fundamental for every web application wishes to give its users the best user experience of the web.

One of the core concepts of PWAs is to think offline-first. Let's see what does it mean and which patterns we need to embrace with real-world examples of a React web-app.

Example app:
https://github.com/elizehavi/pwa-offline-first-example

Transcript

1. Offline-First Patterns for Progressive Web Apps Eli Zehavi Software Architect @ Palo Alto Networks eli.zehavi@gmail.com
2. meetup.com/javascript-israel SUBMIT YOUR LECTURE: facebook.com/groups/jsisrael http://bit.ly/jsil-apply Thanks To Our Sponsors: SUPPORT THE COMMUNITY: http://bit.ly/jsil-sponsor
3. Introduction to PWA PWAs (Progressive Web Apps) are user experiences that have the reach of the web, and are: ❖ Reliable — Load instantly and never show the downasaur, even in uncertain network conditions. ❖ Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling. ❖ Engaging — Feel like a natural app on the device, with an immersive user experience. Source: https://developers.google.com/web/progressive-web-apps/
4. Rich offline experiences ❖ Local cache for static assets ❖ Periodic background syncs ❖ Push notifications ❖ Add to home screen … and more. Functionality that would normally require a native application — Are available on the web. Source: https://developers.google.com/web/progressive-web-apps/
5. Why Offline-First?
7. Example app: chesslog ❖ Assets: Caching of static assets. ❖ Data: Single DB interface, local/remote behind the scenes ❖ Offline UI/UX: Offline/Online state / transitions indicators
8. Service Workers
9. Simplified service worker lifecycle https://developers.google.com/web/fundamentals/primers/service-workers/
10. https://jakearchibald.github.io/isserviceworkerready/
11. Desktop progressive web apps can be 'installed' on the user's device much like native apps. The state of PWA PWAs on Desktop Starting in Chrome 73, Progressive Web Apps are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.
12. OK, so is there a checklist? Lighthouse https://developers.google.com/web/
13. Exemplary Progressive Web App https://bit.ly/2RAvnBw
14. Demo & Code Examples
16. Offline-first Patterns we reviewed today...
17. Static Assets Caching ★ For common case (react), CRA. ★ Custom setup - Workbox. ★ New version available: ◦ Close all tabs toast (CRA). ◦ Reload toast: http://bit.ly/2X07jtd
18. Data & Storage ★ Single storage interface. ★ “Out of the box” example: Firebase SDK.
19. ★ Offline indicator (ideally) at fixed location. ★ Toasts: ◦ Assets: ▪ App is available offline. ◦ Network: ▪ Go offline. ▪ Back online. ◦ Data: ▪ Could not use offline storage. UI/UX: Offline/Online/Sync state Indicators.
20. Code Examples https://github.com/elizehavi/pwa-offline-first-example
21. Offline-first means giving your users the best user experience of the web, anytime, anywhere.
22. Thank you! :) Q&A