PWA 的 Lighthouse 评分为什么总是卡在安装提示上？

UE丶涵博提问于 2026-03-21 10:13:25 阅读 26

前端

我用 Lighthouse 测了一个 PWA 项目，其他项都绿了，就“可安装”这一项一直过不去，提示“没有有效的 manifest 或 service worker”。但我明明加了 manifest.json 和注册了 SW 啊！

而且我还特意检查了 manifest 里的 start_url 和 display 配置，也配了 icons。CSS 里也用了 viewport 设置，像这样：

@viewport {
  width: device-width;
}

body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  min-height: 100vh;
}

到底是哪里漏了？Lighthouse 到底要看到什么才肯给“可安装”打勾？

我来解答赞 2 收藏

反馈

1 条解答

技术莹雪 Lv1

遇到这种问题真是让人头疼，一步一步排查吧。

首先，Lighthouse 在判断一个网站是否可安装时，主要会检查以下几个方面：

1. 是否有一个有效的 Web App Manifest 文件。
2. Manifest 文件是否包含了必要的字段，比如 name, short_name, start_url, display, 和至少一个图标。
3. 网站是否通过 HTTPS 提供服务。
4. 是否有一个有效的 Service Worker，并且这个 Service Worker 能够成功注册并激活。

你提到 manifest.json 和 Service Worker 都已经添加了，但还是没过，我们逐一检查一下可能的问题点。

检查 manifest.json 文件
确保你的 manifest.json 文件格式正确并且包含了所有必要的字段。比如：

{

  "name": "Your App Name",

  "short_name": "App",

  "start_url": "/index.html",

  "display": "standalone",

  "background_color": "#ffffff",

  "theme_color": "#000000",

  "icons": [

    {

      "src": "icon-192x192.png",

      "sizes": "192x192",

      "type": "image/png"

    },

    {

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

      "sizes": "512x512",

      "type": "image/png"

    }

  ]

}

注意 start_url 必须是一个有效的相对路径或者绝对 URL。另外，图标文件要确保存在并且路径正确。

确保通过 HTTPS 提供服务
Lighthouse 要求 PWA 必须通过 HTTPS 提供服务。如果你本地测试，可以忽略这一点，但部署到线上环境时一定要确保使用 HTTPS。

检查 Service Worker 注册与激活
确保你的 Service Worker 正确注册并且能够成功激活。通常在 main.js 或者 app.js 中会有类似这样的代码：

if ('serviceWorker' in navigator) {

  window.addEventListener('load', () => {

    navigator.serviceWorker.register('/service-worker.js')

      .then(registration => {

        console.log('Service Worker registered with scope:', registration.scope);

      })

      .catch(error => {

        console.error('Service Worker registration failed:', error);

      });

  });

}

这段代码会在页面加载完成后尝试注册 service-worker.js 文件。需要注意的是，Service Worker 文件必须放置在根目录下，或者在 manifest.json 中指定的作用域内。

检查 Service Worker 内容
Service Worker 文件本身也需要正确配置。一个简单的例子如下：

self.addEventListener('install', event => {

  event.waitUntil(

    caches.open('v1').then(cache => {

      return cache.addAll([

        '/',

        '/index.html',

        '/style.css',

        '/script.js'

      ]);

    })

  );

});



self.addEventListener('fetch', event => {

  event.respondWith(

    caches.match(event.request)

      .then(response => {

        return response || fetch(event.request);

      })

  );

});

这段代码会在安装事件中缓存一些基本资源，并且在 fetch 事件中尝试从缓存中获取资源，如果没有找到再从网络请求。

最后一步：清除浏览器缓存
有时候浏览器缓存会导致 Lighthouse 读取旧的数据。尝试清除浏览器缓存，或者使用无痕模式重新测试。

通过以上步骤，应该能解决大部分“可安装”检查不通过的问题。如果还是有问题，可以提供更多的错误信息或者代码片段，进一步诊断。

2026-03-21 10:17