How to avoid loading all the html files when PWA loading?

[ElderJames]

I found that all the html files would be loaded, but I only want just the current one be loaded.

[jsakamoto]

Hi @ElderJames,

I found that all the html files would be loaded

The wwwroot/service-worker-published.js file generated by the default project template does that. By modifying the wwwroot/service-worker-published.js file, you can make the app load only specified HTML files for offline access.

For example, you can see the following line in your wwwroot/service-worker-published.js file.

const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/ ];
                                                             // 👆 Look here.

As you can see in it, all of the HTML files, including static pre-rendered, are specified for offline assets due to the regex pattern, /\.html/. So if you change that regex pattern from /\.html/ to /^index\.html$/, your app must not load HTML files except for the root index.html file.

const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /^index\.html$/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/ ];
                                                             // 👆 Change here to like this.

Honestly, I have not verified it, but I believe it will work.