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
19:55 MIN
Implementing service workers for offline fallbacks
Is your Progressive Web App Lazy? How to read and improve your PWA Performance
15:01 MIN
Building reliable and fast offline-first experiences
PWAs in 2021
21:02 MIN
Using the Fetch API for a cache-first strategy
PWA Fundamentals: websites with superpowers
15:21 MIN
Using service workers to enhance multi-page apps
The Lean Web
17:13 MIN
Using Progressive Web Apps for offline capabilities
Challenges for omnichannel applications at ALDI: Data distribution and offline capabilities
17:09 MIN
Building offline-ready apps with a robust caching strategy
Scalable architecture for mobile apps
16:27 MIN
Getting started with service workers and the Cache API
PWA Fundamentals: websites with superpowers
16:52 MIN
Implementing caching strategies with service workers and Workbox
Progressive Web Apps - The next big thing
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:57Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
29:14Sleek, Swift, and Sustainable: Optimizations every web developer should consider
Andreas Taranetz
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.
Backend Engineer (TypeScript - Cloudflare Workers, TimescaleDB )
nono
€75-120K
Intermediate
Node.js
Grafana
GraphQL
Terraform
+7
Backend Engineer (TypeScript - Cloudflare Workers, TimescaleDB & AI Infrastructure)
nono
€75-120K
Intermediate
Node.js
Grafana
GraphQL
Terraform
+7