11

Blazor - Excluding Files from PWA Asset Cache

 3 years ago
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.
Excluding Files from PWA Asset CacheSkip to main content

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK