Blazor - Excluding Files from PWA Asset Cache
source link: https://codyanhorn.tech/blog/blazor/2021/03/24/Blazor-Excluding-Files-from-PWA-Asset-Cache.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Blazor - Excluding Files from PWA Asset Cache
24 Mar 2021 - Cody Merritt Anhorn
In this quick article we will go over how to exclude a files from the Progressive Web Application asset cache.
As part of my deployments for my Blazor Wasm application, I wanted to support the PWA aspect but the way that the application gets its appsettings.json was causing issues with the SHA integrity check. Since I inject my own configuration, overriding the whole appsettings.json, this caused issues with the the SHA integrity check. This failure can cause the whole request tree to fail, so in turn causing the cache to become stale.
Example
What I found is that the provided service-worker for a production environment has logic to exclude files from verification already. As shown below, we just add our own file regular expressions to the array offlineAssetsExclude
.
// ... Removed for Brevity
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$/ ];
// Here is our updated with appsettings.json and version.js excluding.
const offlineAssetsExclude = [ /^service-worker\.js$/, /^appsettings\.json$/, /^version\.js$/ ];
// This is the Original
// 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)))
// Here is where the files are removed
.filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
.map(asset => new Request(asset.url, { integrity: asset.hash }));
await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
}
// ... Removed for Brevity
Categories: blog blazor
Tags: .NET C# Blazor Wasm PWA
Cody Merritt Anhorn | All Rights Reserved | Privacy Policy
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK