jsakamoto / Toolbelt.Blazor.PWA.Updater

Provide "Update Now" UI and feature to your Blazor PWA that appears when the next version of one is available.
Mozilla Public License 2.0
133 stars 7 forks source link

Blazor community - please let's solve auto update problem once and for all........... #19

Open bugproof opened 8 months ago

bugproof commented 8 months ago

This nuget. It randomly works. Sometimes it does, sometimes it does not. Can we think of a solution to solve this annoying problem once and for all???? This can't be specific to all PWAs?

https://www.reddit.com/r/Blazor/comments/130e1ya/blazor_wasm_getting_clients_to_update_after_a/

my service-worker.published.js file: am I missing something here? I followed README instructions and it randomly works SOMETIMES? What the hell?

// 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)));
self.addEventListener('message', event => {
    if (event.data?.type === 'SKIP_WAITING') self.skipWaiting();
});

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$/, /\.blat$/, /\.dat$/ ];
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, cache: 'no-cache' }));
    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);
}
jsakamoto commented 7 months ago

@bugproof What do you want to mean by "works"? What is the behavior of "doesn't work" for you? For example, does the "PWA Updater" sometimes not report a new update even though the latest version of the app is already ready for updating? Or did the "PWA Updater" report the newest version expected, but was the app never updated even when a user clicked on the "UPDATE NOW" button?

P.S. I don't want to imply that the "PWA Updater" is bug-free, and I strongly agree that it is difficult to figure out PWA. But to the best of my knowledge, most of these kinds of issues were caused by a lack of understanding of the PWA specification and behavior.

bugproof commented 7 months ago

"PWA Updater" sometimes not report a new update even though the latest version of the app is already ready for updating

Yeah, I upload new files to my static hosting ftp and most of the time "Update now" bar never shows up. It shows up sometimes.

I tried this solution : https://github.com/jsakamoto/Toolbelt.Blazor.PWA.Updater/issues/14#issuecomment-1873324033

But have to test it more thoroughly to confirm it works.

It shouldn't be that complicated. I appreciate the package but some crucial point is missing as default configuration doesn't work.

bugproof commented 7 months ago

Nope the solution from the linked comment doesn't work. We need better solution or being able to programmatically invoke "Update" (Force it) this way we can implement a versioning based on localStorage and having server returning current version.