服务工作者在初始加载时没有拦截第一个 fetch 调用

【问题标题】：Service-worker not intercepting first fetch call on initial load服务工作者在初始加载时没有拦截第一个 fetch 调用
【发布时间】：2021-12-10 12:01:16
【问题描述】：

我的自定义服务人员遇到了问题。最初加载页面时，它似乎没有拦截第一个 fetch req（但之后的所有 fetch req 都被正确拦截）。但是，如果我重新加载页面，所有 fetch 请求都会被 service-worker 正确拦截。所以问题只存在于页面的初始加载。

【问题讨论】：

标签： javascript service-worker service-worker-events

【解决方案1】：

这种“首次加载”行为是设计使然。 ServiceWorker 无法拦截初始请求，直到它们进入 installing 状态并以 activated 状态结束。一种选择是首先向用户显示“正在安装...”页面，等待软件激活，然后刷新页面。然后，SW 可以提供“SW 激活”页面。参见示例：https://fetch-progress.anthum.com/sw-basic/ - sw-simple.js

// INTERCEPT:  /, /index.html, /index.htm 
if ([scope, scope + 'index.html', scope + 'index.htm'].includes(event.request.url)) {
  event.respondWith(fetch(scope + 'sw-installed.html'))
}

【讨论】：