A phone, and how much of this could not be used on one

The sidebar was a 280px panel laid over the page below the phone breakpoint,
opened from first paint, with the only control that closed it underneath it --
and that control existed on /chat and on none of the seven other pages carrying
a sidebar, Settings included. It starts closed at that width now, slides, dims
the page behind it, and closes by tapping beside it, by Escape, or by its own
button, which is inside the drawer where it can be reached.

Everything a finger has to hit was 36px, or 28 for renaming a chat, every action
on a message and every panel's close button. Raising --control-h under a coarse
pointer is the only fix that reaches all forty of them, which is what that token
is for. The row and message actions were also hover-only, so on a phone they did
not exist at all.

Installing: the splash and the browser chrome follow the instance's theme rather
than always being Moria's near-black; there are screenshots, so the install
offer is a dialog rather than a one-line bar; a new release no longer takes over
a page somebody is reading; the notification badge is a silhouette rather than a
grey square; and a browser rotating its own subscription no longer ends
notifications for good.

Every request now says it is happening -- nothing did before, so anything slower
than a few milliseconds looked like a click that had not registered.

A chat can be archived. The column has been filtered on in four places since
folders arrived and written by nothing, which is what made it look built.

chat.css may contain media queries. The ban protected the composer toolbar from
being "fixed" with a breakpoint; that guarantee is asserted directly now, and
the old test would have passed a version of the file that wrapped the toolbar
without one.

scripts/shoot.py is the instrument all of this was found with: it renders a page
through TestClient into a real headless browser at a real size and refuses to
run if an asset URL was left pointing at testserver.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/lembas/web/static/js/sw.js

@@ -42,6 +42,12 @@ var SHELL = [
   "/static/img/logo-mark.svg",
   "/static/img/icon-192.png",
   "/static/img/icon-512.png",
+  // The two a device reaches for when the network is not there: the maskable
+  // one is what every Android launcher crops, and the Apple one is the home
+  // screen. Both were absent from this list while the two nothing crops were
+  // in it.
+  "/static/img/icon-maskable-512.png",
+  "/static/img/apple-touch-icon-180.png",
 ];
 
 self.addEventListener("install", function (event) {
@@ -54,13 +60,40 @@ self.addEventListener("install", function (event) {
           return cache.add(new Request(path, { cache: "reload" })).catch(function () {});
         })
       );
-    }).then(function () { return self.skipWaiting(); })
+    })
   );
+  /* Deliberately NOT skipWaiting() here.
+
+     It used to, unconditionally, together with clients.claim() below -- so a
+     release took over every open tab the moment it was installed, while the
+     cache those tabs were reading from was being emptied underneath them. A
+     page could end up drawing itself from two releases at once, and nothing
+     said so.
+
+     The new worker waits instead, the page is told, and the reader decides.
+     `messages/SKIP_WAITING` below is how they say yes. A worker that is never
+     activated costs a few hundred kilobytes and is replaced by the next one. */
+});
+
+/* The page asking to be taken over now. The only message this worker answers,
+   and it does exactly one thing, because a message channel into a service
+   worker is a thing any script on the origin can post to. */
+self.addEventListener("message", function (event) {
+  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
 });
 
 self.addEventListener("activate", function (event) {
   event.waitUntil(
-    caches.keys().then(function (names) {
+    /* Without this, every navigation waits for this worker to start before its
+       request is even made -- which on a cold phone is the difference between
+       a page and a pause. The navigate branch below is a plain fetch, so the
+       preloaded response is used simply by preferring it when it exists. */
+    (self.registration.navigationPreload
+      ? self.registration.navigationPreload.enable().catch(function () {})
+      : Promise.resolve()
+    ).then(function () {
+      return caches.keys();
+    }).then(function (names) {
       return Promise.all(
         names.map(function (name) {
           if (name !== CACHE && name.indexOf("lembas-") === 0) return caches.delete(name);
@@ -97,9 +130,9 @@ self.addEventListener("fetch", function (event) {
 
   if (request.mode === "navigate") {
     event.respondWith(
-      fetch(request).catch(function () {
-        return caches.match("/offline");
-      })
+      Promise.resolve(event.preloadResponse)
+        .then(function (preloaded) { return preloaded || fetch(request); })
+        .catch(function () { return caches.match("/offline"); })
     );
     return;
   }
@@ -158,13 +191,53 @@ self.addEventListener("push", function (event) {
         tag: "lembas-" + (payload.kind || "unread"),
         renotify: true,
         icon: "/static/img/icon-192.png",
-        badge: "/static/img/icon-192.png",
+        /* A badge is drawn as a *mask* in the status bar -- the device keeps
+           the alpha and throws the colour away. The full-colour 192 is opaque
+           to its edges, so what Android rendered was a solid grey square. The
+           leaf has transparency, so it survives being masked. */
+        badge: "/static/img/badge-72.png",
         data: { url: payload.url || "/" },
       });
     })
   );
 });
 
+/*
+  A browser may replace a subscription on its own -- a push service expiring a
+  key, a browser upgrade. When it does, the endpoint this server holds stops
+  working and nothing anywhere says so: notifications simply stop. The event
+  fires exactly once, at the moment of the swap, and it is the only chance to
+  hear about it.
+
+  Re-subscribing needs the server's public key, which this worker does not hold,
+  so it asks the same endpoint the page does.
+*/
+self.addEventListener("pushsubscriptionchange", function (event) {
+  event.waitUntil(
+    fetch("/api/push/key")
+      .then(function (response) { return response.ok ? response.json() : null; })
+      .then(function (data) {
+        if (!data || !data.key) return null;
+        return self.registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: Uint8Array.from(
+            atob(data.key.replace(/-/g, "+").replace(/_/g, "/")),
+            function (c) { return c.charCodeAt(0); }
+          ),
+        });
+      })
+      .then(function (subscription) {
+        if (!subscription) return null;
+        return fetch("/api/push/subscribe", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(subscription.toJSON()),
+        });
+      })
+      .catch(function () { /* Nothing here can ask a person for help. */ })
+  );
+});
+
 /*
   Clicking one.