Offline first!

on YouTube ↗39m

" summary

Live demo builds a working offline PWA using Service Workers, the Cache API and Fetch API: versioned static cache, dynamic cache with cache.put + response.clone, and an offline.html fallback that actually serves when network fetches fail. Prefetching uses Intersection Observer plus localStorage to avoid repeats and respects save‑data heuristics. Cache cleanup runs on activate and client.postMessage stores dynamic cache name. Measurements show cached loads ~18 ms versus uncached ~35 ms.

AI-written summary · about

" chapters (9)

1. 0:00Offline first welcome
2. 1:04Service workers explained
3. 7:26Static caching
4. 13:08Offline pages
5. 17:04Dynamic caching
6. 19:33Cache cleanup
7. 22:01Prefetching strategies
8. 31:39Local storage tips
9. 37:46Closing

" related talks

• 44mOffline first!Rowdy Rabouw · Jfokus 2023
• 23mGo Offline with Service WorkersEmanuel Kluge · JSUnconf 2016
• 37mOffline web applications don't exist anymore!Francesco Leardini · AngularDay 2019
• 52mGoing offlineJeremy Keith · Frontend United 2019
• 52mOffline web applications don't exist anymore!Francesco Leardini · NDC London 2021
• 27mMaking Offline Suck Less with Service WorkersBret Little · MountainWest JavaScript 2015
• 01h 29mService Workers in Action: Building an Offline-Capable Webshop in under 90 minutesErik Witt · code.talks 2019
• 41mOffline Web Apps don't exist anymore!Francesco Leardini · Conf42 JavaScript 2020