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>
This commit is contained in:
ginnoir
2026-05-06 16:00:02 -05:00
co-authored by Claude Sonnet 4.6
parent d5a8bf9d95
commit 8aab25e0ac
15 changed files with 459 additions and 2 deletions
+28
View File
@@ -0,0 +1,28 @@
"use client";
import { useEffect } from "react";
export function PwaRegister() {
useEffect(() => {
if (!("serviceWorker" in navigator)) return;
navigator.serviceWorker
.register("/sw.js", { scope: "/" })
.then((reg) => {
reg.addEventListener("updatefound", () => {
const next = reg.installing;
if (!next) return;
next.addEventListener("statechange", () => {
if (next.state === "installed" && navigator.serviceWorker.controller) {
// New version available — the next navigation will pick it up
// because skipWaiting() is called in the SW install handler.
console.info("[famapp] Service worker updated.");
}
});
});
})
.catch((err) => console.warn("[famapp] SW registration failed:", err));
}, []);
return null;
}