如何用 Service Worker 配合 Manifest 实现完整的 PWA 体验

如何用 Service Worker 配合 Manifest 实现完整的 PWA 体验需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

要实现完整PWA体验，必须同时配置Service Worker和Web App Manifest：前者提供离线缓存与后台同步，后者定义安装外观与启动行为；二者协同才能支持添加到主屏幕、离线访问及全屏运行。

要实现完整的 PWA（渐进式 Web 应用）体验，Service Worker 和 Web App Manifest 是两个核心组件：前者负责离线能力、缓存控制与后台同步，后者定义应用的“安装感”——比如图标、启动页、显示模式等。二者配合，才能让网站像原生应用一样被添加到主屏幕、离线可用、全屏启动、拥有独立窗口。

注册并激活 Service Worker

Service Worker 必须通过 JavaScript 在页面中注册，且只能控制同源下的页面。注册前确保你的站点已部署在 HTTPS（本地 localhost 除外）。

1. 在主 HTML 的 <script> 标签中调用 navigator.serviceWorker.register()，路径指向你的 worker 文件（如 sw.js）
2. 注册成功后，浏览器会安装并激活 Service Worker；此时可监听 install 事件预缓存关键资源（HTML、CSS、JS、首屏图片等）
3. 在 fetch 事件中拦截网络请求，优先返回缓存（Cache API），缓存未命中再回退到网络，实现离线访问
4. 注意：修改 sw.js 后需刷新两次才能生效——第一次更新脚本，第二次触发新版本激活（因旧版仍控制着当前页面）

配置符合规范的 Web App Manifest

Manifest 是一个 JSON 文件（如 manifest.json），通过 <link rel="manifest"> 引入。它不提供功能，但决定了 PWA 被“安装”时的行为和外观。

1. 必要字段：name（应用名）、short_name（主屏幕显示名）、start_url（启动入口，建议带 ?utm_source=homescreen 便于统计）、display（推荐 standalone 或 fullscreen）、icons（至少提供 192×192 和 512×512 PNG 图标，含 mime 类型）
2. 增强体验字段：background_color（启动页背景色）、theme_color（地址栏/任务栏颜色）、description、categories 等
3. 图标必须是实际可访问的绝对路径（如 /icons/icon-192.png），不能是 data URL；服务器需返回正确的 Content-Type: application/manifest+json

实现“添加到主屏幕”的触发与提示

现代浏览器（Chrome、Edge、Samsung Internet 等）会在满足条件时自动提示用户“添加到主屏幕”，无需手动弹窗。你需要做的是确保条件达标，并可选地监听事件引导用户。

1. 必备条件：已注册有效的 Service Worker + 提供合法 manifest + manifest 包含 name、icons、start_url、display + 站点通过 HTTPS（或 localhost）+ 用户至少两次访问且间隔 ≥ 30 秒
2. 可通过监听 beforeinstallprompt 事件，保存事件对象，在合适时机（如点击按钮）调用 prompt() 主动唤起安装提示（仅限 Chrome 系列）
3. 安装完成后会触发 appinstalled 事件，可用于埋点或展示感谢信息

离线体验与更新策略的平衡

Service Worker 缓存不是一劳永逸的——资源更新后，旧缓存可能阻塞新内容。合理设计缓存生命周期，是 PWA 可靠性的关键。

1. 采用 Cache First + 后台更新（Stale-While-Revalidate） 策略：优先返回缓存，同时在后台拉取最新版本并更新缓存，下次访问即生效
2. 为静态资源（JS/CSS/字体）使用基于内容哈希的文件名（如 main.a1b2c3.js），并在 install 阶段精确缓存；HTML 则用 Network First，避免缓存过期入口页
3. 在 activate 阶段清理旧缓存（cache.keys().then(keys => …)），防止磁盘占用失控
4. 开发阶段可用 Chrome DevTools 的 Application → Service Workers 面板：勾选 “Update on reload”、点击 “Skip waiting” 或 “Unregister” 快速调试

不复杂但容易忽略——PWA 的完整体验不在炫技，而在每个环节的严谨落地：从 HTTPS 基础、精准的缓存逻辑，到 manifest 字段语义、安装时机判断。把这两块配齐、跑通、测实，你的网站就真正拥有了安装、离线、沉浸的能力。