Open alzeih opened 3 years ago
Looking at how this might work, I found:
The documentation for workbox-webpack-plugin.InjectManifest says it supports the config parameter include
:
I think this could perhaps have a RegExp for adding static files from the public folder to the precache manifest?
bump :)
For a Create React App web application with a service worker, I'd like to be able to precache and route static resources like images in a way that is flexible to changes. These are resources that are not known to webpack, but are in the public folder. I want to achieve this without having to eject.
In my case these static resources should be always available to a Progressive Web App, so a runtime caching strategy is not sufficient. They can't be included with webpack as the filenames are from a json file, so are loaded dynamically.
Describe the solution you'd like
Being able to specify additional static resources so they are added to the workbox manifest as a default feature of Create React App, using the inject manifest functionality of workbox.
Describe alternatives you've considered
I tried this with workbox-cli. I installed workbox-cli with
npm install workbox-cli
, and created aworkbox-config.js
file in the project's root directory with:Note: this file is based off one generated by
npx workbox wizard
with some changes.In my
src/service-worker.js
, I added the line (just after the other precacheAndRoute) that matches theworkbox-config.js
:Note: don't use a injection point name that contains
self.__WB_MANIFEST
e.g.:self.__WB_MANIFEST_CUSTOM
- this will not work as expected!I changed the build command in
package.json
to:This lets me select static resources like images matching the
globPatterns
from theglobDirectory
, and add them to a separate workbox precache manifest that is generated dynamically. This means the revision field for each url is set automatically too, and the list of files is kept up to date whennpm run build
is run.I also considered using this method as a one off and writing to
src/service-worker.js
instead ofbuild/service-worker.js
, but I wanted changes to be handled automatically by build scripts.Additional context
I've seen other solutions using react-app-rewired and craco, but I really wanted a solution that worked with Create React App, so I could continue using a (mostly) supported configuration.
I'm still learning how this works, so there may be a better workaround for this too. I hope that a workaround won't be needed if this is supported by Create React App.