Building the asset-manifest.json precache manifest for PWA

[steveoh]

I have added the default service worker from the pwa templates for CRA. I'm using an npm package that requires me to copy files in to a public/assets folder and inside that folder are a few more chunks that the package might use. These files are already bundled etc and are ready to be imported by a worker registered by the 3rd party package. The default build of the CRA application generates an asset-manifest.json file via magic and I would like to be able to have some input as to what ends up in that file.

My main concern is getting the chunks from the assets folder in to the manifest so that the service workers precache routine will pick them up and the app can work a little better offline.

My second concern is that there are a lot of license chunks in the manifest and they get downloaded by the service worker when precaching and do not provide any value to the application. I would like to be able to filter those out.

Since the service worker uses self.__WB_MANIFEST to precache, am I able to run a post build npm step to modify the generated asset-manifest.json file or is that too late? Do the values behind self.__WB_MANIFEST need to be set during the build so the built service worker has the correct data in it?

Lets discuss!

[steveoh]

I am able to use craco to replace the ManifestPlugin that generates the manifest so the manifest now contains the items I am interested in and I was able to filter out the license bundles 💯 But the items do not get injected in to the built service worker 👎 I suspect this is because the files I am trying to add are not run through webpack and do not have the extra metadata?

Then some of the items in the manifest that do get precached by the service worker have 0 bytes in the browser cache.

I sure hope someone reads this and has some ideas as to my follies.

[steveoh]

Option 2 was to create the service worker outside of the cra build step and I made some progress doing that to where the service-worker.js file precache has an array of all the items I am interested in 💯 But I am not sure how to bundle the service worker so that it no longer has the import statements etc 👎 I tried using the webpack-cli but that file did not execute properly in the browser 👎 Using the workbox cli I am able to generate a minified service worker with all the routes i'd like to precache 💯 but a lot of the items are 0 content length 👎🏼 what is going on!

I am open to explore either of these options with anyone willing to discuss.