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
+18 -1
View File
@@ -1,4 +1,4 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import "./globals.css";
import { Geist } from "next/font/google";
import { cn } from "@/lib/utils";
@@ -13,12 +13,27 @@ import { getQuickAdds } from "@/modules/_core";
import { QuickAddProvider } from "@/components/quick-add-provider";
import { QuickAddSheet } from "@/components/quick-add-sheet";
import { CommandPalette } from "@/components/command-palette";
import { PwaRegister } from "@/components/pwa-register";
import { InstallPrompt } from "@/components/install-prompt";
const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
export const viewport: Viewport = {
themeColor: "#4F46E5",
};
export const metadata: Metadata = {
title: "famapp",
description: "Family coordination app",
manifest: "/manifest.webmanifest",
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "famapp",
},
icons: {
apple: "/icon-180.png",
},
};
// Runs before paint — reads localStorage / prefers-color-scheme and applies
@@ -82,6 +97,8 @@ export default async function RootLayout({
<main>{children}</main>
<QuickAddSheet />
<CommandPalette />
<InstallPrompt />
<PwaRegister />
</QuickAddProvider>
</body>
</html>