feat(pwa): rebuild offline support with Workbox and modernize install UX (#88)

The hand-written public/sw.js precached CRA-era paths (/static/js/bundle.js,
/static/css/main.css) that 404 in the Vite build, so cache.addAll rejected and
the service worker never finished installing — offline was broken entirely.

Replace it with vite-plugin-pwa (injectManifest): Workbox injects the real
hashed-asset precache manifest, and a custom src/sw.ts adds a NetworkFirst
navigation handler with an app-shell offline fallback, StaleWhileRevalidate for
Supabase REST reads (now covering family prayers too), and a bounded CacheFirst
for storage images. Navigations stay network-first so online visitors and
crawlers always get the freshly prerendered HTML — the Pages deploy/prerender
pipeline is unchanged (SW is bypassed during snapshotting).

Make the installed app more useful and cross-platform:
- maskable icons (192/512) with Android safe-zone padding
- apple-touch-icon (180), Apple meta tags, and iOS splash screens
- wired favicons and light/dark theme-color
- manifest id/scope/lang/categories, app shortcuts, and install screenshots
- in-app "update available" toast and an Install button (beforeinstallprompt)

Assets are generated by scripts/generate-pwa-assets.mjs (reuses the existing
puppeteer + cached Chromium; not part of CI).

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: schwannden

index.html

@@ -21,9 +21,95 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@sim_taiwan" />
 
-    <!-- PWA Manifest -->
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#ffffff" />
+    <!-- Favicons (the manifest <link> is injected by vite-plugin-pwa) -->
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/icons/icon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/icons/icon-16x16.png"
+    />
+
+    <!-- iOS / standalone home-screen support -->
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <meta name="apple-mobile-web-app-title" content="SIM Prayers" />
+
+    <!-- iOS standalone launch (splash) screens — generated by
+         scripts/generate-pwa-assets.mjs -->
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-430-932-3x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-393-852-3x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-390-844-3x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-414-896-3x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-414-896-2x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-375-667-2x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-1024-1366-2x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-834-1194-2x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-820-1180-2x.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/icons/splash/apple-splash-768-1024-2x.png"
+    />
+
+    <!-- Theme color follows light/dark to match the app background -->
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#f8fafc"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#020817"
+    />
   </head>
 
   <body>