Recipe

Offline page

Build a custom offline fallback that keeps users engaged when the network drops — branded, cached, and ready before they even notice.

📴

Precache the offline shell during install so it serves instantly from CacheStorage.

🎨

Match your app shell — header, footer, and a friendly message that respects your design tokens.

🔄

Poll navigator.onLine and auto-refresh when the connection returns — zero user friction.

Quick start

Step 1 — Register the worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Step 2 — Cache the offline page

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('v1').then((c) =>
      c.add('/offline')
    )
  );
});

Step 3 — Serve on fetch failure

self.addEventListener('fetch', (e) => {
  e.respondWith(
    fetch(e.request).catch(() =>
      caches.match('/offline')
    )
  );
});

Pro tip: Keep the offline page under 50 KB. Inline critical CSS, avoid external fonts, and test with Chrome DevTools → Network → Offline.