Blazor client side UI updates are not reflected

Question

I'm working on a Blazor WebAssembly App hosted in Ubuntu with Nginx as a proxy. However, when I publish the application and upload it to the server, any UI changes I have made are not reflected on the client. The application is a PWA.

service-worker.js

// In development, always fetch from the network and do not enable offline support.
// This is because caching would make development more difficult (changes would not
// be reflected on the first load after each change).
self.addEventListener('fetch', () => { });

service-worker.published.js

// Caution! Be sure you understand the caveats before publishing an application with
// offline support. See https://aka.ms/blazor-offline-considerations

self.importScripts('./service-worker-assets.js');
self.addEventListener('install', event => event.waitUntil(onInstall(event)));
self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
self.addEventListener('fetch', event => event.respondWith(onFetch(event)));

const cacheNamePrefix = 'offline-cache-';
const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/ ];
const offlineAssetsExclude = [ /^service-worker\.js$/ ];

async function onInstall(event) {
    console.info('Service worker: Install');

    // Fetch and cache all matching items from the assets manifest
    const assetsRequests = self.assetsManifest.assets
        .filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))
        .filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
        .map(asset => new Request(asset.url, { integrity: asset.hash }));
    await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
}

async function onActivate(event) {
    console.info('Service worker: Activate');

    // Delete unused caches
    const cacheKeys = await caches.keys();
    await Promise.all(cacheKeys
        .filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName)
        .map(key => caches.delete(key)));
}

async function onFetch(event) {
    let cachedResponse = null;
    if (event.request.method === 'GET') {
        // For all navigation requests, try to serve index.html from cache
        // If you need some URLs to be server-rendered, edit the following check to exclude those URLs
        const shouldServeIndexHtml = event.request.mode === 'navigate';

        const request = shouldServeIndexHtml ? 'index.html' : event.request;
        const cache = await caches.open(cacheName);
        cachedResponse = await cache.match(request);
    }

    return cachedResponse || fetch(event.request);
}

/* updated 2020-12-22 11:19 */

I have tried the following to get the changes to be updated in the browser:

Deleted all the published files on the server, uploaded new files, and restarted the server
Restarted the website service
Added a timestamp to service-worker.published.js every time I upload a new version of the site.
Deleted the application cache using the clear storage feature and made sure to select all checkboxes.

Not sure how to get the site to refresh my changes after publishing. Any help is greatly appreciated.

After you update and re-publish, try the following: close your browser and re-open it. Open dev tools and select the network tab. Navigate to the site (this should then download your new service worker) - check there is a transfer of the service worker. check the application tab/service worker section - it should show an update is available but not active. Select the option "update on reload" and reload the page - the service worker should change to activated and running. Check the content of the service worker - ensure it is updated. If any of this fails, check the network traffic for problem — Mister Magoo
@MisterMagoo Thanks for the response. I had attempted what you suggested, however nothing was working. I finally figured out what it was. It turns out I was only updated the service worker and base dlls that are generated by the publish functionality in visual studio. I also had to update the files located in the _framework folder as well. — Toret

Toret Toret · Accepted Answer · 2020-12-24T17:33:01

So after much frustration, it turns out the files in the _framework folder that is also generated by the publish functionality in Visual Studio must also be updated. I hope this helps someone avoid a long and frustrating day.

Blazor client side UI updates are not reflected

1 Answers