yiekheng
272fbcfa8a
The web app is now installable on a phone home screen with offline fallback for static assets and the navigation shell. Pieces ------ - `src/app/manifest.webmanifest/route.ts` — dynamic manifest route. Standalone display mode, portrait orientation, dark theme matching the app, "any maskable" icons so the same PNG works for both regular launchers and Android adaptive icons. - `src/pwa/sw.ts` — service worker entry. Uses serwist's stock recipe: skipWaiting + clientsClaim so a new worker takes over on the next navigation, navigationPreload to race the network with the worker boot, and `defaultCache` for HTML-network-first / static-cache-first / image+font cache TTLs. - `next.config.ts` — wraps the existing config with `withSerwistInit`. Disabled in development (`NODE_ENV !== "production"`) because a service worker on every dev reload makes hot-reload extremely flaky. - `package.json` build script switched to `next build --webpack`. `@serwist/next` doesn't yet support Turbopack (it logs a warning and silently skips emitting `sw.js`), and Next 16 defaults the build to Turbopack. The dev server still uses Turbopack — only production builds switch to webpack. - `src/app/layout.tsx` metadata gains `manifest`, `icons.icon` (192 + 512 PNG), and `icons.apple` (180 PNG). The existing `appleWebApp.capable` already opts iOS into standalone mode. Icons ----- Generated by a tiny one-shot script (`scripts/gen-pwa-icons.ts`) that uses the workspace's already-installed sharp to render an SVG wordmark at 512 / 192 / 180 px. Placeholder branding (dark square with "cm" wordmark) — swap in real artwork later by editing the SVG in the script and re-running `pnpm --filter @cmbot/web run gen:icons`. Build artefacts --------------- - `apps/web/public/icon-512.png`, `icon-192.png`, `apple-touch-icon.png` ARE committed (stable input). - `apps/web/public/sw.js` and `swe-worker-*.js` are NOT — they're regenerated on every production build. Added to `.gitignore`. Verification ------------ - Production build emits `[serwist] Bundling the service worker script with the URL '/sw.js' and the scope '/'...` and `sw.js` shows up in `public/`. - `/manifest.webmanifest` is in the build's static-route table. - 249 web tests still passing. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import type { Metadata, Viewport } from "next";
|
|
import { GeistSans } from "geist/font/sans";
|
|
import { ThemeProvider } from "@/components/theme-provider";
|
|
import { AppShell } from "@/components/app-shell";
|
|
import { Toaster } from "@/components/ui/sonner";
|
|
import "./globals.css";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "cm WhatsApp Bot",
|
|
description: "Self-hosted WhatsApp reminder bot",
|
|
applicationName: "cm WhatsApp Bot",
|
|
// PWA wiring: the manifest comes from the dynamic route at
|
|
// src/app/manifest.webmanifest/route.ts, the apple-touch-icon is
|
|
// emitted from public/, and `appleWebApp.capable` lets iOS treat the
|
|
// page like a standalone app when added to the home screen.
|
|
manifest: "/manifest.webmanifest",
|
|
icons: {
|
|
icon: [
|
|
{ url: "/icon-192.png", sizes: "192x192", type: "image/png" },
|
|
{ url: "/icon-512.png", sizes: "512x512", type: "image/png" },
|
|
],
|
|
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
|
|
},
|
|
appleWebApp: { capable: true, title: "cm WA Bot", statusBarStyle: "default" },
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
themeColor: [
|
|
{ media: "(prefers-color-scheme: light)", color: "#ffffff" },
|
|
{ media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
|
|
],
|
|
};
|
|
|
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
// `suppressHydrationWarning` here is for *attribute* differences only.
|
|
// Two sources legitimately mutate <html>/<body> attributes after the
|
|
// document loads:
|
|
// - next-themes adds the `class="light|dark"` (and the colour-scheme
|
|
// style) before React hydrates,
|
|
// - browser extensions inject dunder attributes like
|
|
// `__gcrremoteframetoken`, password-manager flags, etc.
|
|
// Children are still hydration-checked normally so real bugs surface.
|
|
<html lang="en" suppressHydrationWarning className={GeistSans.className}>
|
|
<body suppressHydrationWarning>
|
|
<ThemeProvider>
|
|
<AppShell>{children}</AppShell>
|
|
<Toaster richColors position="top-right" />
|
|
</ThemeProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|