Allow runtimeCaching option without ejecting
jliebrand opened this issue · 5 comments
This is more of a feature request than a bug. But I love the fact CRA comes with a working SW. However, I'd like like to add another domain to the things which our automatically cached. But I'd really like to not have to eject.
Is there anyway to make the runtimeCaching option available through the package json? Or perhaps a way to get to the SW at runtime to configure it with additional domains to cache?
One way to solve is in the same manner as c-r-a deals with sass, e.g. does not create built-in solution, but creates easy-to-integrate outside solution
yarn build && yarn regenerate-sw
where yarn regenerate-sw will read contents of manifest.json, add more resources (what ever you need) and generate new service-worker.js
ah great; i'll look in to that (although slightly unclear right now how i'd "add more resources" or indeed change the runtimeCaching option for specific domains)
I'm looking into this too (have similar issue). Custom SW is just a tip of the iceberg. There are also UI problems, and need to choose proper strategy.
This can be a starting point https://github.com/codebusking/next-hnpwa-guide-kit/blob/master/generate-sw.js
UPD:
package.json
"build": "react-scripts build && yarn run generate-sw",
"generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js"scripts/sw-precache-config.js
module.exports = {
staticFileGlobs: [
'build/static/css/*.css',
'build/static/js/*.js',
'build/index.html',
// add more here
],
stripPrefix: 'build',
runtimeCaching: [{
urlPattern: /images/,
handler: 'cacheFirst'
}]
};@Swizec you might be interested in this issue too.
Also important bits:
- forbid http caching of
service-worker.jswith http headers #3082 - it is important to show user notifications about new content (those that are logged to console). I find material instructions very useful for UX https://material.io/guidelines/components/snackbars-toasts.html#. #2426
I'm using events to pass infor about service worker to UI
console.log('New content is available; please refresh.');
let event = new CustomEvent("serviceNotification", {
detail: {
state: 'newContent'
}
});
window.document.dispatchEvent(event);Other interesting thought: if you use redux you can refresh UI without user action (theoretically, like HMR #2304).