测试 PWA

一句话总结： 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 会报告清单中的问题，并记录安装过程中的其他信息。

{
  "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 兼容性表。

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 的浏览器中测试本身就不会抛出异常：

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 了解 Service Workers 标签页中 Update Cycle 表格所测量的内容，以及 Service Workers 了解本指南测试所涉及 API 的浏览器支持情况。