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.
Matching moments
06:23 MIN
The trend of browsers depending on online services
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
02:33 MIN
Why you might not need JavaScript for everything
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
03:31 MIN
The value of progressive enhancement and semantic HTML
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
03:16 MIN
Improving the developer feedback loop with specialized tools
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
04:30 MIN
Understanding browser APIs that rely on company services
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
04:02 MIN
How a broken frontend culture impacts the web
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
01:15 MIN
Crypto crime, EU regulation, and working while you sleep
Fake or News: Self-Driving Cars on Subscription, Crypto Attacks Rising and Working While You Sleep - Théodore Lefèvre
11:10 MIN
The only frontend stack that truly matters
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
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
40:01Progressive Web Apps - The next big thing
Nico Martin
43:11The State Of The Web
Jeremy Keith
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
papernest
Barcelona, Spain
Remote
Intermediate
Angular
Wing Assistant
Medio Cudeyo, Spain
Remote
€18-24K
Intermediate
Figma
WordPress
Google Analytics