caching - 工作箱软件 : Runtime caching not working until second Reload

Question

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

下面显示的是我的 Service Worker 代码的副本，请注意我故意替换了我原来的 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 fonts 和 fontawesome，第一次缓存失败。下面分别是我的页面第一个加载图像和第二个加载图像的控制台和缓存存储选项卡。




请我不知道我做错了什么以及为什么它会这样。

提前致谢

Answer 1

这是预期的行为。

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

Service Worker 将在安全的情况下激活(即当前没有窗口被“控制”为 Service Worker)。

一旦 Service Worker 被激活，它将控制任何新页面。

你看到的是:

页面已加载，页面注册了 service worker

Service Worker 在安装阶段预缓存所有文件

服务激活但不控制任何页面

你刷新页面，此时页面被控制，请求将通过服务 worker (导致第二次加载时的缓存)。