ginnoirandClaude Sonnet 4.6
8aab25e0ac
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>
72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!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>
|