app/enhance/offline.ts

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1// "Keep on this device" on a procedure page (docs/KNOWLEDGE-BASE.md, A3): the page, and the files it uses, stored in
2// this browser so it opens at the bench or in the kitchen with no signal. Nothing is stored until the reader asks, and
3// only the pages they ask for: the worker (public/sw.js) is registered on the first press and serves the kept copy only
4// when the network fails. Removing the last kept page clears the store and unregisters the worker, so a reader who
5// changes their mind leaves nothing behind. A browser without service workers is offered nothing.
6
7const KEPT = "kept-v1";
8const WORKER = "/sw.js";
9
10const root = document.querySelector<HTMLElement>(".procedure");
11const links = root?.querySelector<HTMLElement>(".procedure-links");
12
13/** The page's own address, without a scale or units: what the worker matches a kept page by. */
14const page = location.pathname;
15
16/**
17 * Every same-origin file this page uses: its stylesheets, its scripts and the bundles the loader inserts, its images, and
18 * the fonts the stylesheets loaded. Each is stored as fetched, so the kept page draws as it does online.
19 */
20function filesOfPage(): string[] {
21  const urls = new Set<string>();
22  const add = (value: string | null | undefined) => {
23    if (!value) return;
24    const url = new URL(value, location.href);
25    if (url.origin === location.origin) urls.add(url.pathname + url.search);
26  };
27  for (const link of document.querySelectorAll<HTMLLinkElement>('link[rel~="stylesheet"], link[rel="modulepreload"]')) add(link.getAttribute("href"));
28  for (const script of document.querySelectorAll<HTMLScriptElement>("script[src]")) add(script.getAttribute("src"));
29  for (const marker of document.querySelectorAll<HTMLTemplateElement>("template[data-enhance]")) add(marker.getAttribute("data-enhance"));
30  for (const img of document.querySelectorAll<HTMLImageElement>("img[src]")) add(img.getAttribute("src"));
31  for (const entry of performance.getEntriesByType("resource")) {
32    if ((entry as PerformanceResourceTiming).initiatorType === "css") add(entry.name);
33  }
34  urls.delete(page);
35  return [...urls];
36}
37
38// Looked up, never opened: opening a cache creates it, and a reader who only views the page stores nothing.
39async function isKept() {
40  return Boolean(await caches.match(page, { cacheName: KEPT }));
41}
42
43async function keep() {
44  // The page first, and it must arrive before anything is registered or stored; a file that fails is left for the next
45  // keep, so one missing image costs only itself.
46  const response = await fetch(page, { credentials: "same-origin" });
47  if (!response.ok) throw new Error(`the page answered ${response.status}`);
48  await navigator.serviceWorker.register(WORKER, { scope: "/" });
49  const cache = await caches.open(KEPT);
50  await cache.put(page, response);
51  await Promise.allSettled(filesOfPage().map((url) => cache.add(url)));
52}
53
54async function remove() {
55  const cache = await caches.open(KEPT);
56  await cache.delete(page);
57  // The files are shared between kept pages, so they go only with the last page. A page's address has no extension; a
58  // stylesheet, bundle, font or image has one.
59  const pages = (await cache.keys()).filter((request) => !/\.[a-z0-9]+$/i.test(new URL(request.url).pathname));
60  if (pages.length > 0) return;
61  await caches.delete(KEPT);
62  for (const registration of await navigator.serviceWorker.getRegistrations()) {
63    if (registration.active?.scriptURL.endsWith(WORKER) || registration.installing?.scriptURL.endsWith(WORKER) || registration.waiting?.scriptURL.endsWith(WORKER)) {
64      await registration.unregister();
65    }
66  }
67}
68
69if (root && links && "serviceWorker" in navigator && "caches" in window) {
70  const button = document.createElement("button");
71  button.type = "button";
72  button.className = "offline-keep";
73  const status = document.createElement("span");
74  status.className = "offline-status";
75  status.setAttribute("role", "status");
76
77  const paint = (kept: boolean) => {
78    button.setAttribute("aria-pressed", String(kept));
79    button.textContent = kept ? "Kept on this device" : "Keep on this device";
80    button.title = kept ? "Press to remove the copy kept on this device" : "Keep a copy that opens with no connection";
81  };
82
83  button.addEventListener("click", async () => {
84    const kept = button.getAttribute("aria-pressed") === "true";
85    button.disabled = true;
86    try {
87      if (kept) {
88        await remove();
89        paint(false);
90        status.textContent = "Removed from this device.";
91      } else {
92        await keep();
93        paint(true);
94        status.textContent = "Kept on this device: it opens with no connection.";
95      }
96    } catch (error) {
97      status.textContent = kept ? "This copy could not be removed." : "This page could not be kept on this device.";
98      // Reported, not swallowed, and not thrown from an event handler's promise, where it would go unhandled.
99      reportError(error);
100    } finally {
101      button.disabled = false;
102    }
103  });
104
105  paint(false);
106  links.appendChild(button);
107  links.appendChild(status);
108  isKept().then(paint, () => {
109    // Storage refused (a private window may): offer nothing that cannot work.
110    button.remove();
111  });
112}