Rowdy Rabouw
Offline first!
#1about 6 minutes
Understanding the role and lifecycle of service workers
Service workers are event-driven JavaScript files that run in the background, acting as a proxy between the browser and the network.
#2about 3 minutes
Caching static assets using the install event
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.
#3about 3 minutes
Intercepting requests to serve files from the cache
The fetch event allows the service worker to intercept network requests and respond with assets directly from the cache for improved performance.
#4about 2 minutes
Implementing a custom offline fallback page
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.
#5about 2 minutes
Dynamically caching pages as the user navigates
As the user visits new pages, intercept the successful network response and store a clone in a separate dynamic cache for future offline access.
#6about 2 minutes
Managing and cleaning up outdated cache versions
Use the activate event to iterate through existing cache keys and delete any that do not match the current version string, preventing stale content.
#7about 7 minutes
Prefetching content using the Intersection Observer API
Instead of prefetching all links, use the Intersection Observer API to only fetch and cache pages when their corresponding links enter the viewport.
#8about 1 minute
Adapting prefetching based on network conditions
Check the user's network connection type and save data preference to conditionally disable prefetching on slow or metered connections.
#9about 5 minutes
Creating a dynamic list of available offline pages
Enhance the offline fallback page by dynamically generating a list of links to all content that has been successfully stored in the cache.
#10about 4 minutes
Q&A on cache strategies and dynamic content
Answering audience questions about cache invalidation strategies, handling API calls with IndexDB, and the sustainability of caching.
Related jobs
Jobs that call for the skills explored in this talk.
Sunhat
Köln, Germany
Remote
€85-115K
Senior
Team Leadership
Software Architecture
+1
Matching moments
04:57 MIN
Increasing the value of talk recordings post-event
Cat Herding with Lions and Tigers - Christian Heilmann
01:32 MIN
Organizing a developer conference for 15,000 attendees
Cat Herding with Lions and Tigers - Christian Heilmann
02:54 MIN
Automating video post-production with local scripts
Cat Herding with Lions and Tigers - Christian Heilmann
04:49 MIN
Using content channels to build an event community
Cat Herding with Lions and Tigers - Christian Heilmann
03:17 MIN
Selecting strategic partners and essential event tools
Cat Herding with Lions and Tigers - Christian Heilmann
02:44 MIN
Rapid-fire thoughts on the future of work
What 2025 Taught Us: A Year-End Special with Hung Lee
03:38 MIN
Balancing the trade-off between efficiency and resilience
What 2025 Taught Us: A Year-End Special with Hung Lee
03:34 MIN
The business case for sustainable high performance
Sustainable High Performance: Build It or Pay the Price
Featured Partners
Related Videos
43:06PWA Fundamentals: websites with superpowers
Rowdy Rabouw
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
29:14Sleek, Swift, and Sustainable: Optimizations every web developer should consider
Andreas Taranetz
29:57Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
25:15Optimizing Your App for Success: Tips and Techniques for managing slow devices
Milica Aleksic & Nemanja Petrovic
56:59Offline first & automatic data synchronisations for your web and mobile applications
Sebastien Stormacq
43:11The State Of The Web
Jeremy Keith
40:01Progressive Web Apps - The next big thing
Nico Martin
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
nono
£75-120K
Intermediate
API
Node.js
Grafana
GraphQL
+9