I am attempting to implement a service worker for a boilerplate project I'm working on (https://github.com/jonnyasmar/gravity-bp feedback welcome!), but I've hit a snag :(

Problem:

I'm serving the index.html for this boilerplate virtually as an interpreted Twig template via ExpressJS. However, because I'm generating the service worker assets at build time and that is where I'm pointing it to the cacheable static assets, I can't figure out how to tell the service worker that I want it to cache the virtual index.html file served by ExpressJS at runtime.

My most successful attempts successfully cache all static assets (including the asset-manifest.json generated at build time), but will not cache a virtual index.html .

If I convert it to a static html file, the service worker does successfully cache it.

Please be sure to upvote this question to help get some visibility if you are interested in the answer!

Questions:

Is there a way to correct my code to accomplish this? Is there anything wrong with doing it this way? If yes to #2, how would you recommend handling this and why?

Relevant code:

webpack.config.js :

output: { filename: '[name].js', chunkFilename: '[chunkhash].js', path: path.resolve(__dirname, 'public'), publicPath: '/' }, plugins: { new ManifestPlugin({ fileName: 'asset-manifest.json', }), new SWPrecacheWebpackPlugin({ cacheId: 'gravity-bp', dontCacheBustUrlsMatching: /\.\w{8}\./, filename: 'sw.js', minify: true, navigateFallback: 'index.html', stripPrefix: 'public/', swFilePath: 'public/sw.js', staticFileGlobs: [ 'public/index.html', 'public/**/!(*map*|*sw*)', ], }) }

sw.ts :

const swUrl: string = 'sw.js'; export const register = (): void =>{ if(process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator){ const sw: ServiceWorkerContainer = navigator.serviceWorker; sw.register(swUrl).then(registration =>{ registration.onupdatefound = (): any =>{ const installer: ServiceWorker = registration.installing; installer.onstatechange = (): any =>{ if(installer.state === 'installed'){ if(sw.controller){ console.log('New content available.'); }else{ console.log('Content cached for offline use.'); } } }; }; }).catch((error) =>{ console.error('Failed to register service worker:', error); }); } }; export const unregister = (): void =>{ if('serviceWorker' in navigator){ navigator.serviceWorker.ready.then(registration =>{ registration.unregister(); }); } };

server.ts :