Rowdy Rabouw

Offline first!

What if your web app worked perfectly, even without an internet connection? Learn to build truly offline-first experiences using Service Workers.

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.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Implementing service workers for offline fallbacks
03:39 MIN

Implementing service workers for offline fallbacks

Is your Progressive Web App Lazy? How to read and improve your PWA Performance

Building reliable and fast offline-first experiences
06:54 MIN

Building reliable and fast offline-first experiences

PWAs in 2021

Using the Fetch API for a cache-first strategy
03:36 MIN

Using the Fetch API for a cache-first strategy

PWA Fundamentals: websites with superpowers

Using service workers to enhance multi-page apps
01:38 MIN

Using service workers to enhance multi-page apps

The Lean Web

Building offline-ready apps with a robust caching strategy
03:50 MIN

Building offline-ready apps with a robust caching strategy

Scalable architecture for mobile apps

Using Progressive Web Apps for offline capabilities
05:33 MIN

Using Progressive Web Apps for offline capabilities

Challenges for omnichannel applications at ALDI: Data distribution and offline capabilities

Getting started with service workers and the Cache API
04:35 MIN

Getting started with service workers and the Cache API

PWA Fundamentals: websites with superpowers

Implementing caching strategies with service workers and Workbox
05:27 MIN

Implementing caching strategies with service workers and Workbox

Progressive Web Apps - The next big thing

Featured Partners

Related Videos

See all videos
PWA Fundamentals: websites with superpowers43:06

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

Is your Progressive Web App Lazy? How to read and improve your PWA Performance29:57

Is your Progressive Web App Lazy? How to read and improve your PWA Performance

Laura Morinigo

Sleek, Swift, and Sustainable: Optimizations every web developer should consider29:14

Sleek, Swift, and Sustainable: Optimizations every web developer should consider

Andreas Taranetz

Optimizing Your App for Success: Tips and Techniques for managing slow devices25:15

Optimizing Your App for Success: Tips and Techniques for managing slow devices

Milica Aleksic & Nemanja Petrovic

Offline first & automatic data synchronisations for your web and mobile applications56:59

Offline first & automatic data synchronisations for your web and mobile applications

Sebastien Stormacq

Progressive Web Apps - The next big thing40:01

Progressive Web Apps - The next big thing

Nico Martin

The State Of The Web43:11

The State Of The Web

Jeremy Keith

Advanced Caching Patterns used by 2000 microservices44:37

Advanced Caching Patterns used by 2000 microservices

Natan Silnitsky

Related Articles

View all articles
AP
Anto Pranjić
11 Tips to Make The Most Out of Your First World Congress 
The world’s most awesome event for developers is taking place in less than a month! It’s been far too long since the last time we met in person, but that’s only going to make this year’s WeAreDevelopers World Congress a truly special experience. Conf...
11 Tips to Make The Most Out of Your First World Congress 
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
CH
Chris Heilmann
Dev Digest 121 - AI goes offline
Hello fellow developer, let's take a look at the cost of AI and its efficiency, catch up on security issues and sing the praise of new JavaScript and CSS features.News and ArticlesThe way we use AI these days seems powerful, but it isn't very efficie...
Dev Digest 121 - AI goes offline

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript