为什么我的PWA服务工作者注册后Lighthouse仍显示未安装？

Newb.成立提问于 2026-02-05 14:06:35 阅读 28

移动

我在React项目里按教程添加了服务工作者，控制台显示注册成功，但Lighthouse评分总显示”未安装有效的服务工作者”。代码如下：


// src/index.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    serviceWorker.register('/service-worker.js')
      .then(reg => console.log('SW注册成功:', reg))
      .catch(err => console.error('SW失败:', err));
  });
}

服务工作者文件放在public/service-worker.js，路径确认没问题。Lighthouse运行时控制台没有报错，但评分一直不通过。试过清除缓存和无痕模式测试，结果还是一样，这是哪里出问题了？

PWA移动

我来解答赞 5 收藏

反馈

2 条解答

Des.艳玲 Lv1

你这个代码看着没问题，但Lighthouse认不出来，大概率是因为service-worker路径不对，或者没有正确返回内容。Lighthouse很傻，你得让它看出来你在认真搞PWA。

我给你贴个靠谱的注册方式，顺便加个log方便排查问题：

if ('serviceWorker' in navigator) {

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

    const swUrl = '/service-worker.js';

    

    serviceWorker.register(swUrl)

      .then(reg => {

        console.log('SW注册成功:', reg);

        return reg.ready;

      })

      .then(() => {

        console.log('SW已激活');

        return navigator.serviceWorker.getRegistration();

      })

      .then(reg => {

        if (reg && reg.active) {

          console.log('当前活跃SW:', reg.active.scriptURL);

        }

      })

      .catch(err => console.error('SW失败:', err));

  });

}

然后你去public目录下加个service-worker.js文件，内容最少要这样：

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

  console.log('SW installed');

  self.skipWaiting();

});



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

  console.log('SW activated');

  event.waitUntil(clients.claim());

});




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

  // 这里先占个坑

});

接着用Chrome DevTools看下：
Application -> Service Workers 有没有显示你的SW
Network里看下请求/service-worker.js的状态是不是200
控制台有没有SW相关的log

Lighthouse评分要看SW能不能正常install和activate。有时候你注册了，但它没走完流程，或者压根没执行你的JS。

另外，检查下你的manifest.json文件有没有正确引用，里面要有start_url，scope这些基本配置。PWA不是注册个SW就完事的，要全套配置。

2026-02-06 16:12

柯欣~ Lv1

你这代码乍看没问题，但 React 项目的服务工作者注册方式太随意了。create-react-app 默认生成的是 /src/serviceWorker.js，你直接用 window.serviceWorker.register 算怎么回事？这会导致 service worker 虽然注册了，但根本没走 Webpack 的构建流程。

你 public/service-worker.js 这个文件位置就错了。React 项目要改 src/serviceWorker.js，然后通过 registerServiceWorker() 调用。你现在这样注册的 SW 根本没绑定任何缓存策略，Lighthouse 当然识别不出来。

改法很简单：
把你的 service-worker.js 内容合并到 src/serviceWorker.js 里
在 index.js 里用 import { register } from './serviceWorker' 然后调用 register()
删掉你那个手动注册的 window.addEventListener('load')

create-react-app 的 serviceWorker.js 里自带生命周期钩子，你直接覆盖上去就行。你现在这注册方式在性能上完全是白费功夫，PWA 评分不提升就对了。

2026-02-05 14:08