Make the app an installable PWA with phone layout and Web Push

Add a generated manifest, icon set, offline page and service worker that never caches authenticated HTML, plus install and update UI. Turn the rail into a drawer below md with container-query internals, dvh and safe-area handling, and reconnect the socket after visibility/network changes. Add Web Push subscriptions, presence-aware delivery, notification settings and tests.

src/utils/describe-push-device.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from "bun:test";
+import describePushDevice from "./describe-push-device";
+
+describe("describePushDevice", () => {
+    test("names the browser and the device", () => {
+        expect(
+            describePushDevice({
+                user_agent:
+                    "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36",
+                platform: "Linux armv8l",
+            }),
+        ).toBe("Chrome on Android");
+    });
+
+    test("knows iOS browsers are WebKit but still Chrome", () => {
+        expect(
+            describePushDevice({
+                user_agent:
+                    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/130.0.0.0 Mobile/15E148 Safari/604.1",
+            }),
+        ).toBe("Chrome on iPhone");
+    });
+
+    test("falls back to the browser, then the platform, then a generic device", () => {
+        expect(describePushDevice({ user_agent: "curl/8.0" })).toBe(
+            "A browser",
+        );
+        expect(
+            describePushDevice({ user_agent: "something", platform: "linux" }),
+        ).toBe("Linux");
+    });
+});

src/utils/describe-push-device.ts

@@ -0,0 +1,49 @@
+/**
+ * A subscription's user agent as a short device label for the settings
+ * list, e.g. "Chrome on Android". Unknown parts are left out.
+ */
+export default function describePushDevice({
+    user_agent,
+    platform,
+}: {
+    user_agent?: string | null;
+    platform?: string | null;
+}): string {
+    const ua = user_agent || "";
+
+    const browser = /Edg\//.test(ua)
+        ? "Edge"
+        : /OPR\/|Opera/.test(ua)
+          ? "Opera"
+          : /Firefox\/|FxiOS/.test(ua)
+            ? "Firefox"
+            : /CriOS/.test(ua)
+              ? "Chrome"
+              : /Chrome\//.test(ua)
+                ? "Chrome"
+                : /Safari\//.test(ua)
+                  ? "Safari"
+                  : "";
+
+    const device = /iPhone/.test(ua)
+        ? "iPhone"
+        : /iPad/.test(ua)
+          ? "iPad"
+          : /Android/.test(ua)
+            ? "Android"
+            : /Windows/.test(ua)
+              ? "Windows"
+              : /Macintosh|Mac OS X/.test(ua)
+                ? "Mac"
+                : /Linux/.test(ua)
+                  ? "Linux"
+                  : platform
+                    ? platform.charAt(0).toUpperCase() + platform.slice(1)
+                    : "";
+
+    if (browser && device) return `${browser} on ${device}`;
+    if (browser) return browser;
+    if (device) return device;
+
+    return "A browser";
+}

src/utils/url-base64-to-uint8-array.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test";
+import urlBase64ToUint8Array from "./url-base64-to-uint8-array";
+
+describe("urlBase64ToUint8Array", () => {
+    test("decodes base64url without padding", () => {
+        expect([...urlBase64ToUint8Array("AQID")]).toEqual([1, 2, 3]);
+    });
+
+    test("handles the URL-safe characters and missing padding", () => {
+        const bytes = urlBase64ToUint8Array("-_8");
+
+        expect([...bytes]).toEqual([0xfb, 0xff]);
+    });
+
+    test("returns a fresh typed array", () => {
+        const bytes = urlBase64ToUint8Array("AQID");
+
+        expect(bytes).toBeInstanceOf(Uint8Array);
+        expect(bytes.byteLength).toBe(3);
+    });
+});

src/utils/url-base64-to-uint8-array.ts

@@ -0,0 +1,18 @@
+/**
+ * A base64url VAPID public key as the bytes `PushManager.subscribe`
+ * expects.
+ */
+export default function urlBase64ToUint8Array(base64_string: string) {
+    const padding = "=".repeat((4 - (base64_string.length % 4)) % 4);
+    const base64 = (base64_string + padding)
+        .replace(/-/g, "+")
+        .replace(/_/g, "/");
+    const raw = atob(base64);
+    const bytes = new Uint8Array(raw.length);
+
+    for (let index = 0; index < raw.length; index += 1) {
+        bytes[index] = raw.charCodeAt(index);
+    }
+
+    return bytes;
+}