Name each install, fix the notification badge, switch to Archivo

- Settings > General: an App name (super admin) for the installed app.
  The manifest's name/short_name, the iOS head tags and the loading
  page's title use it, so two installs on one phone can be told apart.
- Notifications get a real badge (white stone silhouette): Android masks
  the badge by alpha, so the opaque app icon showed as a square.
- The loading and offline pages load the app's font.
- The font is now Archivo (variable, one request for every weight),
  matching the marketing site.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

public/loading.html

@@ -5,8 +5,11 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 <meta name="theme-color" content="#fbfaf7" />
 <meta name="robots" content="noindex" />
-<title>cobble</title>
+<title>{{name}}</title>
 <link rel="manifest" href="/manifest.webmanifest" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" />
 <style>
 :root {
     --paper: #fbfaf7;
@@ -33,7 +36,7 @@ body {
     padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
     background: var(--paper);
     color: var(--ink);
-    font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 main {

public/offline.html

@@ -6,6 +6,9 @@
 <meta name="theme-color" content="#fbfaf7" />
 <title>Offline | cobble</title>
 <link rel="manifest" href="/manifest.webmanifest" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" />
 <style>
 :root {
     --paper: #fbfaf7;
@@ -32,7 +35,7 @@ body {
     padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
     background: var(--paper);
     color: var(--ink);
-    font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 main {

public/sw.js

@@ -59,8 +59,17 @@ const ASSET_PATHS = ["/favicon.ico", "/favicon.png", "/apple-touch-icon.png"];
 const BYPASS_PREFIXES = ["/api/", "/ws", "/media", "/computers/"];
 const BYPASS_PATHS = ["/sw.js", "/manifest.webmanifest", "/auth/logout", BUILD_INFO_URL];
 
+/**
+ * Android draws a badge from its alpha alone, so it's the white stone on
+ * transparent (`PwaBadgePath`); the app icon sits on opaque paper and
+ * would show as a square.
+ */
 const DEFAULT_ICON = "/icons/icon-192.png";
-const DEFAULT_BADGE = "/icons/icon-192.png";
+const DEFAULT_BADGE = "/icons/badge-96.png";
+
+function absoluteUrl(path) {
+    return new URL(path, self.location.origin).href;
+}
 
 function isAssetRequest(url) {
     return (
@@ -203,8 +212,8 @@ self.addEventListener("push", (event) => {
     const title = payload.title || "Cobble";
     const options = {
         body: payload.body || "",
-        icon: payload.icon || DEFAULT_ICON,
-        badge: payload.badge || DEFAULT_BADGE,
+        icon: absoluteUrl(payload.icon || DEFAULT_ICON),
+        badge: absoluteUrl(payload.badge || DEFAULT_BADGE),
         tag: payload.tag || undefined,
         renotify: Boolean(payload.tag),
         requireInteraction: Boolean(payload.requireInteraction),