SuperAPI AI 工具集

nextjs-pwa

前端与建站

查看项目

更新于 10-15 23:43

技能介绍

用途:指导在 Next.js 中实现渐进式 Web 应用(PWA),按需求选择实现方式。

主要能力:提供决策树区分两种方案。原生 Next.js 方案零依赖,支持 App Router,通过 manifest.ts/json/webmanifest 生成清单,使用 MetadataRoute.Manifest 类型,但不含离线缓存与 Service Worker 生成。Serwist 方案提供自动生成 Service Worker、预缓存、运行时缓存策略(CacheFirst、NetworkFirst、StaleWhileRevalidate)、后台同步、推送通知与离线回退页。

使用方式:原生方案创建 app/manifest.ts 并在 app/layout.tsx 添加 manifest 与 appleWebApp 元数据,生产环境需 HTTPS。Serwist 安装命令为 npm i @serwist/next && npm i -D serwist(或 yarn/pnpm 对应命令),在 next.config.js 用 withSerwistInit 配置,创建 app/sw.ts 定义缓存规则,在 layout 注册 /sw.js,并在 tsconfig.json 加入 webworker 与 @serwist/next/typings。

版本与限制:Serwist 稳定版 9.2.1+,预览版 10.0.0-preview,v9.0.0 有破坏性变更(改用 new Serwist 并调用 addEventListeners),需 Node.js 18+(推荐 22.x)与 TypeScript 5.0+。生产构建兼容 Turbopack,开发模式会提示警告,可设 SERWIST_SUPPRESS_TURBOPACK_WARNING="1" 或使用 --webpack。原生方案不支持自动离线。常见问题包括 Service Worker 不更新、缓存不刷新、HTTPS 要求与图标路径错误。