https://github.com/liuderchi/sw-precache-cra
👷 Customize your service worker in create react app without `npm run eject`
https://github.com/liuderchi/sw-precache-cra
cli create-react-app service-worker service-worker-precache sw-precache
Last synced: about 1 year ago
JSON representation
👷 Customize your service worker in create react app without `npm run eject`
- Host: GitHub
- URL: https://github.com/liuderchi/sw-precache-cra
- Owner: liuderchi
- License: mit
- Created: 2018-06-07T16:03:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-04-12T22:55:13.000Z (about 4 years ago)
- Last Synced: 2025-03-18T14:44:40.164Z (about 1 year ago)
- Topics: cli, create-react-app, service-worker, service-worker-precache, sw-precache
- Language: JavaScript
- Homepage: https://sw-precache-cra-demo-cra-contributors.netlify.com/
- Size: 168 KB
- Stars: 22
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sw-precache-cra
👷 Customize your service worker in create react app without `npm run eject`
## The Problem
Create-react-app provides built-in `service-worker.js` but _when you want to extend it_ \
(e.g. to cache REST API response) you need to do `npm run eject` and maintain more configs.
Sometimes we just want to enjoy customization but keep those big configs unchanged. \
This cli tool helps you achieve this with ease.
## Demo
https://sw-precache-cra-demo-cra-contributors.netlify.com/
A page caching GitHub API response with [one simple config][sw-config]. Done in [4 steps][examples-sw-precache-cra]
## Extend Service Worker in Create React App in 2 steps
1. `$ npm i -S sw-precache-cra`
2. Edit the `build` script in `package.json`
There are 2 examples:
💡 If you want your service worker _cache API response with url `/messages`_:
concat the build script
```diff
"scripts": {
"start": "react-scripts start",
- "build": "react-scripts build",
+ "build": "react-scripts build && sw-precache-cra --config sw-config.js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
```
with one additional js module having any [`sw-precache` configs][sw-precache-configs]:
```js
// sw-config.js
module.exports = {
runtimeCaching: [
{
urlPattern: '/messages',
handler: 'networkFirst',
},
],
};
```
🎉 You've got custom `build/service-worker.js` after `npm run build`
---
💡 If you want to have _Non minified_ `build/service-workder.js` you can do this:
```diff
"scripts": {
"start": "react-scripts start",
- "build": "react-scripts build",
+ "build": "react-scripts build && sw-precache-cra --no-minify",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
```
🎉 You've got Un-minified `build/service-worker.js` after `npm run build`
## Other API
```bash
$ sw-precache-cra --list-config
# Print current config for sw-precache
# If you do not specify a config file, default config by CRA is printed
#
{ swFilePath: './build/service-worker.js',
cacheId: 'sw-precache-webpack-plugin',
dontCacheBustUrlsMatching: /\.\w{8}\./,
navigateFallback: '/index.html',
navigateFallbackWhitelist: [ /^(?!\/__).*/ ],
staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],
staticFileGlobs:
[ './build/**/**.html',
'./build/static/js/*.js',
'./build/static/css/*.css',
'./build/static/media/**' ],
stripPrefix: './build' }
```
For more APIs please do `sw-precache-cra --help`
## Reference
- [Add more service-worker functionality with create-react-app
](https://stackoverflow.com/questions/47636757/add-more-service-worker-functionality-with-create-react-app)
- [sw-precache README][sw-precache-configs]
- [facebook/create-react-app issue #3132](https://github.com/facebook/create-react-app/issues/3132#issuecomment-330610440)
- [bbhlondon/cra-append-sw
](https://github.com/bbhlondon/cra-append-sw)
## License
[MIT License][mit-license]
[mit-license]: https://liuderchi.mit-license.org/ "mit-license"
[sw-precache-configs]: https://github.com/GoogleChromeLabs/sw-precache#options-parameter "sw-precache-config"
[sw-config]: https://github.com/liuderchi/sw-precache-cra/blob/examples/examples/cra-contributors/sw-config.js
[examples-sw-precache-cra]: https://github.com/liuderchi/sw-precache-cra/commits/examples