PWA, PSA , nodeJS: On page changes, 3 refreshes on browser required... Normal?

Wappler General How To
1

Hey guys,

In my first attempt of building a PWA-PSA in nodeJS, everytnig looks to work fine!
(thanks @ben)

I'm in a very starting point and doind some tests...
The only thing that I noticed is that when I do a change in my pages (simple text change), on my browser I need to refresh it 3 times in order to see the updated content of the page.
I'm talking about the normal online mode (not offline cashed data)

Is that normal?
(if you need something to show you from my test let me know)

2

@famousmag add the below to the end of your service worker file. PWA's have an inherent cache problem.

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});
2 Likes
3

Thanks @Cheese,

I already have an "activate" eventlistener in my service worker file...

// activate event
self.addEventListener('activate', evt => {
    //console.log('service worker activated');
    evt.waitUntil(
        caches.keys().then(keys => {
            console.log(keys);
            return Promise.all(keys
                .filter(key => key !== staticCacheName && key !== dynamicCacheName)
                .map(key => caches.delete(key))
            );
        })
    );
});

(It is from ben's tutorial...)

So, I should replace the existing one with yours that handles the cache in a different way?
Am I correct?

I'm getting an error related to the service worker...
I will close and clear cache and try again to see

4

Simply replace it. Looks as if Ben is deleting keys that match so if they don't match they'll remain, and not entirely sure but this won't delete all cache items if there is no match to the key? We delete all the cache regardless of matches and skip that argument.

1 Like