Stop duplicate push notifications and piling up subscriptions

Browsers subscribed to Email changes, so every read or move on any
client arrived as a push the worker could only show as "New mail". They
now subscribe to EmailDelivery, which changes only on delivery; Stalwart
sends a delivery to a subscription with an emailPush filter as an
EmailPush alone. The payload now names id and threadId, which Stalwart
sends only when asked, so notifications carry their actions and open the
message. The worker stays quiet while a focused window is open, and the
page leaves notifications to the worker where push is on.

Every renewal registered a new subscription, on the belief that a
repeated deviceClientId replaces the old one. Stalwart keeps both and
allows fifteen per account, which filled up. A browser now extends its
subscription, clears its own duplicates, replaces them only when its
endpoint changed, and on overQuota makes room among other browsers'
subscriptions. The server names its subscriptions by installation and
removes what its previous process registered, and extends rather than
re-creates.

Checked live on 0.16.22; the mock now keeps duplicates, enforces the
limit and accepts an expiry update.

Fixes #375.

web/src/lib/notify/notify.ts

@@ -82,14 +82,30 @@ export async function requestNotificationPermission(): Promise<NotificationPermi
   }
 }
 
+/**
+ * Show a notification from the page, for a tab that is open but not in front.
+ *
+ * Through the service worker's registration where there is one: Android's
+ * Chrome refuses `new Notification()` outright, so notifications from an open
+ * tab never appeared there at all. The tag is the one the service worker uses
+ * for the same message (`ihasmail-<id>`), so if both ever show it, the second
+ * replaces the first instead of stacking beside it.
+ */
 export function showNotification(title: string, opts: NotificationOptions & { onClick?: () => void } = {}): void {
   if (!("Notification" in window) || Notification.permission !== "granted") return;
   if (document.visibilityState === "visible" && document.hasFocus()) return;
+  const { onClick, ...options } = opts;
+  const full = { icon: withBase("/img/icon-192.png"), badge: withBase("/img/favicon-64.png"), ...options };
+  const viaWorker = navigator.serviceWorker?.controller ? navigator.serviceWorker.ready : null;
+  if (viaWorker) {
+    void viaWorker.then((reg) => reg.showNotification(title, full)).catch(() => undefined);
+    return;
+  }
   try {
-    const n = new Notification(title, { icon: withBase("/img/icon-192.png"), badge: withBase("/img/favicon-64.png"), ...opts });
+    const n = new Notification(title, full);
     n.onclick = () => {
       window.focus();
-      opts.onClick?.();
+      onClick?.();
       n.close();
     };
     setTimeout(() => n.close(), 8000);