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
15:21 MIN
Using service workers to enhance multi-page apps
The Lean Web
17:09 MIN
Building offline-ready apps with a robust caching strategy
Scalable architecture for mobile apps
16:52 MIN
Implementing caching strategies with service workers and Workbox
Progressive Web Apps - The next big thing
19:46 MIN
PWA fundamentals for installation and offline support
Making of paint.js.org—a Web Component-based Productivity PWA
09:15 MIN
Designing for offline-first experiences
Progressive Web Apps - The next big thing
22:21 MIN
Designing for offline and slow network conditions
Making the switch from web to mobile development
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
25:15Optimizing Your App for Success: Tips and Techniques for managing slow devices
Milica Aleksic & Nemanja Petrovic
29:14Sleek, Swift, and Sustainable: Optimizations every web developer should consider
Andreas Taranetz
56:59Offline first & automatic data synchronisations for your web and mobile applications
Sebastien Stormacq
40:01Progressive Web Apps - The next big thing
Nico Martin
30:27HTTP headers that make your website go faster
Thijs Feryn
From learning to earning
Jobs that call for the skills explored in this talk.
Senior PHP Developer - Delft, NL
Online Payment Platform
Delft, Netherlands
€75-95K
Senior
PHP
MySQL
Laravel
Site Reliability Engineer Fully Remote
Webapp
Broughton, United Kingdom
Remote
ELK
Grafana
Terraform
Elasticsearch
+1
Web Designer (Worldwide - Remote)
Wing Assistant
San Salvador, Spain
Remote
€18-24K
Intermediate
Figma
WordPress
Google Analytics
Fullstack Developers (Headless CMS) - 100% remote, ASAP, 12+ months
wynwood tech LLC
Remote
React
Node.js
Next.js
JavaScript
+2