Blazor WPA not updating

Question

I published a Blazor WPA to a static website (using Azure storage account), however now every time I publish an update to the website, the users keep continue using the cached version of the site, rather than the new version of the site.

I've tried various things already, but none of them cause the website to update correctly without a hard refresh. including add/update a comment in the service-worker.published.js file, which seems to have done the trick on older versions of Blazer.

Answer 1

Hi, @Lex K ,

Here are some solutions for u to update.

• Open New InPrivate Window

and input your url to broswer your website.

• Empty cache

Open Settings.

Click "Privacy search and services"

Select "Cached images and files" cache and refresh again.

• Change version code of your Blazor PWA

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;  

---

If the answer doesn’t solve your issue, please provide more details of error that will help us track down what’s happening.
If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Michael Wang

Answer 2

Hello Michael Wang,

Should I use this code:

navigator.serviceWorker
    .register('version.js')
    .then(() => {
        console.log('version.js registered');
    });

navigator.serviceWorker
    .register('service-worker.js')
    .then(() => {
        console.log('service-worker.js registered');
    });

Or this code:

navigator.serviceWorker
    .register('version.js')
    .then(() => {
        console.log('version.js registered');

        navigator.serviceWorker
        .register('service-worker.js')
        .then(() => {
            console.log('service-worker.js registered');
        });
    });