用 AI 构建带离线能力的渐进式 Web 应用（PWA）
解决移动端网页体验差、无法离线使用的问题：通过 AI 自动生成符合规范的 Manifest 清单、Service Worker 脚本及缓存策略，让普通网站变身可安装、断网可用的原生级应用。
为什么需要这个技能
在传统 Web 开发中，当用户访问弱网环境或离开电脑时，网页往往无法使用，用户体验大打折扣。
渐进式 Web 应用（PWA） 解决了这些痛点。它利用现代浏览器的能力，让网页具备三个核心支柱：HTTPS 加密、Web App Manifest（让应用可安装）和 Service Worker（实现离线缓存）。AI 能帮你快速生成符合规范的 manifest.json、sw.js 和 HTML 外壳，省去手动配置缓存版本和拦截网络请求的繁琐工作。
适用场景
- 用户希望将某个信息类、工具类网站添加到手机主屏幕，像 App 一样使用。
- 网站需要在地铁、地下室等弱网或无网环境下继续浏览核心内容。
- 需要为移动端项目实现“添加到主屏幕”功能，且需处理 iOS Safari 和 Android Chrome 的不同安装机制。
- 想通过缓存策略（Cache-First, Network-First 等）优化前端资源加载速度。
核心工作流
- 定义应用外观：确定应用名称、图标、启动 URL 及全屏显示模式。
- 构建服务逻辑：编写 Service Worker 拦截请求，配置缓存版本以便更新。
- 实现安装提示：捕获浏览器安装事件，展示自定义安装按钮（Android 特有）。
- 处理边缘情况：针对 iOS Safari 手动安装机制、HTTPS 强制要求及跨域资源进行特殊处理。
以下是 AI 生成的核心代码结构，包含 Manifest、HTML 外壳及 Service Worker 逻辑：
下载和安装
下载 progressive-web-app 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体配置参考内附文档。
你可能还需要
暂无推荐