PWA 在 Lighthouse 里总是拿不到满分，到底哪里没配对？

W″春荣提问于 2026-03-27 14:05:22 阅读 28

前端

我照着文档加了 manifest.json 和 service worker，本地测试也都能安装 PWA，但每次跑 Lighthouse 评分，“PWA” 这一项最多就 80 多分，提示“未配置启动画面”和“地址栏颜色不匹配”。

我的 manifest 里明明写了 "background_color": "#ffffff" 和 "theme_color": "#000000"，HTML 里也加了 <meta name="theme-color" content="#000000">，怎么还是过不了？

这是我的 manifest 配置：

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [{
    "src": "/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

我来解答赞 3 收藏

反馈

1 条解答

运来（打工版） Lv1

看起来你遇到的主要是启动画面和地址栏颜色的问题。我经历过类似情况，确实挺烦人的。

首先关于启动画面，Lighthouse 要求你在 manifest 里提供不同尺寸的图标，建议至少加上 512x512 的图标。试试在 icons 数组里添加：

{

  "src": "/icon-512.png",

  "sizes": "512x512",

  "type": "image/png"

}

至于地址栏颜色不匹配，虽然你设置了 theme-color meta 标签，但记得确认你的 service worker 没有缓存旧的 HTML。可以清理浏览器缓存或者在开发者工具里禁用缓存再测试。

另外有个小细节，manifest 里的 background_color 和 theme_color 建议保持一致，或者至少接近。不然系统可能会认为你不匹配。试试把 background_color 改成和 theme_color 一样的黑色看看效果。

最后提醒一句，别忘了在 HTTPS 环境下测试，Lighthouse 对 PWA 的要求很严格，HTTP 环境下很多特性都检测不到。我自己就被这个坑过好几次。

2026-03-27 14:08