progressive-web-app

# 渐进式 Web 应用 (PWA) ## 概述 渐进式 Web 应用 (PWA) 是一种利用现代浏览器功能来提供快速、可靠且可安装体验的 Web 应用程序，即使在网络不稳定的情况下也能正常工作。三个必要支柱是： 1. **HTTPS** — 生产环境必须，以便注册 Service Worker（localhost 开发环境除外）。 2. **Web 应用清单** (`manifest.json`) — 使应用可安装，并定义其在设备主屏幕上的外观。 3. **Service Worker** (`sw.js`) — 一个后台脚本，用于拦截网络请求、管理缓存并启用离线功能。 ## 何时使用此技能 - 当用户希望其 Web 应用能够离线工作或在网络不稳定的环境下工作时。 - 构建移动优先的 Web 项目，且用户应能将应用安装到主屏幕时。 - 当用户询问缓存策略、Service Worker 或提高 Web 应用性能和韧性时。 - 当用户提到 Workbox、Web 应用清单、后台同步或 Web 推送通知时。 - 当用户询问“我的网站可以像应用一样安装吗？”或“如何让我的网站离线工作？”时——即使他们没有使用 PWA 这个词。 ## 交付检查清单 每个 PWA 实现至少必须包含以下文件： - [ ] `index.html` — 链接清单，注册 Service Worker - [ ] `manifest.json` — 完整的应用元数据和图标集 - [ ] `sw.js` — 包含安装、激活和获取处理程序的 Service Worker - [ ] `app.js` — 包含 SW 注册和安装提示处理的主要应用逻辑 - [ ] `offline.html` — 离线导航失败时显示的后备页面（必需 — 缺少此文件会导致安装失败） --- ## 第 1 步：Web 应用清单 (`manifest.json`) 定义应用安装后的外观。必须通过 `` 中的 `` 进行链接。 { "name": "我的超棒 PWA", "short_name": "MyPWA", "description": "一个快速、支持离线的渐进式 Web 应用。", "start_url": "/", "scope": "/", "display": "standalone", "orientation": "portrait-primary", "background_color": "#ffffff", "theme_color": "#0055ff", "icons": [ { "src": "/assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ], "screenshots": [ { "src": "/asset