Workbox SW：运行时缓存直到第二次重新加载才起作用

Question

我是服务人员和工作箱的新手。我目前正在使用工作箱来预缓存我的静态资产文件，该文件可以正常工作，并且我希望在运行时也可以缓存我的其他第三方URL，但是直到页面上第二次重新加载后，我的第三方URL才起作用：(

下面显示的是我的服务人员代码的副本，请注意，我故意替换了原始链接到abc.domain.com的内容：）

workbox.routing.registerRoute(
  //get resources from any abc.domain.com/
  new RegExp('^https://abc.(?:domain).com/(.*)'),
  /*
  *respond with a cached response if available, falling back to the network request if it’s not cached. 
  *The network request is then used to update the cache.
  */
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'Bill Resources',
    maxEntries: 60,
    maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
  }),
); 

workbox.routing.registerRoute(
  new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
  //serve from network first, if not availabe then cache
  workbox.strategies.networkFirst(),
); 

workbox.routing.registerRoute(
  new RegExp('^https://use.(?:fontawesome).com/(.*)'),
  //serve from network first, if not availabe then cache
  workbox.strategies.networkFirst(),
); 

我已经清除了没有编号的存储时间，从Google开发人员工具刷新了缓存存储，但是一切似乎都是一样的。来自自定义链接的资源（Google字体和fontawesome）无法在第一时间进行缓存。下面分别是我的页面的第一个加载映像和第二个加载映像的控制台和“缓存存储”选项卡。

请我不知道我在做什么错，为什么会这样。

提前致谢

Answer 1

这是预期的行为。

Service Worker 的设置方式是，它们将有一个安装和激活阶段，在注册新 Service Worker 或更新 Service Worker 时，就会发生安装。

然后，Service Worker 将在安全时激活（即当前没有窗口被 Service Worker“控制”）。

一旦服务工作者被激活，它将控制任何新页面。

您看到的是：

1. 页面已加载并且页面注册了 Service Worker
2. Service Worker 在安装阶段预先缓存所有文件
3. 服务激活但不控制任何页面
4. 您刷新页面，此时页面受到控制，请求将通过服务工作线程（导致第二次加载时进行缓存）。