Blazor Wasm PWA not updating

Question

I have a Blazor WASM PWA application that I have published on a hosting service on IIS. The problem that I have encountered is that sometimes the application doesn't update in the visitor's browser. I.e. they see an older version of the application.

I know that the application cache should be updated by the service worker, so it could be that you need to visit the website once, and then close the browser and visit it again to get the updated version. However, sometimes it looks like the cache just gets messed up and no matter what, the application will not update. The only solution I've found is to press F12, go to the Application tab and delete everything from there -> this will force the latest version of the application to be downloaded again.

Does anyone know what is going on and how can I fix this?

Answer 1

Declare a js file for registration in the navigator.serviceWorker object.

 /**
  * Register Service Worker
  */
 navigator.serviceWorker
     .register('/***.js', { scope: '/' })
     .then(() => {
         console.log('Service Worker Registered');
     });

This js file can contain a cache version like below.

 const CACHE_VERSION = 1.0.

Update cache_version when the code changes to force the cache to refresh. Anytime the register *.js file changes, the browser updates the service worker to its new version.

 const CACHE_VERSION = 1.1;

Answer 2

This answer is intended to complement Michael Wong's answer:

Blazor automatically updates to the newer version (at least in .NET 5, possibly earlier too). This happens when the application is first closed and restarted in ALL browser tabs including the installed app (which is another browser tab).

The following article helped me a lot:
https://learn.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-5.0&tabs=visual-studio#installation-and-app-manifest-1

Also helpful:
https://www.eugenechiang.com/2021/05/22/forcing-reload-of-blazor-client-after-publishing-changes/