Building an Offline Page for The Guardian

on YouTube ↗26m

" summary

Built a production offline page for theguardian.com using a service worker, Cache API and a dated cache-versioning scheme; prototype completes in less than a day. HTML uses network-first then cache (HTML cached 60s), CSS/JS use cache-first (immutable, year-long). Adds daily crossword refresh via install/global-scope checks, and falls back to cached shell for poor connections. Hits: HTTPS requirement, Chrome/Firefox bugs encountered and worked around, and CDN cache interleaving solved with an offline-page.json manifest.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:02Web vs. native offline
3. 3:17Building an offline page
4. 4:16Service worker fundamentals
5. 7:04Registering and caching
6. 11:01Handling network requests
7. 14:00Caching strategies
8. 17:15Offline-first design
9. 20:38Overcoming implementation bugs
10. 23:59Conclusion

" related talks

• 24mBuilding an Offline Page for theguardian.comOliver Joseph Ash · JSConf Budapest 2016
• 44mOffline first!Rowdy Rabouw · Jfokus 2023
• 39mOffline first!Rowdy Rabouw · Øredev 2023
• 45mOffline UXSimon Knox · NDC Sydney 2018
• 27mMaking Offline Suck Less with Service WorkersBret Little · MountainWest JavaScript 2015
• 28mOut of the ShadowsAndrea De Carolis · CSS Day 2019
• 52mGoing offlineJeremy Keith · Frontend United 2019
• 01h 29mService Workers in Action: Building an Offline-Capable Webshop in under 90 minutesErik Witt · code.talks 2019