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
135 stars 7 forks source link

Button not triggering anything (blazor wasm + dotnet 7) #7

Closed philippedurocher closed 1 year ago

philippedurocher commented 1 year ago

Hi

I've followed your instructions from the quick start section. I did everything except modify the service-worker.published.js since I just want to see it in local.

Everything seems ok but the button is not triggering anything. It's not reloading the page, it's not erroring in the console/log. Could it be dotnet 7? Is it because i'm localhost? Here's the PWAUpdater tag :

<PWAUpdater Text="Une nouvelle version est disponible." ButtonCaption="METTRE À JOUR" EnvironmentsForWork="" State="PWAUpdater.States.Showing" />

Thank you for your time. I will try to fiddle with your code but maybe you already know what is going on?

jsakamoto commented 1 year ago

@philippedurocher The reason why nothing would happen in that scenario is you did not modify the service-worker.publish.js. I don't know why the motive of wanting to test locally is a reason not to change service workers, but anyway, you must modify the service-workeer.publish.js with the instructions on the README document.

Please remember that the usual JavaScript (including Blazor) can not directly interfere with the service worker process space. Therefore, what the Blazor component side can do is only send messages to the service worker process space. When you click the "UPDATE NOW" button on the PWAUpdater component, it only does send a message with an argument that its data.type is "SKIP_WAITING" to the service worker process space via the postMessage method of the Worker interface (please see also the MDN document). The responsibility of updating the service worker code exists service worker side code. It means the service worker side code must handle the "message" event and invoke the skipWaiting method (the MDN document is here) properly, as the README document explains (here).

You also have to understand from the explanation above that clicking the "UPDATE NOW" button on the PWAUpdater component doesn't cause reloading browsers directly. The browser's reloading will be caused by the side-effect of invoking the skipWaiting method. Therefore, reloading of browsers will never happen if the waiting service worker code doesn't exist.

You should follow the instructions below if you want to reproduce updating the service worker on your local environment.

  1. Configure your service worker code to handle a "message" event and invoke skipWaiting method properly.
  2. Confirm the next updated service wroker code is awaiting in the web browser's developer tools window.

movie-001

philippedurocher commented 1 year ago

It's working fine! Thanks for your fast and great answer.