SuperAPI AI 工具集

progressive-web-app

通用与其它

查看项目

更新于 10-15 20:34

技能介绍

用途:当用户希望网站可离线使用、在网络不稳定时可靠加载,或能被安装到主屏幕时使用该技能。也适用于涉及 service worker、缓存策略、Workbox、背景同步、推送通知,以及“网站能否像应用一样安装”“怎样让网站离线工作”等提问,即使用户没有直接说 PWA。

主要能力:引导实现 PWA 三大支柱——HTTPS(生产环境必需,localhost 开发例外)、Web App Manifest 和 Service Worker。交付物清单包括 index.html(关联 manifest、注册 SW)、manifest.json(应用元数据与图标)、sw.js(含 install、activate、fetch 处理器)、app.js(SW 注册与安装提示)以及 offline.html(离线导航失败时的回退页,缺失会导致安装失败)。

使用方式:manifest 需在 head 中用 link rel="manifest" 关联,关键字段有 display(standalone 隐藏浏览器 UI)、icons 的 purpose 设为 any maskable 以支持 Android 自适应图标,screenshots 可启用 Chrome 桌面增强安装对话框。app.js 中注册 navigator.serviceWorker.register('/sw.js'),并监听 beforeinstallprompt 捕获安装提示、appinstalled 记录安装完成。sw.js 使用缓存版本号(部署时递增),install 阶段预缓存 App Shell,activate 清理旧缓存并立即接管页面;fetch 中按资源类型选择策略:静态资源用缓存优先,HTML 页面用网络优先,API 数据用 stale-while-revalidate。

适用场景与限制:需 HTTPS 才能注册 service worker。iOS/Safari 不支持 beforeinstallprompt,需手动“添加到主屏幕”,需 apple-mobile-web-app-* 元标签,且缓存可能因约 7 天不活动被清除。跨域请求返回 opaque 响应,缓存需谨慎,建议用 staleWhileRevalidate 或 Workbox。部署新资源时必须递增 CACHE_VERSION。资料未提供具体收费、价格或其他平台支持信息。