# Lighthouse 与已移除的 PWA 类别

> Lighthouse 审计什么、Chrome 126 中的 Lighthouse 12.0 为何在 Chrome 更改可安装性标准后移除了 PWA 类别，以及该改用什么。

Lighthouse 是 Chrome 的开源审计工具，可从 DevTools、命令行、Node 模块或 PageSpeed Insights 运行，按 Performance、Accessibility、Best Practices 与 SEO 给 URL 打分。它不再有 PWA 类别：2024 年 5 月随 Chrome 126 发布的 Lighthouse 12.0 移除了它，因为那些检查复述的是 Chrome 的可安装性标准，而 Chrome 已经放宽了这些标准，该类别衡量的东西浏览器不再执行。

## 工作原理

Lighthouse 在受控的 Chrome 实例中加载页面，施加模拟节流，并运行按类别分组的审计；每个类别的得分是其审计项的加权和（[Lighthouse overview](https://developer.chrome.com/docs/lighthouse/overview)，developer.chrome.com）。DevTools 面板运行随该版 Chrome 捆绑的版本；CLI 和 Node 模块需要本机 Chrome，并允许 CI 固定版本。

### PWA 类别为何消失

PWA 审计项（可安装的 manifest、带 `fetch` 处理函数的 Service Worker、启动画面、主题色地址栏、离线的起始 URL）是 Chrome 安装提示要求的翻版。Chrome 在 Android 108 和桌面 112 中取消了菜单安装对 `fetch` 处理函数的要求（[Update on the installability criteria](https://developer.chrome.com/blog/update-install-criteria)，developer.chrome.com），此时这些审计检查的是浏览器已不再适用的规则。Lighthouse 团队在 issue 15535 中跟踪移除并在 12.0 发布：类别、manifest 和 Service Worker 的采集器，以及 JSON 输出中的 `pwa` 键都已消失（[Remove PWA Category](https://github.com/GoogleChrome/lighthouse/issues/15535)，github.com）。PageSpeed Insights 及其 API 于 2024-05-10 切换到 12.0，带来同样的破坏性变更。

### 用什么替代

可安装性由浏览器在运行时检查，信号可以直接观察：Chromium 中的 `beforeinstallprompt` 事件、DevTools 的 **Manifest** 面板及其可安装性错误，以及浏览器自己的安装菜单项。离线能力的测试方法是在 Application > Service workers 面板勾选 **Offline** 后重新加载。这些都不产生分数，而这正是重点：PWA 要么在该平台上能安装，要么不能。

### 运行平台

DevTools 面板存在于 Chrome 和其他 Chromium 浏览器中，CLI 与 Node 模块通过 DevTools 协议驱动本机 Chrome，所以 Lighthouse 审计的是 Chrome 眼中的页面；没有 Firefox 或 Safari 的运行。PageSpeed Insights 在 Google 的服务器上运行同一引擎，并在源流量足够时加入 CrUX 现场数据。

### 其余类别对 PWA 说明了什么

Performance 测量实验室加载，对重复访问的 PWA 而言主要取决于 Service Worker 的缓存策略；Lighthouse 以冷配置运行，除非配置成热运行，报告的是首次访问的数字。Best Practices 包含 HTTPS，而 Service Worker 需要它。Accessibility 与 SEO 不受安装影响。

## 示例

一个示例在 CI 中固定工具版本；另一个替代工具不再运行的那项审计。

### 在 CI 中以固定版本运行 CLI

固定包版本，这样 Lighthouse 升级（它会改变评分）不会单凭自身弄红构建。JSON 输出不再有 `categories.pwa` 键；读取它的脚本得到 `undefined`。

```bash
npm install --save-dev lighthouse@12
npx lighthouse https://example.com --output=json --output-path=./report.json --only-categories=performance,best-practices
node -e "const r=require('./report.json'); console.log(r.categories.performance.score, r.categories.pwa)"
```

最后一行打印一个 0 到 1 之间的性能得分，以及 `pwa` 的 `undefined`，这是确认流水线运行的是哪个大版本的最快方法。

### 改在运行时检查可安装性

Chromium 判定页面可安装时触发 `beforeinstallprompt`。处理函数显示安装控件并把提示推迟到点击；它不触发不算失败，因为 Safari 和 Firefox 没有实现该事件（BCD `api.Window.beforeinstallprompt_event`）。

```js
let deferredPrompt = null;
const installButton = document.querySelector('#install');

if ('onbeforeinstallprompt' in window) {
  window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault();
    deferredPrompt = event;
    installButton.hidden = false;
  });
  installButton.addEventListener('click', async () => {
    await deferredPrompt?.prompt();
    deferredPrompt = null;
    installButton.hidden = true;
  });
} else {
  installButton.hidden = true; // 该引擎没有此事件：浏览器提供自己的安装界面
}
```

默认隐藏按钮可以避免 Firefox 和 Safari 用户看到一个什么都不做的控件；完整流程见[安装提示](/zh/reference/installation/install-prompt/)。

:::observed
Chrome 126 及之后版本的 Chrome DevTools Lighthouse 面板列出四个类别复选框：**Performance**、**Accessibility**、**Best practices** 与 **SEO**，而 Chrome 125 还显示 **Progressive Web App**；面板捆绑的版本报告为 `Lighthouse 12.0.0`（[What's New in DevTools (Chrome 126)](https://developer.chrome.com/blog/new-in-devtools-126)，developer.chrome.com）。12.x CLI 的 JSON 报告在 `categories` 下有四个键：`performance`、`accessibility`、`best-practices` 与 `seo`，`categories.pwa` 读作 `undefined`，这就是 PageSpeed Insights 为 2024-05-10 切换到 12.0 所公告的破坏性变更。
:::

## 另请参阅

- [Lighthouse overview](https://developer.chrome.com/docs/lighthouse/overview)（developer.chrome.com）
- [Update on the installability criteria](https://developer.chrome.com/blog/update-install-criteria)（developer.chrome.com）
- [Remove PWA Category (GoogleChrome/lighthouse issue 15535)](https://github.com/GoogleChrome/lighthouse/issues/15535)（github.com）
- [可安装性标准](/zh/reference/installation/installability-criteria/)
- [安装提示](/zh/reference/installation/install-prompt/)
- [Core Web Vitals（LCP、INP 与 CLS）](/zh/reference/performance/core-web-vitals/)