Service-worker 在初始加载时没有拦截第一次获取调用

Question

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

Answer 1

这种“首次加载”行为是设计使然。 ServiceWorkers 在进入 installing 状态并以 activated 状态结束之前无法拦截初始请求。一种选择是首先向用户显示“正在安装...”页面，等待软件激活，然后刷新页面。然后 SW 可以提供一个“SW activated”页面。参见示例：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'))
}

Service-worker 在初始加载时没有拦截第一次获取调用

Service-worker not intercepting first fetch call on initial load

javascript

service-worker

service-worker-events