Offline Fallback Page
Serve a cached fallback page when the user is offline.
Why an Offline Page?
When the network is unavailable, a service worker can serve a custom offline fallback instead of the browser's generic "no internet" error. The user sees the brand, useful information, and any cached content — much better than a Chromium dinosaur or Firefox sad-tab.
Caching the Fallback
In the service worker's install event, pre-cache the offline.html page so it is always available, even before the user navigates anywhere offline. The browser ensures the cache survives until the next sw.js change.
const CACHE = "v1";
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
);
});All lessons in this course
- The Web App Manifest
- Service Worker Registration from HTML
- Theme Color and App Icons
- Offline Fallback Page