Chrome运行Lighthouse检测PWA出现「请求被DevTools拦截」错误如何解决

问题根因 #

你遇到的Lighthouse检测超时问题由两个核心原因导致：

1. Service Worker注册时序冲突：现有代码同时触发旧SW注销、新SW注册两个异步操作，没有做先后等待，Lighthouse检测过程中会因为SW状态反复变更无法完成页面加载状态校验，触发超时。
2. 离线场景兼容缺失：你当前SW的fetch事件仅做了请求透传，Lighthouse检测PWA项时会自动模拟断网环境校验离线可用性，断网时请求直接失败会中断检测流程。

修复方案 #

1. 修正SW注册异步时序 #

替换页面中原有Service Worker注册逻辑：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations()
    .then(function(registrations) {
        // 等待所有旧SW注销完成
        return Promise.all(registrations.map(reg => reg.unregister()));
    })
    .then(() => {
        // 再注册新SW
        return navigator.serviceWorker.register('./sw.js?5', {
            scope: './',
            registrationStrategy: "registerImmediately"
        })
    })
    .then(function(registration) {
        console.log('Registration successful, scope is:', registration.scope);
    })
    .catch(function(error) {
        console.log('Service worker registration failed, error:', error);
    });
}

2. 补充SW离线回退逻辑 #

替换sw.js中原有fetch事件监听代码：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
    .catch(() => caches.match(event.request))
  );
});

3. 检测前置操作 #

跑Lighthouse前先执行以下操作避免缓存干扰：

• 打开开发者工具Application面板，进入Service Workers选项，清空所有已注册的SW
• 勾选Lighthouse设置中的「Clear storage」选项
• 确保通过localhost或HTTPS协议访问页面，不要使用本地文件协议、普通HTTP公网地址，也不要在无痕模式下运行检测

可选配置检查 #

• 确认.webmanifest文件路径与页面引用一致，所有静态资源路径正确无404
• 确认manifest中配置的图标尺寸、格式符合PWA要求

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