SuperAPI AI 工具集

nextjs-pwa

前端与建站

查看项目

更新于 10-16 03:37

技能介绍

用途:为 Next.js 应用添加渐进式 Web 应用(PWA)能力,覆盖 Service Worker、离线支持、缓存策略、推送通知、安装提示与 Web App Manifest。

主要能力:提供两条实现路径。推荐用 Serwist(next-pwa 的活跃继任者,面向 App Router),安装命令为 npm install @serwist/next && npm install -D serwist,需创建 app/manifest.ts、app/sw.ts,并在 next.config.ts 中用 withSerwist 包装配置(swSrc、swDest、开发环境 disable)。零依赖或 output: "export" 场景可手写 public/sw.js,并在根布局注册。

Manifest:Next.js 13.3+ 原生支持 app/manifest.ts,构建时生成 /manifest.webmanifest,含 name、short_name、start_url、display、theme_color、icons(192 与 512,建议加 maskable)等字段。

缓存与离线:列出 Cache First、Network First、Stale While Revalidate、Network Only、Cache Only 五种策略及适用场景;Serwist 的 defaultCache 提供默认配置。离线采用 App shell 模式,可配合 useOnlineStatus 钩子与 app/offline 回退页。

推送与安装:推送需 npx web-push generate-vapid-keys 生成 VAPID 密钥,客户端订阅后在 SW 中监听 push 事件;安装提示用 beforeinstallprompt(Chrome/Edge/Android),iOS 无该事件需手动引导。

适用场景:需要可安装、可离线、可推送的 Next.js Web 应用。限制:部分细节(如服务端发送、IndexedDB、后台同步)在引用文档中展开,本资料未提供完整内容;具体效果与兼容性需自行验证。