SuperAPI AI 工具集

pwa

前端与建站

查看项目

更新于 10-15 22:41

技能介绍

用途:把 Next.js App Router 项目配置成较完整的 PWA,覆盖离线支持(Serwist)、推送通知(VAPID/web-push)与主屏幕安装。

主要能力:通过 app/manifest.ts 生成 Web App Manifest;用 Serwist 配置 Service Worker、预缓存与运行时缓存;通过 VAPID 密钥与 web-push 实现订阅和发送推送;提供安装提示组件。注意 Next.js 16 默认使用 Turbopack,需要 @serwist/turbopack 与 serwist。

必要用法:安装依赖 yarn add -D @serwist/turbopack serwist;用 withSerwist 包装 next.config.ts;创建 app/sw.ts 并使用 defaultCache;在 tsconfig.json 中加入 webworker 并将 public/sw.js 等排除;在 .gitignore 忽略生成文件。推送需生成密钥 web-push generate-vapid-keys,配置 NEXT_PUBLIC_VAPID_PUBLIC_KEY、VAPID_PRIVATE_KEY、VAPID_EMAIL,并在 Service Worker 中处理 push 与 notificationclick 事件。本地测试用 next dev --experimental-https。

限制:beforeinstallprompt 仅 Chromium 支持,iOS 需手动引导;Safari iOS 推送需 16.4+ 且仅限已安装应用;未提供数据库具体实现细节,需自行存储订阅。