cm_whatsapp_bot_v1/apps/web/next.config.ts
yiekheng 272fbcfa8a feat(web): PWA via @serwist/next + manifest + icons (P3/T22)
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>
2026-05-10 13:20:45 +08:00

51 lines
2.0 KiB
TypeScript

import type { NextConfig } from "next";
import { join } from "node:path";
import withSerwistInit from "@serwist/next";
// Pin Turbopack's workspace root explicitly — pnpm + Turbopack can't always
// infer it inside Docker bind mounts.
const workspaceRoot = join(import.meta.dirname, "..", "..");
// We consume @cmbot/db and @cmbot/shared via their compiled dist (their
// package.json `main` points at ./dist/index.js). The dist is built at
// container start (see docker-compose.dev.yml) and during the production
// Docker build (see docker/web.Dockerfile). This sidesteps Turbopack's
// inability to resolve NodeNext-style `.js` extensions to `.ts` source.
const nextConfig: NextConfig = {
reactStrictMode: true,
output: "standalone",
outputFileTracingRoot: workspaceRoot,
// Allow Server Actions and dev HMR from the LAN host (phone testing).
// Tighten before exposing publicly via the reverse proxy.
allowedDevOrigins: ["192.168.0.253", "test.04080616.xyz", "rexwa.04080616.xyz"],
experimental: {
typedRoutes: true,
serverActions: {
// Default Server Action body limit is 1 MB — way under WhatsApp's
// 100 MB document cap. Lifted to 100 MB so document uploads reach
// the action; the per-kind WhatsApp validator
// (lib/whatsapp-media.ts) then enforces the actual limit
// (5 MB image / 16 MB video/audio / 100 MB document) and returns
// a useful error for the rest.
bodySizeLimit: "100mb",
},
},
turbopack: {
root: workspaceRoot,
},
};
// PWA: @serwist/next compiles `src/pwa/sw.ts` into `public/sw.js` at
// production build time, baking in the static-asset precache manifest.
// We disable it in dev because Turbopack + a service worker on every
// reload makes hot-reload extremely flaky.
const withSerwist = withSerwistInit({
swSrc: "src/pwa/sw.ts",
swDest: "public/sw.js",
cacheOnNavigation: true,
reloadOnOnline: true,
disable: process.env.NODE_ENV !== "production",
});
export default withSerwist(nextConfig);