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:
co-authored by
Claude Sonnet 4.6
parent
d5a8bf9d95
commit
8aab25e0ac
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { X, Share, Plus } from "lucide-react";
|
||||
|
||||
const DISMISSED_KEY = "pwa-install-dismissed";
|
||||
|
||||
type Prompt = "android" | "ios";
|
||||
|
||||
function isIos() {
|
||||
return (
|
||||
/iphone|ipad|ipod/i.test(navigator.userAgent) ||
|
||||
// iPad on iOS 13+ reports as Mac
|
||||
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
|
||||
);
|
||||
}
|
||||
|
||||
function isInStandaloneMode() {
|
||||
return (
|
||||
"standalone" in window.navigator &&
|
||||
(window.navigator as { standalone?: boolean }).standalone === true
|
||||
);
|
||||
}
|
||||
|
||||
export function InstallPrompt() {
|
||||
const [prompt, setPrompt] = useState<Prompt | null>(null);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [deferredEvent, setDeferredEvent] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (localStorage.getItem(DISMISSED_KEY)) return;
|
||||
|
||||
// Android / Chrome desktop — beforeinstallprompt fires
|
||||
const handler = (e: Event) => {
|
||||
e.preventDefault();
|
||||
setDeferredEvent(e);
|
||||
setPrompt("android");
|
||||
};
|
||||
window.addEventListener("beforeinstallprompt", handler);
|
||||
|
||||
// iOS — no beforeinstallprompt; defer setState out of the synchronous
|
||||
// effect body to satisfy react-hooks/set-state-in-effect.
|
||||
let iosTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
if (isIos() && !isInStandaloneMode()) {
|
||||
iosTimer = setTimeout(() => setPrompt("ios"), 0);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("beforeinstallprompt", handler);
|
||||
clearTimeout(iosTimer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function dismiss() {
|
||||
localStorage.setItem(DISMISSED_KEY, "1");
|
||||
setPrompt(null);
|
||||
}
|
||||
|
||||
async function install() {
|
||||
if (!deferredEvent) return;
|
||||
deferredEvent.prompt();
|
||||
const { outcome } = await deferredEvent.userChoice;
|
||||
if (outcome === "accepted" || outcome === "dismissed") {
|
||||
dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
if (!prompt) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="banner"
|
||||
className="fixed bottom-0 left-0 right-0 z-50 flex items-start gap-3 border-t bg-background px-4 py-3 shadow-lg sm:bottom-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 sm:rounded-xl sm:border sm:px-5 sm:py-4 sm:shadow-xl"
|
||||
>
|
||||
{/* App icon */}
|
||||
<div className="mt-0.5 h-10 w-10 shrink-0 overflow-hidden rounded-xl bg-[#4F46E5]">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/icon-192.png" alt="" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 text-sm">
|
||||
<p className="font-semibold leading-snug">Add famapp to your home screen</p>
|
||||
|
||||
{prompt === "android" && (
|
||||
<>
|
||||
<p className="mt-0.5 text-muted-foreground">
|
||||
Install for a faster, app-like experience.
|
||||
</p>
|
||||
<button
|
||||
onClick={install}
|
||||
className="mt-2 rounded-md bg-[#4F46E5] px-3 py-1.5 text-xs font-semibold text-white"
|
||||
>
|
||||
Install
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{prompt === "ios" && (
|
||||
<p className="mt-0.5 text-muted-foreground">
|
||||
Tap{" "}
|
||||
<Share
|
||||
className="inline-block h-4 w-4 align-text-bottom"
|
||||
aria-label="Share"
|
||||
/>{" "}
|
||||
then{" "}
|
||||
<strong className="font-medium">
|
||||
<Plus className="inline-block h-3.5 w-3.5 align-text-bottom" />
|
||||
Add to Home Screen
|
||||
</strong>
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={dismiss}
|
||||
aria-label="Dismiss"
|
||||
className="mt-0.5 shrink-0 rounded p-1 text-muted-foreground hover:bg-muted"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user