Workbox Service Worker 不保存缓存

Question

I implement a service Worker. I looks pretty good, activating without errors, ...

But I cannot see something there:

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'}
              })
            ]
          }));

This is in Google Chrome's Application -> Service Workers

Answer 1

Try this code in your service worker:

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;
      })
    })
  );
});

This approach is called stale-while-revalidate

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

This means: If you fetch a page, i the service worker check if there is something in the cache and returns it from the cache to you, after returning it from the cache the service worker makes an request to the network and saves that request into the old cache.

Next time you refresh you will see the updated version.

On good approach is also: "cache with fallback to network"

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

This simply means: Take a look into the cache if there is something stored, if not then fetch it from the network.