I am working with PWA and finding updating of code changes to be extremely inconsistent in its behaviour.

Here is the sw.js

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */

// Names of the two caches used in this version of the service worker.
// Change to v2, etc. when you update any of the local resources, which will
// in turn trigger the install event again.
const PRECACHE = 'mdm-v1.2.19';
const RUNTIME = 'runtime';

// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
  'index.html',
  '/pages/about.html',
  '/js/about.js',
…
…
…
…
…

];


self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(PRECACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting()) // Ensure correct usage
  );
});

self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => {
      console.log('Service worker activated and old caches cleared');
      return self.clients.claim(); // Ensure correct usage
    })
  );
});

self.addEventListener('fetch', event => {
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(RUNTIME).then(cache => {
          return fetch(event.request).then(response => {
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });
      })
    );
  }
});

I understand that following any code changes (javascript or html etc) then within the sw.js file you change the version number.

I have tried different sw.js files including Google’s example and examples from online courses.

None of these work consistently.

The PWA is being delivered via IIS.

To test this am I adding a simple alert to one of the js files, then altering the version in the sw.js file.

After much head scratching I thought maybe the fault was within IIS so I turned off cacheing there. I thought this was the solution as my iPhone 15 started working perfectly. Today tried other devices to find it didn’t

Here are my results earlier today

iPhone 15 works perfectly.
Android phone not working
iPad not working.

In IIS did a restart of the site and the App Pool.

Suddenly everything seems to be working …. for now …. more than likely one device will stop working at some point as that is my experience in the past.

In the past I have reset IIS to find it did ‘not’ solve the problem.

Everything seems rather shakey.

Does anyone have any advice? Is it IIS at fault? Any other setting changes needed?