Implement PWA shell (task 50)

Add web manifest, placeholder icons, app-shell service worker, and install prompt so famapp is installable on iOS and Android home screens. - public/manifest.webmanifest — name, short_name, standalone display, start_url /, all four icon sizes (192/384/512 + maskable) - public/icon-{180,192,384,512,512-maskable}.png — indigo placeholder squares generated by scripts/generate-icons.mjs (pnpm gen:icons) - public/icon.svg — house-icon SVG source for future branded export - public/sw.js — hand-rolled app-shell SW: precaches offline.html, cache-first for /_next/static/, network-first navigation with offline fallback, network-only for /api/* - public/offline.html — branded offline fallback page - src/components/pwa-register.tsx — client SW registration - src/components/install-prompt.tsx — dismissible install banner: beforeinstallprompt on Android, "Add to Home Screen" hint on iOS - Root layout: viewport themeColor, manifest/appleWebApp metadata, apple-touch-icon, mounts PwaRegister + InstallPrompt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 16:00:02 -05:00
parent d5a8bf9d95
commit 8aab25e0ac
15 changed files with 459 additions and 2 deletions
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <!-- Background -->
+  <rect width="512" height="512" rx="80" fill="#4F46E5"/>
+  <!-- House body -->
+  <polygon points="256,108 396,234 364,234 364,392 148,392 148,234 116,234" fill="white"/>
+  <!-- Door -->
+  <rect x="212" y="296" width="88" height="96" rx="6" fill="#4F46E5"/>
+  <!-- Left window -->
+  <rect x="164" y="254" width="66" height="54" rx="6" fill="#4F46E5" opacity="0.55"/>
+  <!-- Right window -->
+  <rect x="282" y="254" width="66" height="54" rx="6" fill="#4F46E5" opacity="0.55"/>
+</svg>
@@ -0,0 +1,32 @@
+{
+  "name": "famapp",
+  "short_name": "famapp",
+  "description": "Family coordination app",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4F46E5",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#4F46E5" />
+    <title>famapp — offline</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+      :root { --indigo: #4F46E5; --indigo-light: #E0E7FF; }
+
+      body {
+        font-family: system-ui, -apple-system, sans-serif;
+        min-height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1.25rem;
+        padding: 2rem;
+        background: #f9fafb;
+        color: #111827;
+        text-align: center;
+      }
+
+      .icon {
+        width: 72px;
+        height: 72px;
+        border-radius: 16px;
+        background: var(--indigo);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .icon svg { width: 40px; height: 40px; }
+
+      h1 { font-size: 1.25rem; font-weight: 600; }
+
+      p { font-size: 0.9375rem; color: #6b7280; max-width: 28ch; }
+
+      button {
+        margin-top: 0.5rem;
+        padding: 0.625rem 1.5rem;
+        background: var(--indigo);
+        color: white;
+        border: none;
+        border-radius: 0.5rem;
+        font-size: 0.9375rem;
+        font-weight: 500;
+        cursor: pointer;
+      }
+
+      button:active { opacity: 0.85; }
+    </style>
+  </head>
+  <body>
+    <div class="icon">
+      <!-- House silhouette -->
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="20,5 34,17 31,17 31,35 9,35 9,17 6,17" fill="white"/>
+        <rect x="15" y="22" width="10" height="13" rx="1" fill="#4F46E5"/>
+      </svg>
+    </div>
+
+    <h1>You're offline</h1>
+    <p>famapp needs a connection — check your network and try again.</p>
+    <button onclick="location.reload()">Retry</button>
+  </body>
+</html>
@@ -0,0 +1,69 @@
+// famapp service worker — app-shell pattern
+// Caches a minimal offline fallback on install.
+// Navigation requests: network-first with offline fallback.
+// Next.js static chunks: cache-first.
+// API routes: network-only (pass through).
+
+const CACHE = "famapp-shell-v1";
+const OFFLINE = "/offline.html";
+
+// --- install: precache offline shell ---
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.add(OFFLINE))
+  );
+  self.skipWaiting();
+});
+
+// --- activate: evict old caches ---
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
+      )
+  );
+  self.clients.claim();
+});
+
+// --- fetch ---
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+
+  const url = new URL(request.url);
+
+  // API routes — always go to network, never cache.
+  if (url.pathname.startsWith("/api/")) return;
+
+  // NextAuth — network-only.
+  if (url.pathname.startsWith("/api/auth/")) return;
+
+  // Next.js immutable static assets — cache-first.
+  if (url.pathname.startsWith("/_next/static/")) {
+    event.respondWith(
+      caches.match(request).then(
+        (cached) =>
+          cached ??
+          fetch(request).then((res) => {
+            const clone = res.clone();
+            caches.open(CACHE).then((c) => c.put(request, clone));
+            return res;
+          })
+      )
+    );
+    return;
+  }
+
+  // Navigation requests — network-first, serve offline shell if unreachable.
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request).catch(() => caches.match(OFFLINE))
+    );
+    return;
+  }
+});