SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场pwa-development

pwa-development

前端与建站

查看项目

更新于 10-15 10:48

技能介绍

该技能是面向渐进式 Web 应用（PWA）开发的知识库，用于在 2025-2026 年构建、审计和发布 PWA。其定位是 Web 平台应用层及浏览器引擎差异的知识支持，按需查阅而非一次性加载全部参考。

【用途】 当任务涉及以下任一内容时使用该技能：

  • manifest.webmanifest 或 manifest.json、manifest 成员、图标、启动画面、iOS meta 标签。
  • Service Worker 文件、注册、缓存策略、更新流程、Workbox 7、Serwist。
  • Web Push：VAPID 密钥、订阅、服务端投递、Declarative Web Push。
  • PWA 安装流程：Chromium（beforeinstallprompt）、iOS（手动安装）、桌面端 Window Controls Overlay。
  • 后台执行：Background Sync、Periodic Background Sync、Background Fetch、Screen Wake Lock。
  • 存储：IndexedDB、OPFS、配额、navigator.storage.persist()。
  • Project Fugu API：File System Access、Web Share、Web Bluetooth / USB / HID / Serial / NFC、WebAuthn 等。
  • PWA 性能：Core Web Vitals 2025、INP < 200ms、应用外壳、代码分割。
  • PWA 安全头：HTTPS、为 SW 调整的 CSP、用于 SharedArrayBuffer 的 COOP / COEP。
  • 分发：Bubblewrap 到 Google Play（TWA + assetlinks.json）、PWA Builder 到 Microsoft Store（MSIX）、Capacitor 到 App Store、PWA Builder 到 Meta Quest。
  • 框架集成：Vite（vite-plugin-pwa）、Next.js（@serwist/next）、Angular（ng add @angular/pwa）、Nuxt（@vite-pwa/nuxt）。

【主要能力】 参考资料库按主题组织，按需阅读相关参考，不预加载全部：

  • references/manifest.md：Web App Manifest 成员、图标、启动画面、iOS meta 标签。
  • references/service-workers.md：SW 生命周期、缓存策略、Workbox 7、更新、调试。
  • references/background-execution.md：Background Sync、Periodic Sync、Background Fetch、Wake Lock。
  • references/push-notifications.md：Web Push 端到端、VAPID、RFC、Declarative Push、Badge API。
  • references/install-flows.md：beforeinstallprompt、iOS 手动安装、Window Controls Overlay。
  • references/permissions.md：Permissions API、Permissions-Policy 头、平台可用性。
  • references/storage-persistence.md：IndexedDB、OPFS、配额、持久化存储。
  • references/capabilities-fugu.md：Project Fugu API 矩阵与示例。
  • references/platform-constraints.md：iOS / Android / 桌面各平台现实核查。
  • references/performance.md：Core Web Vitals 2025、INP < 200ms、审计工具。
  • references/security.md：HTTPS、SW 的 CSP、COOP / COEP、安全上下文。
  • references/distribution.md：Bubblewrap / TWA、PWA Builder MSIX、Capacitor、Meta Quest。
  • references/frameworks-tooling.md：Vite、Next.js、Angular、Nuxt 及调试界面。
  • references/production-checklist.md：上线到生产的完整部署清单。

【使用方式】 根据当前任务按需阅读对应参考文件，不要一次性预加载全部参考。选择与问题匹配的参考进行查阅。技能附有决策速查表，例如：哈希 JS / CSS 使用 CacheFirst；HTML 导航使用带 networkTimeoutSeconds: 3 的 NetworkFirst；头像 / 低优先级数据使用 StaleWhileRevalidate；POST 变更使用 NetworkOnly + BackgroundSyncPlugin；默认不调用 skipWaiting()，需配合协调的重新加载 UX 或省略；Chromium 安装最小图标尺寸为 192 PNG + 512 PNG 且 purpose 均为 "any"，另加独立 maskable 资源；不要在同一图标上组合 "any maskable"；iOS Web Push 需 iOS 16.4+、PWA 安装到主屏幕、display: standalone、用户手势触发订阅；Periodic Background Sync 在 iOS 不支持，需规划降级路径；Lighthouse PWA 类别已在 12.0.0（Chrome 126，2024 年 5 月）移除，改用 Application 面板单项检查；2026 年 Next.js PWA 库使用 @serwist/next（而非不再维护的原始 next-pwa）。

【适用场景】 构建、审计和发布 PWA，涵盖清单、Service Worker、推送、安装、后台执行、存储、Fugu 能力、性能、安全和多平台分发，以及主流框架的 PWA 集成。

【限制】 不适用于以下任务：通用前端样式、通用 React 性能、与 PWA 机制无关的跨平台安全、Tauri 或 Electron 封装、GA4 / 分析。其他细节资料暂未提供。