PWA在Lighthouse中总是拿不到满分，哪里出问题了？

璐莹提问于 2026-03-03 15:56:18 阅读 6

前端

我按照教程配置了manifest.json和service worker，本地测试也缓存正常，但用Lighthouse跑分时“PWA优化”这一项总卡在90多分，提示“未设置启动画面”和“地址栏不匹配”。

我的manifest里明明写了"display": "standalone"，而且start_url也配了，为什么还是不行？

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [...]
}

我来解答赞 8 收藏

反馈

1 条解答

司空熙晨 Lv1

这个问题我太熟悉了，Lighthouse在PWA这块确实有点“强迫症”。其实你的manifest配置大方向是对的，问题主要出在HTML头部少了一个关键的meta标签，导致Lighthouse校验不通过。

它报的“地址栏不匹配”和“未设置启动画面”，核心原因通常是HTML里的theme-color没有和manifest里的theme_color保持一致，或者干脆HTML里就没写。Lighthouse不仅看manifest，还要求HTML里必须有，而且颜色值必须完全一样，一个字母都不能差。

你可以试试在你的HTML 里加上这行代码：

另外关于启动画面，除了上面那个meta标签，还得确保你的icons数组里至少包含一个512x512尺寸的图标，最好是png格式。如果只有192x192的小图标，Lighthouse也会觉得不够完美。把这两个地方改一下，再跑一遍分应该就能满分了，加油！

2026-03-03 22:02