{"id":17948812,"url":"https://github.com/cansin/next-with-workbox","last_synced_at":"2025-03-24T22:35:35.077Z","repository":{"id":39890564,"uuid":"262282269","full_name":"cansin/next-with-workbox","owner":"cansin","description":"Higher order Next.js config to generate service workers","archived":false,"fork":false,"pushed_at":"2023-03-15T01:18:27.000Z","size":1512,"stargazers_count":28,"open_issues_count":6,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T05:07:01.998Z","etag":null,"topics":["nextjs","progressive-web-app","pwa","service-worker","webpack","workbox"],"latest_commit_sha":null,"homepage":null,"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/cansin.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":"SECURITY.md","support":null,"governance":null}},"created_at":"2020-05-08T09:32:11.000Z","updated_at":"2025-03-10T09:20:00.000Z","dependencies_parsed_at":"2023-02-08T07:15:58.838Z","dependency_job_id":null,"html_url":"https://github.com/cansin/next-with-workbox","commit_stats":{"total_commits":39,"total_committers":4,"mean_commits":9.75,"dds":0.1282051282051282,"last_synced_commit":"e5a222a0c091a6523cf15d554c4d041a39099fda"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cansin%2Fnext-with-workbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cansin%2Fnext-with-workbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cansin%2Fnext-with-workbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cansin%2Fnext-with-workbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cansin","download_url":"https://codeload.github.com/cansin/next-with-workbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245366205,"owners_count":20603438,"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":["nextjs","progressive-web-app","pwa","service-worker","webpack","workbox"],"created_at":"2024-10-29T09:10:02.386Z","updated_at":"2025-03-24T22:35:30.048Z","avatar_url":"https://github.com/cansin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-with-workbox\n[![tests](https://github.com/cansin/next-with-workbox/actions/workflows/tests.yml/badge.svg)](https://github.com/cansin/next-with-workbox/actions/workflows/tests.yml)\n[![codeql](https://github.com/cansin/next-with-workbox/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/cansin/next-with-workbox/actions/workflows/codeql-analysis.yml)\n[![size](https://img.shields.io/bundlephobia/minzip/next-with-workbox)](https://bundlephobia.com/result?p=next-with-workbox)\n[![dependencies](https://img.shields.io/librariesio/release/npm/next-with-workbox)](https://libraries.io/npm/next-with-workbox)\n[![downloads](https://img.shields.io/npm/dm/next-with-workbox)](https://www.npmjs.com/package/next-with-workbox)\n[![license](https://img.shields.io/github/license/cansin/next-with-workbox)](https://github.com/cansin/next-with-workbox/blob/master/LICENSE)\n\nHigher order Next.js config to generate a [Workbox service worker](https://developers.google.com/web/tools/workbox).\nIt auto-magically sets up certain aspects like pre-caching `public` folder and cache busting exclusions in order\nto get the most out of Workbox with Next.js.\nHeavily inspired from [shadowwalker/next-pwa](https://github.com/shadowwalker/next-pwa).\n\n## Install\n\n```bash\nnpm install next-with-workbox --save\n# or\nyarn add next-with-workbox\n```\n\n## Basic Usage\n\nUpdate or create `next.config.js` with\n\n```js\nconst withWorkbox = require(\"next-with-workbox\");\n\nmodule.exports = withWorkbox({\n  workbox: {\n    swSrc: \"worker.js\",\n  },\n  // .\n  // ..\n  // ... other Next.js config\n});\n```\n\nAdd `public/sw.js` and `public/sw.js.map` to your `.gitignore`\n\n```git\npublic/sw.js\npublic/sw.js.map\n```\n\nCreate your service worker at `/path/to/your-next-app/worker.js`\n\n```js\nimport { precacheAndRoute } from \"workbox-precaching\";\n\nprecacheAndRoute(self.__WB_MANIFEST);\n```\n\nRegister your service worker at `/path/to/your-next-app/pages/_app.js`:\n\n```js\nimport React, { useEffect } from \"react\";\nimport { Workbox } from \"workbox-window\";\n\nfunction App({ Component, pageProps }) {\n  useEffect(() =\u003e {\n    if (\n      !(\"serviceWorker\" in navigator) ||\n      process.env.NODE_ENV !== \"production\"\n    ) {\n      console.warn(\"Pwa support is disabled\");\n      return;\n    }\n\n    const wb = new Workbox(\"sw.js\", { scope: \"/\" });\n    wb.register();\n  }, []);\n\n  return \u003cComponent {...pageProps} /\u003e;\n}\n\nexport default App;\n```\n\n## Configuration\n\nThere are options you can use to customize the behavior of this plugin\nby adding `workbox` object in the Next.js config in `next.config.js`.\nAlongside those documented `workbox` options below, this library would\nalso pass through any [Workbox plugin options](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin)\nto the appropriate plugin\n\n```js\nconst withWorkbox = require(\"next-with-workbox\");\n\nmodule.exports = withWorkbox({\n  workbox: {\n    dest: \"public\",\n    swDest: \"sw.js\",\n    swSrc: \"worker.js\",\n    force: true,\n  },\n});\n```\n\n### Available Options\n\n- **dest:** string - the destination folder to put generated files, relative to the project root.\n  - defaults to `public`.\n- **swDest:** string - the destination file to write the service worker code to.\n  - defaults to `sw.js`.\n- **swSrc:** string - the input file to read the custom service worker code from. Setting this\n  switches to [InjectManifest](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.InjectManifest) plugin.\n  If not set, [GenerateSW](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW) plugin\n  is used.\n  - defaults to `false`.\n- **force:** boolean - whether to force enable Workbox in dev mode.\n  - defaults to `false`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcansin%2Fnext-with-workbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcansin%2Fnext-with-workbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcansin%2Fnext-with-workbox/lists"}