Service workers are event-driven JavaScript files that run in the background, acting as a proxy between the browser and the network.
Use the service worker's install event to open a versioned static cache and pre-populate it with core assets like CSS, fonts, and images.
The fetch event allows the service worker to intercept network requests and respond with assets directly from the cache for improved performance.
When a network request fails for an HTML document, catch the error and serve a pre-cached offline HTML page for a better user experience.
As the user visits new pages, intercept the successful network response and store a clone in a separate dynamic cache for future offline access.
Use the activate event to iterate through existing cache keys and delete any that do not match the current version string, preventing stale content.
Instead of prefetching all links, use the Intersection Observer API to only fetch and cache pages when their corresponding links enter the viewport.
Check the user's network connection type and save data preference to conditionally disable prefetching on slow or metered connections.
Enhance the offline fallback page by dynamically generating a list of links to all content that has been successfully stored in the cache.
Answering audience questions about cache invalidation strategies, handling API calls with IndexDB, and the sustainability of caching.
Sensory-Minds GmbH
Offenbach am Main, Germany
43:06Rowdy Rabouw
14:44Chris Heilmann
25:15Milica Aleksic & Nemanja Petrovic
29:14Andreas Taranetz
29:57Laura Morinigo
56:59Sebastien Stormacq
40:01Nico Martin
43:11Jeremy Keith
Jobs that call for the skills explored in this talk.
UST Global
Nottingham, United Kingdom
nono
