CODEWITHSUNDEEP
javascriptservice-workerprogressive-web-apps
GenesisBits
GenesisBits

Reputation: 346

Using Cache-first network service worker from PWABuilder never updates?

I'm using a service worker from PWABuilder for my website https://digimoncard.io/.

The cache-first network service worker JS file contains the following code:

// This is the service worker with the Cache-first network

const CACHE = "pwabuilder-precache";

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

workbox.routing.registerRoute(
  new RegExp('/*'),
  new workbox.strategies.CacheFirst({
    cacheName: CACHE
  })
);

I then have the following code in my index.php file under the body:

<!-- PWA -->
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);    
</script>
<!-- END PWA -->

The service worker never seems to update? No matter what I change on any page (content, file versioning, etc) the server worker won't update if it's already been cache. I can manually fix this by clearing browser cache but I'm either missing something or this is intended? For example, the version I visited on my phone has out of date content for 2 days now.

Upvotes: 0

Views: 807

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

That is the intended behavior when using a cache-first strategy. Assuming there's a match in the cache, that's the response that will be used.

If you're looking for "use the cache response if present, but also update it in the background" approach, you can switch to the stale-while-revalidate strategy.

The full list of strategies supported by Workbox out of the box can be found at https://developers.google.com/web/tools/workbox/modules/workbox-strategies

Upvotes: 1

Related Questions