← Docs
Recipe

PWA manifest + service-worker scaffold

Ship a full offline-capable PWA with a single manifest and a lifecycle-aware service worker. Works with any static host.

manifest.json

{
  "name": "Meridian",
  "short_name": "Meridian",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0A0612",
  "theme_color": "#8B5CF6",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

sw.js

const CACHE = "meridian-v1";
const ASSETS = ["/", "/offline"];

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(ASSETS))
  );
  self.skipWaiting();
});

self.addEventListener("activate", (e) => {
  e.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(
        keys
          .filter((k) => k !== CACHE)
          .map((k) => caches.delete(k))
      )
    )
  );
  self.clients.claim();
});

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

Registration

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