6

我是服务人员和工作箱的新手。我目前正在使用工作箱来预缓存我的静态资产文件，它工作正常，我希望我的其他第三方 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 的资源第一次无法缓存。下面是我的页面第一次加载图像和第二次加载图像的控制台和缓存存储选项卡。

首次加载 第二次加载

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

提前致谢

4

2 回答 2

1

这是预期的行为。

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

服务工作者将在安全时激活（即当前没有窗口被“控制”为服务工作者）。

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

你看到的是：

  1. 页面加载完毕，页面注册了一个 service worker
  2. 服务工作者在其安装阶段预缓存任何文件
  3. 服务激活但未控制任何页面
  4. 您刷新页面，此时页面受到控制，请求将通过服务工作者（导致第二次加载时缓存）。
于 2018-04-18T17:52:07.090 回答
1

服务工作者在被激活之前不会缓存任何内容。它仅在第二次命中时才被激活。要在第一次命中时实现缓存，您必须引导 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();
});

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

于 2019-03-01T05:41:55.753 回答