JS Service Worker的onFetch回调不处理外域请求时直接返回是否可行？

结论 #

你当前在外域分支直接return的写法完全可行，不需要额外调用fetch返回结果。

原理说明 #

Service Worker的fetch事件规范定义：只要回调函数中没有主动调用event.respondWith()方法，浏览器就会自动走原生请求流程，和没有Service Worker拦截时的请求表现完全一致，刚好满足你让外域请求正常执行的需求。

注意事项 #

你当前的域名判断逻辑存在问题：event.request.url返回的是完整的带协议的URL字符串，格式为https://example.com/xxx，直接用startsWith("example.com")永远不会匹配到本域请求，建议修正为：

function onFetch(event) {
  const requestHost = new URL(event.request.url).hostname
  if (requestHost !== 'example.com') {
    // 这里可以补充外域请求的埋点、统计等非拦截逻辑
    return
  } 
  event.respondWith(
    fetch(event.request)
      .then(req => {
        // 对请求做相关处理
      })
      .catch((error)=> {
        // 错误处理等逻辑
      })
      .finally(()=> {
        // 清理逻辑
      })
  )
}

self.addEventListener('fetch', onFetch);

如果你后续需要对外域请求做埋点统计等不影响请求本身的操作，直接在return前补充对应逻辑即可，不需要调用respondWith，不会干扰原生请求的执行。

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