SuperAPI AI 工具集

enhance-pwa

前端与建站

查看项目

更新于 10-15 23:45

技能介绍

用途:为已有 Web 应用补齐 PWA 能力,使其可安装到主屏幕、从缓存快速加载,并在断网时继续工作,同时不破坏现有功能。

主要能力:审计现有 manifest、Service Worker 与框架插件;按资源类型选择缓存策略(应用外壳 CacheFirst、API NetworkFirst、图片/字体 CacheFirst、分析 NetworkOnly);生成可安装 manifest 与离线回退页;拦截 beforeinstallprompt 自定义安装提示;在具备真实需求时实现推送订阅;处理 Capacitor 桥接请求不被拦截。

使用方式:先审计 public/manifest.json、public/sw.js、vite.config.、next.config. 与 package.json 中的 workbox、serwist、vite-plugin-pwa、next-pwa 等依赖;再按框架选用插件,如 Vite 用 vite-plugin-pwa,Next.js 用 @serwist/turbopack 或 @serwist/next;配置 registerType: 'autoUpdate',并设置 runtimeCaching。离线回退可用 navigateFallback: null 配合 precacheFallback: { fallbackURL: '/offline.html' }。Capacitor 场景需在 Service Worker 中跳过 capacitor:// 与 ionic:// 请求。

适用场景:需要离线访问、可安装、推送或后台同步的 Web 应用,尤其是 Vite、Next.js 与 Capacitor 项目。

限制:Lighthouse 12 起已移除 PWA 分类,需在 DevTools Application 面板检查可安装性与离线;beforeinstallprompt 仅在 Chromium 触发,Safari 与 Firefox 不触发;不得缓存认证令牌或敏感 API;推送需后端支持;Next.js 无内置 Service Worker,@ducanh2912/next-pwa 仅支持 webpack 且建议迁移至 @serwist/next。