PWA在Lighthouse中总是拿不到100分，离线功能到底怎么配？

Top丶子聪提问于 2026-03-20 11:07:19 阅读 4

前端

我用Workbox生成了service worker，本地测试离线也能加载页面，但Lighthouse评分里“Offline support”这一项还是不通过，提示“Does not register a service worker that controls page and start_url”。是不是我的注册方式有问题？

这是我在main.js里注册的代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.log('SW registration failed:', err));
  });
}

我来解答赞 0 收藏

反馈

1 条解答

码农瑞瑞 Lv1

这个问题挺常见的，跟你注册代码本身没关系，问题出在两个地方：manifest.json 的 start_url 配置，以及 service worker 的缓存策略。

首先检查你的 manifest.json，start_url 必须指向一个实际存在的页面，而且这个页面得被你的 service worker 缓存了：

{

  "start_url": "/",

  // 或者 "./" 也行，但得和实际访问路径一致

  "display": "standalone",

  ...

}

然后在 sw.js 里确保你缓存了 start_url 对应的页面：

// 缓存列表要包含 "/" 或 "./"

const CACHE_NAME = 'my-pwa-v1';

const urlsToCache = [

  '/',

  '/index.html',

  // 其他关键资源

];



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

  event.waitUntil(

    caches.open(CACHE_NAME)

      .then(cache => cache.addAll(urlsToCache))

  );

});

还有个容易踩的坑：scope 的问题。如果你的 sw.js 在根目录，scope 默认就是 "/" ，这没问题。但如果 start_url 是 "/" 而 service worker 的 scope 是 "/some-folder/" ，就会出问题。

最后提醒一下，Lighthouse 测试需要 HTTPS 环境（localhost 除外），而且有时候浏览器缓存干扰测试结果，可以试试无痕模式。

你可以先检查下 manifest.json 里的 start_url 是不是和实际访问的路径一致，这个是最容易出问题的点。

2026-03-20 11:08