CODEWITHSUNDEEP
javascriptservice-workerworkboxservice-worker-config
ru4ert
ru4ert

Reputation: 1179

Workbox Service Worker don't save cache

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

But I cannot see something there:

Service Worker Workbox Cache

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

Service Worker Workbox

Upvotes: 0

Views: 420

Answers (1)

Ilijanovic
Ilijanovic

Reputation: 14904

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.

Upvotes: 0

Related Questions