javascript - Workbox Service Worker 不保存缓存

Question

我实现了一个服务工作者。我看起来很不错，激活没有错误，...

但我看不到那里的东西：

sw.min.js：

workbox.routing.registerRoute(
          ({request}) => request.destination === 'style',
          new workbox.strategies.NetworkFirst({
           // cacheName: cacheNamecss,
            plugins: [
              new workbox.expiration.ExpirationPlugin({
                maxEntries: 20,
                maxAgeSeconds: 7 * 24 * 60 * 60
              }),
              new workbox.cacheableResponse.CacheableResponsePlugin({
                statuses: [0, 200],
                headers: {'X-Is-Cacheable': 'yes'}
              })
            ]
          }));

这是在Google Chrome's Application->Service Workers

Answer 1

在您的服务人员中尝试此代码：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

这种方法称为stale-while-revalidate

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#stale-while-revalidate

这意味着：如果你获取一个页面，我服务工作者检查缓存中是否有东西并将其从缓存中返回给你，在从缓存中返回它之后，服务工作者向网络发出请求并将该请求保存到旧缓存。

下次刷新时，您将看到更新的版本。

好的方法也是：“回退到网络的缓存”

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

这只是意味着：如果有存储的东西，请查看缓存，如果没有，则从网络中获取它。