Fix Blazor WebAssembly PWA integrity checks
I recently released a how-to article and video on deploying Blazor WASM to GitHub Pages. In this content I demonstrated how to deploy Blazor WASM to GitHub pages manually and automatically using GitHub Actions, but I did not have the PWA feature enabled. When you create a Blazor WASM application, you can pass a --pwa flag to include PWA support.
It turns out that the PWA feature breaks in those how-to's. The service worker requests all the files with integrity checking, and in those how-to's the base-tag of the index.html file is modified. This modification causes the integrity check to fail because the pre-calculated hash stored in service-worker-assets.js for index.html mismatches. The result was the following error:
This issue will surface when any modification is made to the files listed in the service-worker-assets.js file. The service-worker-assets.js file is generated during publish and any modification made to the listed files after publish will cause the integrity check to fail.
Solution #
Microsoft's documentation has some guidance on how to detect and troubleshoot this issue. You have the option to disable the integrity checking altogether, but you will lose the safety guarantees offered by integrity checking.
Alternatively, you can calculate the new hash for all the modified files and update them in the service-worker-assets.js file. You can calculate the hash with with these PowerShell commands:
Alternatively, you can use openssl to generate the hash in bash:
Manually going over each file and updating the hash in the service-worker-assets.js file can be painful, so here's a PowerShell script and a Bash script that will iterate over every file listed in service-worker-assets.js.
If the hash is different, the hash is automatically updated in service-worker-assets.js:
PowerShell:
Bash:
The Current Working Directory (CWD) has to be at the wwwroot folder of the published application. You can now integrate these scripts into your build process or continuous integration pipeline, as done in this GitHub Actions workflow:
Hopefully this helps and saves you some valuable time, cheers!
