├── .gitignore ├── LICENSE ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 David Moodie 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-app-rewire-workbox 2 | 3 | [![npm](https://img.shields.io/npm/v/react-app-rewire-workbox.svg)](https://www.npmjs.com/package/react-app-rewire-workbox) 4 | 5 | Add the [`workbox-webpack-plugin`](https://github.com/GoogleChrome/workbox) to your `create-react-app` app via [`react-app-rewired`](https://github.com/timarney/react-app-rewired) **without having to eject OR fork**. 6 | 7 | By default, create react app uses SWPrecacheWebpackPlugin under the hood to generate a service worker which pre-caches your app shell and assets. sw-precache and sw-toolbox are being phased out in favour of Workbox so ideally we'd like to use Workbox instead! 8 | 9 | Create react app also doesn't let you customise your service worker AT ALL! This plugin allows you to easily use the `GenerateSW` and `InjectManifest` functions from Workbox Webpack plugin. See [here](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) for details on the configuration options for each method. 10 | 11 | This plugin will remove the SWPrecacheWebpackPlugin from the Webpack plugin configuration and add the Workbox `GenerateSW` and `InjectManifest` plugin with your desired configuration. 12 | 13 | ## Installation 14 | 15 | ```sh 16 | yarn add workbox-webpack-plugin # OR npm install --save workbox-webpack-plugin 17 | yarn add react-app-rewire-workbox # OR npm install --save react-app-rewire-workbox 18 | 19 | # If you don't have it already already, you also need: 20 | yarn add react-app-rewired # OR npm install --save react-app-rewired 21 | ``` 22 | 23 | ## Usage 24 | 25 | 1. In the `config-overrides.js` of the root of your project you created for `react-app-rewired` add this code (this example uses the GenerateSW version of Workbox for easy pre-caching functionality): 26 | 27 | ```js 28 | /* config-overrides.js */ 29 | const {rewireWorkboxGenerate} = require('react-app-rewire-workbox'); 30 | 31 | module.exports = function override(config, env) { 32 | if (env === "production") { 33 | console.log("Production build - Adding Workbox for PWAs"); 34 | config = rewireWorkboxGenerate()(config, env); 35 | } 36 | 37 | return config; 38 | }; 39 | ``` 40 | 41 | 2. Replace 'react-scripts' with 'react-app-rewired' in package.json 42 | 43 | ```json 44 | "scripts": { 45 | "start": "react-app-rewired start", 46 | "build": "react-app-rewired build", 47 | "test": "react-app-rewired test --env=jsdom" 48 | }, 49 | ``` 50 | 51 | That's it, you now have Workbox for all your service worker / 'progressive web app' needs!! 52 | 53 | 54 | ## Advanced Usage / Configuration 55 | 56 | Two functions are exported from this module: `rewireWorkboxGenerate` and `rewireWorkboxInject`. For info on how each Webpack plugin works, see the [Google documentation](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). 57 | 58 | If you call either function with no parameters, it will set a default configuration that works well with create-react-app. If you would like to add a custom config, pass it in as the parameter e.g. 59 | 60 | ```js 61 | const {rewireWorkboxInject, defaultInjectConfig} = require('react-app-rewire-workbox'); 62 | const path = require('path'); 63 | 64 | module.exports = function override(config, env) { 65 | if (env === "production") { 66 | console.log("Production build - Adding Workbox for PWAs"); 67 | // Extend the default injection config with required swSrc 68 | const workboxConfig = { 69 | ...defaultInjectConfig, 70 | swSrc: path.join(__dirname, 'src', 'custom-sw.js') 71 | }; 72 | config = rewireWorkboxInject(workboxConfig)(config, env); 73 | } 74 | 75 | return config; 76 | }; 77 | 78 | ``` 79 | 80 | For your convenience the default configs for both functions are also exported so you can easily override them. They are exported as `defaultGenerateConfig` and `defaultInjectConfig`. 81 | 82 | ## License 83 | 84 | Licensed under the MIT License, Copyright ©️ 2018 David Moodie. See [LICENSE](LICENSE) for more information. 85 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const workboxPlugin = require('workbox-webpack-plugin') 2 | 3 | const defaultGenerateConfig = { 4 | exclude: [/\.map$/, /^(?:asset-)manifest.*\.js(?:on)?$/], 5 | navigateFallback: '/index.html', 6 | navigateFallbackBlacklist: [ 7 | new RegExp('^/__'), 8 | new RegExp('/[^/]+\.[^/]+$'), 9 | ], 10 | clientsClaim: true 11 | } 12 | 13 | const defaultInjectConfig = { 14 | exclude: defaultGenerateConfig.exclude 15 | } 16 | 17 | function findSWPrecachePlugin(element) { 18 | return element.constructor.name === 'SWPrecacheWebpackPlugin' 19 | } 20 | 21 | function removeSWPrecachePlugin(config) { 22 | const swPrecachePluginIndex = config.plugins.findIndex(findSWPrecachePlugin) 23 | // Remove the swPrecachePlugin if it was found 24 | if (swPrecachePluginIndex !== -1) { 25 | config.plugins.splice(swPrecachePluginIndex, 1) // mutates 26 | } 27 | } 28 | 29 | function rewireWorkboxGenerate(workboxConfig) { 30 | workboxConfig = workboxConfig || defaultGenerateConfig 31 | return function rewireWorkboxInner(config, env) { 32 | removeSWPrecachePlugin(config) 33 | 34 | // Add the Workbox plugin 35 | config.plugins.push(new workboxPlugin.GenerateSW(workboxConfig)) 36 | 37 | return config 38 | } 39 | } 40 | 41 | function rewireWorkboxInject(workboxConfig) { 42 | workboxConfig = workboxConfig || defaultInjectConfig 43 | return function rewireWorkboxInner(config, env) { 44 | removeSWPrecachePlugin(config) 45 | 46 | // Add the Workbox plugin 47 | config.plugins.push(new workboxPlugin.InjectManifest(workboxConfig)) 48 | 49 | return config 50 | } 51 | } 52 | 53 | module.exports = { 54 | rewireWorkboxGenerate, 55 | rewireWorkboxInject, 56 | defaultGenerateConfig, 57 | defaultInjectConfig 58 | } 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-workbox", 3 | "version": "2.0.1", 4 | "description": "Adds support for service worker generation via Google Workbox webpack plugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "David Moodie", 10 | "license": "MIT", 11 | "peerDependencies": { 12 | "workbox-webpack-plugin": "^3.0.0", 13 | "react-app-rewired": "*" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/davejm/react-app-rewire-workbox" 18 | }, 19 | "keywords": [ 20 | "react-app-rewired", 21 | "react-app-rewire", 22 | "workbox", 23 | "workbox-webpack-plugin", 24 | "webpack", 25 | "create-react-app", 26 | "react", 27 | "service-worker", 28 | "progressive-web-app", 29 | "pwa" 30 | ], 31 | "homepage": "https://github.com/davejm/react-app-rewire-workbox", 32 | "bugs": { 33 | "url": "https://github.com/davejm/react-app-rewire-workbox/issues" 34 | } 35 | } 36 | --------------------------------------------------------------------------------