Improved caching to exclude server side only resources

This commit is contained in:
Masu Baumgartner
2024-11-03 19:21:46 +01:00
parent 17a4e7ec14
commit 81d8bc45ee

View File

@@ -8,14 +8,20 @@ self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
const cacheNamePrefix = 'offline-cache-'; const cacheNamePrefix = 'offline-cache-';
const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`; const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/ ]; const offlineAssetsInclude = [/\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/];
const offlineAssetsExclude = [ /^service-worker\.js$/ ]; const offlineAssetsExclude = [/^service-worker\.js$/];
// Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'. // Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'.
const base = "/"; const base = "/";
const baseUrl = new URL(base, self.origin); const baseUrl = new URL(base, self.origin);
const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.url, baseUrl).href); const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.url, baseUrl).href);
// Add assets which are only available on the server and should not be cached here
const serverOnlyResources = [
"/api",
"/oauth2"
];
async function onInstall(event) { async function onInstall(event) {
console.info('Service worker: Install'); console.info('Service worker: Install');
@@ -23,7 +29,7 @@ async function onInstall(event) {
const assetsRequests = self.assetsManifest.assets const assetsRequests = self.assetsManifest.assets
.filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url))) .filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))
.filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url))) .filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
.map(asset => new Request(asset.url, { integrity: asset.hash, cache: 'no-cache' })); .map(asset => new Request(asset.url, {integrity: asset.hash, cache: 'no-cache'}));
await caches.open(cacheName).then(cache => cache.addAll(assetsRequests)); await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
} }
@@ -39,12 +45,17 @@ async function onActivate(event) {
async function onFetch(event) { async function onFetch(event) {
let cachedResponse = null; let cachedResponse = null;
if (event.request.method === 'GET') { if (event.request.method === 'GET') {
// For all navigation requests, try to serve index.html from cache, // For all navigation requests, try to serve index.html from cache,
// unless that request is for an offline resource. // unless that request is for an offline resource.
// If you need some URLs to be server-rendered, edit the following check to exclude those URLs
const shouldServeIndexHtml = event.request.mode === 'navigate' const path = new URL(event.request.url).pathname;
&& !manifestUrlList.some(url => url === event.request.url);
const shouldServeIndexHtml =
event.request.mode === 'navigate' &&
!manifestUrlList.some(url => url === event.request.url) &&
!serverOnlyResources.some(url => path.startsWith(url)); // Check for server side assets
const request = shouldServeIndexHtml ? 'index.html' : event.request; const request = shouldServeIndexHtml ? 'index.html' : event.request;
const cache = await caches.open(cacheName); const cache = await caches.open(cacheName);