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 · World Congress 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 · World Congress 2022

2:38 min

Architecting offline experiences with service worker proxy models

Enrico La Torre +1 · World Congress 2023

1:27 min

Introduction to progressive web apps

Laura Morinigo · World Congress 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
almost 3 years ago

Demografie nutzen um jedem Bewerber das passende Angebot zu machen!

Nathalie Gierth

Guided Memory Management: Rust's Ownership Model thumbnail
0:18
almost 3 years ago

Guided Memory Management: Rust's Ownership Model

Stefan Baumgartner

Passwordless future: WebAuthn and Passkeys in practice thumbnail
32:32
almost 3 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
almost 3 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
almost 3 years ago

Building Reliable Serverless Applications with AWS CDK and Testing

Raphael Manke

Related videos

PWA Fundamentals: websites with superpowers thumbnail
43:06
World Congress 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 • almost 5 years ago

The Lean Web

Chris Ferdinandi

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • over 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
World Congress 2022 • over 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
World Congress 2026 Europe • 3 months 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.