WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2023 • Aug 11, 2023

Offline first!

Rowdy Rabouw

What if your web app thrived without a network connection? Learn to banish the Chrome downasaur using Service Workers and multi-tiered caching for a resilient offline-first experience.

Pause
Mute Enter Fullscreen
#1 about 4 min

Establishing the offline website experience baseline

Experiencing the default browser offline error prompts building resilience.

#2 about 3 min

Understanding service worker threads and event-driven architecture

Service workers act as highly supported local proxies intercepting network requests without blocking the main browser thread.

#3 about 2 min

Registering and installing a browser service worker script

Adding a script checking for browser support and creating a service worker file starts the background process.

#4 about 3 min

Storing static cache files during the install event

Caching stable assets explicitly during installation improves initial application footprint performance.

#5 about 3 min

Intercepting network requests to return cached static assets

Listening to the network fetch event bypasses external servers to directly retrieve data and drastically reduce load times.

#6 about 3 min

Serving a custom offline fallback html template page

Returning a dedicated offline template for failed network requests avoids exposing standard built-in browser connection errors.

#7 about 2 min

Cloning network responses automatically into a dynamic cache

Duping successful server text contents into a runtime dynamic cache quietly stores newly visited views for later offline navigation.

#8 about 2 min

Deleting outdated static caches during the activation phase

Removing mismatched explicit cache versions when a new service worker script mounts forces client terminals to pick up fresh content releases.

#9 about 4 min

Bypassing browser prefetch limitations using custom data attributes

Querying anchor tags annotated with opt-out identifiers circumvents native meta tag prefetch incompatibilities found in safari platforms.

#10 about 4 min

Storing prefetch links automatically via intersection observer api

Triggering local storage cache downloads purely against hyperlinked addresses entering viewports guarantees clients skip wasting bandwidth downloading hidden routes.

#11 about 2 min

Respecting network condition constraints to skip automated prefetching

Monitoring connection effective types and native save-data toggle signals skips aggressive offline caching logic during constrained bandwidth scenarios.

#12 about 4 min

Displaying accessible offline route lists dynamically using postmessage

Firing data events from the service worker informs visual fallback screens of which precise domains reside fully intact inside application cache logic.

#13 about 5 min

Answering questions on content cache invalidation and storage

Extending runtime resilience onto external endpoint calls leverages indexdb logic prior to evaluating cache busting patterns against carbon footprints.

Matching moments

3:38 min

Implementing offline capabilities using service workers

Laura Morinigo · WWC 2022

1:40 min

Enhancing multi-page applications with local service worker caching

Chris Ferdinandi · JS Congress

6:50 min

Achieving application reliability and offline accessibility

Ire Aderinokun · JS Congress

6:20 min

Enabling offline capabilities and application installation via service workers

Christian Liebel Christian Liebel · WWC 2022

2:38 min

Architecting offline experiences with service worker proxy models

Enrico La Torre +1 · WWC 2023

1:27 min

Introduction to progressive web apps

Laura Morinigo · WWC 2022

More from World Congress 2023

The year 3000, a brief history of Web Development thumbnail
25:30
over 2 years ago

The year 3000, a brief history of Web Development

Lorenzo Pieri

Demografie nutzen um jedem Bewerber das passende Angebot zu machen! thumbnail
8:52
over 2 years ago

Demografie nutzen um jedem Bewerber das passende Angebot zu machen!

Nathalie Gierth

Guided Memory Management: Rust's Ownership Model thumbnail
0:18
over 2 years ago

Guided Memory Management: Rust's Ownership Model

Stefan Baumgartner

Passwordless future: WebAuthn and Passkeys in practice thumbnail
32:32
over 2 years ago

Passwordless future: WebAuthn and Passkeys in practice

Clemens Hübner

External Secrets Operator: the secrets management toolbox for self-sufficient teams thumbnail
30:07
over 2 years ago

External Secrets Operator: the secrets management toolbox for self-sufficient teams

Moritz Johner

Building Reliable Serverless Applications with AWS CDK and Testing thumbnail
25:18
over 2 years ago

Building Reliable Serverless Applications with AWS CDK and Testing

Raphael Manke

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Boring Failover: Predictable Region Recovery Across 5,000 Microservices

Garvit Kataria, Sahil Sabharwal

Garvit Kataria
Sahil Sabharwal

Related videos

PWA Fundamentals: websites with superpowers thumbnail
43:06
WWC 2021 • about 5 years ago

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

Progressive Web Apps - The next big thing thumbnail
40:01
LIVE • almost 6 years ago

Progressive Web Apps - The next big thing

Nico Martin

The Lean Web thumbnail
46:46
JS Congress • over 4 years ago

The Lean Web

Chris Ferdinandi

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • about 2 years ago

Catching up on the basics you don't really need that much code

Chris Heilmann

Is your Progressive Web App Lazy? How to read and improve your PWA Performance thumbnail
29:57
WWC 2022 • about 4 years ago

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

Laura Morinigo

What is Local-first Web Development? thumbnail
32:48
WWC Europe 2026 • about 1 month ago

What is Local-first Web Development?

Alexander Opalic

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.