Lighthouse无法检测到已正常注册的PWA Service Worker问题求助

问题根因分析 #

• 核心原因1：路径尾部斜杠不匹配
  你当前访问的测试页面地址为 https://beegle.app/beeglepro（无尾部斜杠），但SW注册参数、Manifest配置里声明的scope均为 /beeglepro/（带尾部斜杠），浏览器的Service Worker scope匹配规则中，这两个路径属于不同的前缀：
  带斜杠的/beeglepro/只能控制路径前缀完全匹配的页面，比如/beeglepro/index.html、/beeglepro/setting等，但不带斜杠的/beeglepro会被识别为根目录下的独立文件，不在你声明的scope范围内，因此Lighthouse判定当前页面不受SW控制。
• 潜在原因2：Service Worker权限配置缺失
  你将SW文件放在站点根目录/bpro-service-worker.js，虽然根目录的SW默认有权限控制全站路径，但部分服务器会默认限制SW的作用域范围，建议在SW文件的HTTP响应头中添加Service-Worker-Allowed: /beeglepro/，明确授权该SW可以控制指定scope的页面。

修复方案 #

1. 统一路径规则，二者选其一即可：
   • 方案A：在服务器层配置301重定向，将所有访问/beeglepro（无尾斜杠）的请求跳转到/beeglepro/（带尾斜杠），保持和现有配置一致
   • 方案B：将Manifest里的scope、start_url字段，以及SW注册时的scope参数，全部修改为不带尾斜杠的/beeglepro
2. 给/bpro-service-worker.js文件的响应头添加Service-Worker-Allowed: /beeglepro/配置，确保SW的作用域权限正常。

常见疑问解答 #

不需要在Service Worker代码中单独指定start_url，start_url是Manifest的专属配置项，仅需要保证该地址在SW的作用域范围内即可，和SW本身的代码逻辑无关。

修复完成后可以打开Chrome DevTools的Application面板，分别查看Service Workers标签下已注册SW的scope是否正确、Manifest标签下的配置是否被正常识别，确认无误后再重新运行Lighthouse检测即可。

内容的提问来源于stack exchange，提问作者Mukesh Ghatiya