'How to clear angular service worker cache in all clients?

First of all checked all stackoverflow Q/A and haven't found my answer.

I have Angular 13 project which always used service worker (ngsw.json + ngsw-worker.js) in production build. Later the back-end api url was changed to different one in environment.ts files and after deploy to Amazon S3 cloudfront the Front-end is still calling the the old endpoint.

Okey, so it seems that my service worker cached all files and isn't updating. I have tried updating it via swUpdate, but it just don't help because it can't see any changes so I just deleted serviceWorker :

angular.json :

"serviceWorker": false,

index.html :

 <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function (registrations) {
        //returns installed service workers
        if (registrations.length) {
          for(let registration of registrations) {
            registration.unregister();
            document.location.reload();
        }
     }
  });
}
  </script>

Ran : npm run prerender

Deployed dist/browser to Amazon S3 Cloudfront which don't have any service worker file and It should delete any used service worker in all client browsers + reload the page. Noone of this is happening.

If client is not opening dev tools , old service worker is still giving an old api url.

How to reset all cache and service worker in all my clients ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source