Introduction to Offline First Web Applications

on YouTube ↗41m

" summary

A replaceable Webmail PWA is built to work offline by wiring service workers to intercept requests, using the Cache API for assets and IndexedDB (115 MB used in one demo) for large local state, and queuing user actions to replay on reconnect; the Background Sync API (Chrome/Edge only) and the Persistent Storage API protect queued data from eviction. Tooling suggestions include Workbox, PouchDB/RxDB and Replicache-style replication, and a custom action-queue layer is shown that mutates local state immediately and reconciles or reverts changes after the server response.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 1:32The need for offline apps
3. 3:37Defining PWA and problems
4. 7:34Service workers and caching
5. 11:07Background sync API
6. 12:57Storage technologies
7. 19:07Existing tooling and tools
8. 21:45Architecture approach
9. 23:59Introducing RMIJS
10. 27:48Implementing mutations
11. 30:00Live demo and results
12. 33:33Open source plans
13. 34:48Q&A session

" related talks

• 52mOffline web applications don't exist anymore!Francesco Leardini · NDC London 2021
• 37mOffline web applications don't exist anymore!Francesco Leardini · AngularDay 2019
• 30mOffline First: Making Your App Awesome When the Network Isn'tTeri Chadbourne · Node+JS Interactive 2018
• 29mGive Apps Online Superpowers by Optimizing them for OfflineDan Gebhardt · JSConf Iceland 2018
• 58mOffline SecondAleksey Bogachuk · HolyJS 2017 Piter
• 41mOffline Web Apps don't exist anymore!Francesco Leardini · Conf42 JavaScript 2020
• 45mOffline First (Web) AppsAlex Feyerke · ColdFront Conference 2015
• 38mHow we developed an Offline‑First app using Persistent StorageTimofey Lavrenyuk · JavaScript fwdays'19