Workbox SW：运行时缓存在第二次重新加载之前不工作

Question

我是 service worker 和 workbox 的新手。我目前正在使用工作箱来预缓存我的静态资产文件，这工作正常，我希望我的其他第三方 URL 在运行时也被缓存，但直到我第二次在页面上重新加载才工作:(

下面显示的是我的 Service Worker 代码的副本，请注意我故意将原来的 link 替换为 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开发者工具刷新了缓存存储，但一切似乎都是一样的。来自自定义 link、google 字体和 fontawesome 的资源，第一次缓存失败。下面是我的页面第一次加载图像和第二次加载图像的控制台和缓存存储选项卡。

拜托，我不知道我做错了什么，也不知道为什么会这样。

提前致谢

Answer 1

这是预期的行为。

Service Worker 的设置方式是他们将有一个安装和激活阶段，在这个阶段，只要注册了新的 Service Worker 或更新了 Service Worker 就会进行安装。

Service Worker 将在安全时激活（即目前没有 windows "controlled" 成为 Service Worker）。

Service Worker 激活后，它将控制任何新页面。

您看到的是：

页面已加载并且页面注册了一个 service worker
Service Worker 在其安装阶段预缓存任何文件
服务激活但不控制任何页面
您刷新页面，此时页面受到控制，请求将通过 service worker（导致在第二次加载时进行缓存）。

Answer 2

Service Worker 在激活之前不会缓存任何内容。它只会在第二次命中时被激活。要在第一次命中时实现缓存，您必须引导 Service Worker 跳过等待激活的过程。你可以通过

self.addEventListener('install', () => {
   self.skipWaiting(); //tells service worker to skip installing and activate it
   /*your code for pre-caching*/
});

一旦它被跳过，它就会进入激活模式并等待缓存，但它不会缓存客户端交互。为此应用以下行

self.addEventListener('activate', () => {
     clients.claim();
});

它在第一次命中时开始缓存

Workbox SW：运行时缓存在第二次重新加载之前不工作

Workbox SW: Runtime caching not working until second Reload

caching

progressive-web-apps

workbox