{"id":26447319,"url":"https://github.com/davejm/react-app-rewire-workbox","last_synced_at":"2025-03-18T13:51:45.299Z","repository":{"id":56755879,"uuid":"125570356","full_name":"davejm/react-app-rewire-workbox","owner":"davejm","description":"Customise the service worker for create-react-app apps without ejecting - using Google's Workbox webpack plugins instead of the old sw-precache","archived":false,"fork":false,"pushed_at":"2022-12-19T05:37:07.000Z","size":18,"stargazers_count":46,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-06T11:48:10.545Z","etag":null,"topics":["create-react-app","progressive-web-app","pwa","react","react-app-rewire","react-app-rewired","service-worker","webpack","workbox","workbox-webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davejm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-16T21:11:54.000Z","updated_at":"2023-10-23T13:30:29.000Z","dependencies_parsed_at":"2023-01-29T20:45:51.613Z","dependency_job_id":null,"html_url":"https://github.com/davejm/react-app-rewire-workbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davejm%2Freact-app-rewire-workbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davejm%2Freact-app-rewire-workbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davejm%2Freact-app-rewire-workbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davejm%2Freact-app-rewire-workbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davejm","download_url":"https://codeload.github.com/davejm/react-app-rewire-workbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244227401,"owners_count":20419240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","progressive-web-app","pwa","react","react-app-rewire","react-app-rewired","service-worker","webpack","workbox","workbox-webpack-plugin"],"created_at":"2025-03-18T13:51:43.329Z","updated_at":"2025-03-18T13:51:45.292Z","avatar_url":"https://github.com/davejm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-app-rewire-workbox\n\n[![npm](https://img.shields.io/npm/v/react-app-rewire-workbox.svg)](https://www.npmjs.com/package/react-app-rewire-workbox)\n\nAdd 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**.\n\nBy 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!\n\nCreate 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.\n\nThis plugin will remove the SWPrecacheWebpackPlugin from the Webpack plugin configuration and add the Workbox `GenerateSW` and `InjectManifest` plugin with your desired configuration.\n\n## Installation\n\n```sh\nyarn add workbox-webpack-plugin # OR npm install --save workbox-webpack-plugin\nyarn add react-app-rewire-workbox # OR npm install --save react-app-rewire-workbox\n\n# If you don't have it already already, you also need:\nyarn add react-app-rewired # OR npm install --save react-app-rewired\n```\n\n## Usage\n\n1. 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):\n\n```js\n/* config-overrides.js */\nconst {rewireWorkboxGenerate} = require('react-app-rewire-workbox');\n\nmodule.exports = function override(config, env) {\n  if (env === \"production\") {\n    console.log(\"Production build - Adding Workbox for PWAs\");\n    config = rewireWorkboxGenerate()(config, env);\n  }\n\n  return config;\n};\n```\n\n2. Replace 'react-scripts' with 'react-app-rewired' in package.json\n\n```json\n  \"scripts\": {\n    \"start\": \"react-app-rewired start\",\n    \"build\": \"react-app-rewired build\",\n    \"test\": \"react-app-rewired test --env=jsdom\"\n  },\n```\n\nThat's it, you now have Workbox for all your service worker / 'progressive web app' needs!!\n\n\n## Advanced Usage / Configuration\n\nTwo 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).\n\nIf 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.\n\n```js\nconst {rewireWorkboxInject, defaultInjectConfig} = require('react-app-rewire-workbox');\nconst path = require('path');\n\nmodule.exports = function override(config, env) {\n  if (env === \"production\") {\n    console.log(\"Production build - Adding Workbox for PWAs\");\n    // Extend the default injection config with required swSrc\n    const workboxConfig = {\n      ...defaultInjectConfig,\n      swSrc: path.join(__dirname, 'src', 'custom-sw.js')\n    };\n    config = rewireWorkboxInject(workboxConfig)(config, env);\n  }\n\n  return config;\n};\n\n```\n\nFor your convenience the default configs for both functions are also exported so you can easily override them. They are exported as `defaultGenerateConfig` and `defaultInjectConfig`.\n\n## License\n\nLicensed under the MIT License, Copyright ©️ 2018 David Moodie. See [LICENSE](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavejm%2Freact-app-rewire-workbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavejm%2Freact-app-rewire-workbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavejm%2Freact-app-rewire-workbox/lists"}