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.
43:06Rowdy Rabouw
14:44Chris Heilmann
29:57Laura Morinigo
29:14Andreas Taranetz
25:15Milica Aleksic & Nemanja Petrovic
56:59Sebastien Stormacq
40:01Nico Martin
43:11Jeremy Keith
Jobs that call for the skills explored in this talk.
doinstruct Software GmbH
Berlin, Germany
Speech Processing Solutions
Vienna, Austria
Peter Park System GmbH
München, Germany
doinstruct Software GmbH
Berlin, Germany
Bite Client
Atlanta, United States of America
BLUE MOON Communication Consultants GmbH
Neuss, Germany
Sdn Young Talent Board