> Markdown version of [/videos/645-offline-first](https://www.wearedevelopers.com/videos/645-offline-first). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Offline first!

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.

- **Speakers:** [Rowdy Rabouw](https://www.wearedevelopers.com/@rowdy-rabouw)
- **Event:** World Congress 2023
- **Published:** August 11, 2023
- **Duration:** 35:53
- **URL:** https://www.wearedevelopers.com/videos/645-offline-first

## Summary

The infamous Chrome "downasaur" appears when web applications lose connectivity, but modern browser APIs offer a much better path forward. This comprehensive walk-through explores how to build resilient, offline-first web experiences by leveraging JavaScript Service Workers. Running asynchronously in a separate background thread, a Service Worker acts as a programmable network proxy between the browser and the server, allowing developers to intercept requests, manipulate responses, and serve localized assets immediately when the network drops.

Creating a robust offline architecture requires a multi-tiered caching strategy. By hooking into the install and activate lifecycle events, developers can establish a static cache for core assets—like CSS, fonts, and a custom offline fallback page—while systematically clearing deprecated cache versions to prevent stale content. As users actively browse the application, a dynamic cache intercepts the fetch event to clone and store newly visited pages on the fly. This dual approach ensures that previously viewed content remains entirely accessible offline, while requests to unvisited routes gracefully degrade to a targeted offline screen rather than a generic browser error.

To systematically enhance the offline experience before a disconnection even occurs, the Intersection Observer API can intelligently prefetch linked HTML pages the moment they enter the user's viewport. This proactive fetching can be further optimized by checking the Network Information API to halt background downloads for users on constrained or metered data connections. Ultimately, combining local storage tracking with dynamic cache inspection allows the offline fallback page to render a dynamically generated, clickable list of previously saved routes, transforming a frustrating dead-end into a continuous user journey.

**Keywords:** service workers, offline-first web development, browser caching strategies, static asset caching, dynamic page caching, fetch event interception, intersection observer api, viewport link prefetching, network information api, cache invalidation techniques, offline fallback routing, progressive web applications, localstorage data tracking, indexeddb offline storage

## Chapters

1. **Establishing the offline website experience baseline** (00:00) — Experiencing the default browser offline error prompts building resilience.
1. **Understanding service worker threads and event-driven architecture** (03:07) — Service workers act as highly supported local proxies intercepting network requests without blocking the main browser thread.
1. **Registering and installing a browser service worker script** (05:35) — Adding a script checking for browser support and creating a service worker file starts the background process.
1. **Storing static cache files during the install event** (07:25) — Caching stable assets explicitly during installation improves initial application footprint performance.
1. **Intercepting network requests to return cached static assets** (10:25) — Listening to the network fetch event bypasses external servers to directly retrieve data and drastically reduce load times.
1. **Serving a custom offline fallback html template page** (12:49) — Returning a dedicated offline template for failed network requests avoids exposing standard built-in browser connection errors.
1. **Cloning network responses automatically into a dynamic cache** (15:40) — Duping successful server text contents into a runtime dynamic cache quietly stores newly visited views for later offline navigation.
1. **Deleting outdated static caches during the activation phase** (17:34) — Removing mismatched explicit cache versions when a new service worker script mounts forces client terminals to pick up fresh content releases.
1. **Bypassing browser prefetch limitations using custom data attributes** (18:56) — Querying anchor tags annotated with opt-out identifiers circumvents native meta tag prefetch incompatibilities found in safari platforms.
1. **Storing prefetch links automatically via intersection observer api** (22:14) — Triggering local storage cache downloads purely against hyperlinked addresses entering viewports guarantees clients skip wasting bandwidth downloading hidden routes.
1. **Respecting network condition constraints to skip automated prefetching** (25:46) — Monitoring connection effective types and native save-data toggle signals skips aggressive offline caching logic during constrained bandwidth scenarios.
1. **Displaying accessible offline route lists dynamically using postmessage** (27:03) — Firing data events from the service worker informs visual fallback screens of which precise domains reside fully intact inside application cache logic.
1. **Answering questions on content cache invalidation and storage** (31:01) — Extending runtime resilience onto external endpoint calls leverages indexdb logic prior to evaluating cache busting patterns against carbon footprints.

## Related Moments

- [Implementing offline capabilities using service workers](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance) (from "Is your Progressive Web App Lazy? How to read and improve your PWA Performance")
- [Enhancing multi-page applications with local service worker caching](https://www.wearedevelopers.com/videos/285-the-lean-web) (from "The Lean Web")
- [Achieving application reliability and offline accessibility](https://www.wearedevelopers.com/videos/289-pwas-in-2021) (from "PWAs in 2021")
- [Enabling offline capabilities and application installation via service workers](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Architecting offline experiences with service worker proxy models](https://www.wearedevelopers.com/videos/747-challenges-for-omnichannel-applications-at-aldi-data-distribution-and-offline-capabilities) (from "Challenges for omnichannel applications at ALDI: Data distribution and offline capabilities")
- [Introduction to progressive web apps](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance) (from "Is your Progressive Web App Lazy? How to read and improve your PWA Performance")

## Related Articles

- [Why Presentations Should Always Work Offline—Even at Online Conferences](https://www.wearedevelopers.com/magazine/602-why-presentations-should-always-work-offline-even-at-online-conferences)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**