Need to clear application cache and then refresh to see the new changes on PWA enabled Blazor WebAssembly apps

From: @fingers10
(The original post is in the Issue #17)

---

@jsakamoto The fix provided in the service-worker.published.js,

Change the code inside the onFetch() function from const request = shouldServeIndexHtml ? 'index.html' : event.request; to const request = shouldServeIndexHtml ? (new URL(event.request.url)).pathname.replace(/\/$/, '') + '/index.html' : event.request;.

creates a cache issue.

Steps:

1. Deploy a blazor wasm app with pwa enabled.
2. Now make some changes in Index.razor screen.
3. Now publish and deploy again and navigate to index url of the app.
4. Note that new changes will not be reflected. You need to clear application cache and then refresh to see the new changes.

Video showing the problem:

1. I have an intial version deployed.
2. I made code change in Index.razor by adding <h1 style="background-color:yellow">Hello, Cache Problem</h1>.
3. Published and deployed the app.
4. Navigated to index url of the app.
5. Refreshed and expecting to see new changes but nothing happens.
6. Cleared cache and refreshed. Now I can see new code changes.

https://user-images.githubusercontent.com/43729469/181191463-58db8227-1366-43ec-ab0d-527e7ebd31f6.mp4

[jsakamoto]

@fingers10

Can we supply a custom UI to refresh and get new content instead of default one?

Yes. I’ll provide the ability on the NuGet package library I’m going to publish to customize UI fully.

[jsakamoto]

@fingers10 [FYI] The “Blazor PWA Updater” NuGet package has been rolled out!

https://twitter.com/jsakamoto/status/1558456715237986309