SuperAPI AI 工具集

pwa

通用与其它

查看项目

更新于 10-16 04:30

技能介绍

用途:用于构建可安装、支持离线、针对移动端优化并兼容桌面的渐进式 Web 应用(PWA)。

主要能力:

  1. HTML head 配置:viewport 配合 viewport-fit=cover 支持安全区域,设置 theme-color 与 apple-mobile-web-app-* 系列 meta。
  2. Web App Manifest:示例含 name、short_name、start_url、scope、display、orientation、background_color、theme_color 及 192/512 图标与 maskable 图标。
  3. 显示模式:standalone、fullscreen、minimal-ui、browser,可用 @media (display-mode: standalone) 或 window.matchMedia 判断是否已安装。
  4. 安全区域:使用 env(safe-area-inset-*) 定义 CSS 变量,处理刘海、灵动岛、圆角与横屏缺口。
  5. Service Worker:注册方法,以及在 install 预缓存、activate 清理旧缓存、fetch 中按路径区分缓存优先与网络优先。
  6. 缓存策略:Cache First、Network First、Stale While Revalidate、Network Only 的适用场景对照。
  7. 移动端优化:触控目标最小 44x44px、输入框 16px 防缩放、禁用下拉刷新、点击高亮与双击缩放处理、平滑滚动、移动优先响应式断点。
  8. 安装提示:beforeinstallprompt 与 appinstalled 事件,保存 deferredPrompt 并调用 prompt()。
  9. 检查清单:安装必需项(HTTPS、manifest、图标、含 fetch 的 Service Worker)与推荐项(安全区域、主题色、maskable 图标、Apple touch 图标、离线回退页、安装 UI)。
  10. 测试与调试:Lighthouse 的 PWA 审计、matchMedia 判断安装、Service Worker 与缓存查询、注销与清缓存方法。

使用方式:将文档中的 head、manifest、sw.js 注册与 fetch 处理代码放入项目对应文件;按需选用缓存策略与移动端 CSS。

适用场景:需要可安装、离线优先、移动端体验接近原生且兼顾桌面的 Web 应用。

限制:资料未提供具体框架集成细节(仅提及 reference/build-tools.md、caching-strategies.md、mobile-optimization.md 等参考文件)、浏览器兼容范围、性能指标或部署要求,这些暂未提供。