Notifications that arrive when ihasmail is closed

ihasmail's notifications came from EventSource, which lives exactly as
long as a tab does -- so "desktop notifications" has always quietly
meant "while you are looking". That switch is now labelled as much, and
a second one does the thing people assumed the first one did.

Stalwart 0.16 signs Web Push with VAPID (RFC 9749) and can put the
message itself in the payload (draft-ietf-jmap-emailpush). The server
pushes straight to the browser's own push service: ihasmail's server is
not in the delivery path, there is no relay to run, and nothing beyond
the browser vendor's endpoint that Web Push requires of everyone.

Checked against the live 0.16.19 before any of this was written, because
an advertised capability is not a configured one:

  - the session publishes a real applicationServerKey, so no key
    generation or server configuration is needed
  - PushSubscription/get answers an ordinary user rather than refusing
  - emailpush is advertised, and its draft defines a filter, an ordered
    properties list and an urgency -- so the payload can carry sender and
    subject, and the server drops properties from the end when it will
    not fit rather than failing the notification

Three things this gets right that are easy to get wrong:

  - The verification handshake. A JMAP subscription delivers nothing
    until the client echoes back a code the server pushed, and the
    service worker cannot answer it -- no credentials in that context.
    It forwards the code to a tab, or leaves it in the cache when no tab
    was open to forward it to.

  - Key encoding. The W3C Push API produces unpadded base64url and
    Stalwart 0.16 was fixed to accept exactly that, so nothing here pads
    on the way out. The VAPID key needs padding on the way *in* for
    atob; getting that backwards fails at subscribe() with an opaque
    error, so it lives in one named function with tests.

  - Sign-out. A subscription belongs to the account, not the session.
    Without tearing it down, a shared machine keeps notifying for a
    mailbox nobody is signed into -- which is somebody else's mail.

The mock models the JMAP half, including refusing padded keys and
non-https endpoints, and creating subscriptions *unverified*. Delivery
cannot be mocked -- it runs through the browser vendor's real push
service -- but a mock that marked a subscription verified on creation
would let a client ship without the handshake, and the symptom in
production is "registered, and silent".

Not verified end to end: an actual notification arriving. That needs a
real browser, a real push service and real delivery, so it is live
testing or nothing.

web/public/sw.js

@@ -1,5 +1,7 @@
-/* ihasmail service worker: app-shell caching for installability & fast loads.
-   API requests are never cached. */
+/* ihasmail service worker.
+   Two jobs: app-shell caching for installability and fast loads (API requests
+   are never cached), and Web Push, which is the only part of ihasmail that runs
+   when no tab is open. */
 const VERSION = "ihasmail-v2";
 const SHELL = ["/", "/manifest.webmanifest", "/img/logo.png", "/img/icon-192.png", "/favicon.ico"];
 
@@ -39,3 +41,95 @@ self.addEventListener("fetch", (event) => {
   }
   event.respondWith(fetch(req).catch(() => caches.match(req)));
 });
+
+
+/* ------------------------------------------------------------------ */
+/* Web Push                                                            */
+/* ------------------------------------------------------------------ */
+
+/*
+ * Stalwart signs with VAPID and pushes straight to the browser's push service;
+ * nothing here talks to ihasmail's server. The payload is an EmailPush object
+ * (draft-ietf-jmap-emailpush) carrying enough of the message to show a useful
+ * notification without a round-trip — which matters, because when this fires
+ * there may be no session to make one with.
+ *
+ * A JMAP subscription also delivers a PushVerification first, and stays silent
+ * until the client echoes its code back. That cannot be done from here (no
+ * credentials), so it is stashed for a tab to collect and confirm.
+ */
+
+const VERIFY_KEY = "ihasmail-push-verification";
+
+function textOf(email) {
+  const from = email?.from?.[0];
+  const who = from?.name || from?.email || "New message";
+  const what = email?.subject || "(no subject)";
+  return { title: who, body: what, preview: email?.preview || "" };
+}
+
+self.addEventListener("push", (event) => {
+  let data = null;
+  try {
+    data = event.data ? event.data.json() : null;
+  } catch {
+    /* not JSON: fall through to the generic notification below */
+  }
+
+  // The verification handshake. No credentials here, so hand it to a tab —
+  // an open one now, or the next one to start.
+  if (data && data["@type"] === "PushVerification") {
+    event.waitUntil((async () => {
+      const payload = { id: data.pushSubscriptionId, code: data.verificationCode };
+      const clients = await self.clients.matchAll({ includeUncontrolled: true, type: "window" });
+      if (clients.length) {
+        for (const c of clients) c.postMessage({ type: "push-verification", ...payload });
+      } else {
+        const cache = await caches.open(VERSION);
+        await cache.put(VERIFY_KEY, new Response(JSON.stringify(payload)));
+      }
+    })());
+    return;
+  }
+
+  const emails = (data && data["@type"] === "EmailPush" && Array.isArray(data.emails)) ? data.emails : [];
+  event.waitUntil((async () => {
+    if (!emails.length) {
+      // A StateChange, or a payload too large to carry the message. Say
+      // something true rather than inventing a sender.
+      await self.registration.showNotification("New mail", {
+        icon: "/img/icon-192.png", badge: "/img/favicon-64.png", tag: "ihasmail-mail", data: { url: "/mail" },
+      });
+      return;
+    }
+    // One notification per message, collapsing repeats of the same message by
+    // tag so a re-push does not stack.
+    for (const email of emails.slice(0, 5)) {
+      const { title, body, preview } = textOf(email);
+      await self.registration.showNotification(title, {
+        body: preview ? `${body}\n${preview}` : body,
+        icon: "/img/icon-192.png",
+        badge: "/img/favicon-64.png",
+        tag: `ihasmail-${email.id || body}`,
+        data: { url: email.id ? `/mail/inbox/${email.id}` : "/mail" },
+      });
+    }
+  })());
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const url = event.notification.data?.url || "/mail";
+  event.waitUntil((async () => {
+    const clients = await self.clients.matchAll({ includeUncontrolled: true, type: "window" });
+    // Reuse a tab if one is open rather than piling up windows.
+    for (const c of clients) {
+      if (new URL(c.url).origin === self.location.origin) {
+        await c.focus();
+        if ("navigate" in c) await c.navigate(url).catch(() => {});
+        return;
+      }
+    }
+    await self.clients.openWindow(url);
+  })());
+});