Blazor Chrome caching issues

Question

I have this Blazor SPA I have published to IIS on a webhotel. My problem is that Chrome is somehow caching my Blazor assembly so no matter how many times I redeploy I still get the old dll. I can start up a new clean Chrome with chrome --disable-application-cache --incognito and that does indeed get the fresh dll but how do I fix this properly? Kind regards

Answer 1

The following helps IF you don't want PWA features.

I started my project with PWA (just in case I wanted it later) but it turned out to cause this problem even when simply browsing. Tried adding comments or versioning to service-worker.published.js but that didn't help. I'm using Blazor version 3.2.1.

With PWA. When checking the cache in the browser I do see the latest service-worker.published.js appearing, and a new offline cache does get downloaded. But the browser keeps using the older ones for a reason beyond my understanding.

To remove PWA:

1. Delete the following files from wwwroot:

/wwwroot/manifest.json
/wwwroot/service-worker.js
/wwwroot/service-worker.published.js

2. Delete this line from /wwwroot/index.html

<script>navigator.serviceWorker.register('service-worker.js');</script>

3. Delete those lines from your csproj file

<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />

Answer 2

The cache issue is pretty strange. I had a lot of trouble solving it as well and what seemed to work was that I in Chrome installed it as an app when it had loaded the old cache. I could do the force full refresh, but as soon as I did a new regular refresh it would go back to the old DLL cache. But after installing it as an app in Chrome, inside that app which I could uninstall it, and it also had the option to remove it from Chrome as well. Then it finally began loading my new version of the app... where I had done as Waleed Al Harthi suggests, to remove PWA and avoid this issue in the future.

Answer 3

Exactly like you do it. But of cause there are also other ways.

1. Press F12 in the Browser -> Select Network -> Check Disable cache
2. Press F12 in the Browser -> In developer mode R Click on reload -> Select hard reload
3. Press ctrl+shift+R to hard reload
4. Your way but create a shortcut for it.
5. Disable cache with code (not recommended and i would have to lookup how)

Answer 4

Enable it as a PWA

Then you can control the cache with a property in your project. The client will cache your code until you tell it to update - the user will be told there is an update and should reload the page - at this point it will update.