# 测试 PWA

> 如何在 Chrome DevTools 中测试 PWA 的可安装性与 Service Worker：检查清单、模拟离线、以及强制触发 Service Worker 更新。

**一句话总结：** Chrome DevTools 的 Application 面板可以让你检查、修改和调试 Web 应用清单、
Service Worker 以及 Service Worker 缓存——清单的 Installability（可安装性）小节会指出阻止
安装的原因，而 Service Workers 标签页的 Offline 复选框可以在不断开机器网络的情况下模拟离线状态。

## 1. 检查清单文件

打开 DevTools 的 Application 面板并选择 Manifest 标签页。它会以更易读的形式展示清单源文件中的
Identity 和 Presentation 字段、你声明的图标，以及已注册的快捷方式和截图。根据 Chrome for
Developers 的说明，如果 DevTools 遇到错误——例如某个图标无法加载——Manifest 标签页会显示
Installability 小节来描述该错误。

在通过地址栏的 Install 按钮触发安装时，请保持 Console 抽屉面板打开：根据 Chrome for
Developers 的说明，Console 会报告清单中的问题，并记录安装过程中的其他信息。

```json
{
  "name": "Example PWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }]
}
```

## 2. 该工具的支持范围

这里介绍的 Application 面板 Manifest 与 Service Workers 标签页是 Chrome DevTools 的功能。
至于这些底层 API 本身的浏览器支持情况——与你使用哪种开发者工具检查它们无关——请参阅本站的
[Service Workers](/zh/compatibility/service-worker/) 兼容性表。

## 3. 使用 Service Workers 标签页测试 Service Worker

如果当前打开的页面已安装了 Service Worker，它会显示在 Service Workers 标签页中。
根据 Chrome for Developers 的说明：

- **Offline** 复选框会让 DevTools 进入离线模式，等同于 Network 面板中提供的离线模式。
- **Update on reload** 复选框会强制 Service Worker 在每次页面加载时更新。
- **Bypass for network** 复选框会绕过 Service Worker，强制浏览器直接向网络请求资源。
- **Push** 按钮会模拟一次不带负载的推送通知，**Sync** 按钮会模拟一次后台同步事件。
- 通过 **stop** 链接主动停止 Service Worker 可以模拟浏览器停止它的行为，Chrome for
  Developers 指出这样做"经常会暴露出因错误假设持久化全局状态而产生的 bug"。

## 4. 检测页面是否已注册 Service Worker

根据 MDN 的说明，在不支持 Service Worker 的浏览器中 `navigator.serviceWorker` 为
`undefined`；而当指定作用域下没有已注册的 Service Worker 时，
`ServiceWorkerContainer.getRegistration()` 会以 `undefined` 完成。先检测两者，
再判断是否存在注册，这样在不支持该 API 的浏览器中测试本身就不会抛出异常：

```js
async function isPwaTestable() {
  if (!('serviceWorker' in navigator)) {
    return { testable: false, reason: 'Service workers are not supported in this browser.' };
  }
  const registration = await navigator.serviceWorker.getRegistration();
  if (!registration) {
    return { testable: false, reason: 'No service worker is registered for this page yet.' };
  }
  return { testable: true, registration };
}
```

## 实践清单

- Lighthouse 中的 PWA 专项审计已被弃用：Chrome for Developers 的官方文档中写明
  "PWA testing in Lighthouse is deprecated"，并转而指向 Chrome 的可安装性标准以及
  DevTools 的 Application 面板作为当前指南——不要依赖 Lighthouse 的 PWA 分数作为测试依据。
- 桌面版 Chrome 中的 **Install app** / **Add to home screen** 入口无法模拟移动端的安装
  流程；根据 Chrome for Developers 的说明，要测试真实的移动端体验，需要通过远程调试连接
  一台真实设备。
- 从 Service Workers 标签页停止 Service Worker 是一种刻意用来验证重启行为的方式——应在
  发布前这样做，因为生产环境中的浏览器会按自己的调度停止和重启 Service Worker，而不仅仅是
  在你刷新页面时。
- Service Workers 标签页上的 **Update Cycle** 表格会显示 Service Worker 的各项活动及其
  耗时，例如 install、wait 和 activate。

## 下一步

参见 [What a service worker is, and the smallest one that works](/zh/reference/service-worker/)
了解 Service Workers 标签页中 Update Cycle 表格所测量的内容，以及
[Service Workers](/zh/compatibility/service-worker/) 了解本指南测试所涉及 API 的浏览器支持情况。