Service Workers & PWAs

navigator.serviceWorker.register("/sw.js")
        │  download, byte-compare with the current version
        ▼
   installing ── "install": precache (event.waitUntil)
        │         rejected promise → redundant, old SW stays
        ▼
   installed (waiting) ── old SW still controls open tabs
        │  every old tab closed, or self.skipWaiting()
        ▼
   activating ── "activate": delete old caches, clients.claim()
        ▼
   activated ── handles fetch, push, sync, message events
        │  a newer version activates
        ▼
   redundant

if ("serviceWorker" in navigator) {
  window.addEventListener("load", async () => {
    try {
      const reg = await navigator.serviceWorker.register(
        "/sw.js",
        { scope: "/" },
      );
      console.log("SW scope:", reg.scope);
    } catch (err) {
      console.error("SW registration failed", err);
    }
  });
}

declare const self: ServiceWorkerGlobalScope;
 
self.addEventListener("fetch", (event) => {
  const { request } = event;
  const url = new URL(request.url);
  if (request.method !== "GET") return; // default: network
  if (url.origin !== self.location.origin) return;
  if (request.mode === "navigate") {
    event.respondWith(networkFirst(request));
    return;
  }
  if (url.pathname.startsWith("/assets/")) {
    event.respondWith(cacheFirst(request));
  }
});
 
declare function networkFirst(r: Request): Promise<Response>;
declare function cacheFirst(r: Request): Promise<Response>;
export {};

export async function cacheFirst(
  req: Request,
  cacheName: string,
): Promise<Response> {
  const cache = await caches.open(cacheName);
  const hit = await cache.match(req);
  if (hit) return hit;
  const res = await fetch(req);
  if (res.ok) await cache.put(req, res.clone());
  return res;
}
 
export async function networkFirst(
  req: Request,
  cacheName: string,
  timeoutMs = 3000,
): Promise<Response> {
  const cache = await caches.open(cacheName);
  try {
    const res = await fetch(req, {
      signal: AbortSignal.timeout(timeoutMs),
    });
    if (res.ok) await cache.put(req, res.clone());
    return res;
  } catch {
    return (await cache.match(req)) ?? Response.error();
  }
}

declare const self: ServiceWorkerGlobalScope;
 
const VERSION = "v42";
const KEEP = new Set([`shell-${VERSION}`, `rt-${VERSION}`]);
 
self.addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      for (const name of await caches.keys()) {
        if (!KEEP.has(name)) await caches.delete(name);
      }
    })(),
  );
});
 
// the page asks the waiting worker to take over
self.addEventListener("message", (event) => {
  if (event.data?.type === "SKIP_WAITING") {
    void self.skipWaiting();
  }
});
export {};

declare const self: ServiceWorkerGlobalScope;
 
self.addEventListener("activate", (event) => {
  const { navigationPreload } = self.registration;
  event.waitUntil(navigationPreload.enable());
});
 
self.addEventListener("fetch", (event) => {
  if (event.request.mode !== "navigate") return;
  event.respondWith(
    (async () => {
      const preloaded: Response | undefined =
        await event.preloadResponse;
      if (preloaded) return preloaded;
      return fetch(event.request);
    })(),
  );
});
export {};

declare const self: ServiceWorkerGlobalScope;
 
// lib.webworker has no Background Sync types yet
interface SyncEvent extends ExtendableEvent {
  readonly tag: string;
  readonly lastChance: boolean;
}
declare function flushOutbox(): Promise<void>;
 
self.addEventListener("sync", ((event: SyncEvent) => {
  if (event.tag === "outbox") event.waitUntil(flushOutbox());
}) as EventListener);
export {};

<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0f172a">

interface BeforeInstallPromptEvent extends Event {
  prompt(): Promise<void>;
  readonly userChoice: Promise<{
    outcome: "accepted" | "dismissed";
  }>;
}
 
let deferred: BeforeInstallPromptEvent | null = null;
window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault(); // keep it for our own button
  deferred = e as BeforeInstallPromptEvent;
});
 
export async function install(): Promise<boolean> {
  if (!deferred) return false;
  await deferred.prompt();
  const { outcome } = await deferred.userChoice;
  deferred = null;
  return outcome === "accepted";
}
 
// running as an installed app?
const standalone = matchMedia("(display-mode: standalone)")
  .matches;

# bundle the worker into one classic script
bun build src/sw/sw.ts --outfile public/sw.js --minify
 
# or with esbuild
npx esbuild src/sw/sw.ts --bundle --minify \
  --outfile=public/sw.js

import { defaultCache } from "@serwist/turbopack/worker";
import {
  Serwist,
  type PrecacheEntry,
  type SerwistGlobalConfig,
} from "serwist";
 
declare global {
  interface WorkerGlobalScope extends SerwistGlobalConfig {
    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
  }
}
declare const self: ServiceWorkerGlobalScope;
 
const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: false, // show an update prompt instead
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache,
  fallbacks: {
    entries: [
      {
        url: "/~offline",
        matcher({ request }) {
          return request.destination === "document";
        },
      },
    ],
  },
});
serwist.addEventListeners();
 
self.addEventListener("message", (e) => {
  if (e.data?.type !== "SKIP_WAITING") return;
  void self.skipWaiting();
});

declare const self: ServiceWorkerGlobalScope;
 
const CACHE = "offline-v1";
const OFFLINE_URL = "/offline.html";
 
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE).then((c) => c.add(OFFLINE_URL)),
  );
});
 
self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim());
});
 
self.addEventListener("fetch", (event) => {
  if (event.request.mode !== "navigate") return;
  event.respondWith(
    fetch(event.request).catch(async () => {
      const page = await caches.match(OFFLINE_URL);
      return page ?? Response.error();
    }),
  );
});
export {};

declare const self: ServiceWorkerGlobalScope;
 
self.addEventListener("fetch", (event) => {
  const { request } = event;
  const url = new URL(request.url);
  if (request.method !== "GET") return;
  if (!url.pathname.startsWith("/api/feed")) return;
 
  const cacheP = caches.open("feed-v1");
  const networkP = cacheP.then(async (cache) => {
    const res = await fetch(request);
    if (res.ok) await cache.put(request, res.clone());
    return res;
  });
  event.waitUntil(networkP.catch(() => undefined));
  event.respondWith(
    cacheP.then(async (cache) =>
      (await cache.match(request)) ?? networkP,
    ),
  );
});
export {};

export async function registerSW(
  onUpdate: (apply: () => void) => void,
): Promise<void> {
  if (!("serviceWorker" in navigator)) return;
  const sw = navigator.serviceWorker;
  const reg = await sw.register("/sw.js");
  const offer = (w: ServiceWorker) =>
    onUpdate(() => w.postMessage({ type: "SKIP_WAITING" }));
 
  if (reg.waiting && sw.controller) offer(reg.waiting);
  reg.addEventListener("updatefound", () => {
    const w = reg.installing;
    w?.addEventListener("statechange", () => {
      if (w.state === "installed" && sw.controller) offer(w);
    });
  });
  let reloaded = false;
  sw.addEventListener("controllerchange", () => {
    if (reloaded) return;
    reloaded = true;
    location.reload();
  });
}

declare const self: ServiceWorkerGlobalScope;
const SHELL = "shell-v3";
const FILES = ["/", "/app.css", "/app.js", "/icon-192.png"];
self.addEventListener("install", (event) => {
  const cache = caches.open(SHELL);
  event.waitUntil(cache.then((c) => c.addAll(FILES)));
});
self.addEventListener("activate", (event) => {
  const dropOld = async () => {
    for (const n of await caches.keys()) {
      if (n.startsWith("shell-") && n !== SHELL) {
        await caches.delete(n);
      }
    }
  };
  event.waitUntil(dropOld());
});
self.addEventListener("fetch", (event) => {
  const path = new URL(event.request.url).pathname;
  if (!FILES.includes(path)) return;
  event.respondWith(
    caches.match(path).then((r) => r ?? fetch(path)),
  );
});
export {};

declare const self: ServiceWorkerGlobalScope;
 
self.addEventListener("install", () => {
  void self.skipWaiting();
});
 
self.addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      const names = await caches.keys();
      await Promise.all(names.map((n) => caches.delete(n)));
      await self.registration.unregister();
      const tabs = await self.clients.matchAll({
        type: "window",
      });
      for (const tab of tabs) void tab.navigate(tab.url);
    })(),
  );
});
export {};

{
  "id": "/",
  "name": "Easy Notes",
  "short_name": "Notes",
  "description": "Offline-first notes",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192",
      "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512",
      "type": "image/png" },
    { "src": "/maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ]
}