Chrome更新至95版本后devtools的Lighthouse崩溃，疑似Service Worker导致

问题根因 #

• 你提供的Service Worker中fetch事件为空实现，没有返回任何响应也没有透传请求。Chrome 95版本更新后，Lighthouse的资源加载逻辑会优先命中站点已注册的Service Worker，空逻辑导致所有资源请求持续挂起，最终触发超时崩溃。
• activate事件的旧缓存清理逻辑未返回Promise.all实例，导致waitUntil没有正确等待缓存清理完成就结束事件执行，可能引发缓存冲突，进一步提升Lighthouse异常概率。

修复方案 #

修改后的Service Worker代码如下：

var cacheName = 'site-cache-v1';

// Install
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      //console.log('Service Worker Installed');
    })
  );  
});

// Delete old cache objects
self.addEventListener('activate', function(event) {  
  event.waitUntil(caches.keys().then(function (keyList) {
    // 新增return，确保缓存清理逻辑执行完成后才结束activate事件
    return Promise.all(keyList.map(function (key) {
      if (key === cacheName) {
        return;
      }
      return caches.delete(key);
      //console.log('Old Service Worker '+key+' Deleted');
    }));
  }));
  //console.log('Service Worker Activated');
});

self.addEventListener('fetch', function(event) {
  // 新增默认请求透传逻辑，无需缓存的请求直接走网络获取
  event.respondWith(fetch(event.request));
  //console.log('Fetch', event.request);
});

如果暂时不需要修改Service Worker，可以在运行Lighthouse前，勾选设置栏的Clear storage和Disable service workers选项，即可避免崩溃正常运行。

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