{"id":20073565,"url":"https://github.com/ragingwind/next-workbox-webpack-plugin","last_synced_at":"2025-05-05T21:30:53.797Z","repository":{"id":65411321,"uuid":"121734220","full_name":"ragingwind/next-workbox-webpack-plugin","owner":"ragingwind","description":"webpack plugin for Next.js PWA with workbox","archived":false,"fork":false,"pushed_at":"2019-12-15T10:46:27.000Z","size":38,"stargazers_count":75,"open_issues_count":3,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-18T21:28:12.896Z","etag":null,"topics":[],"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/ragingwind.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-02-16T09:35:52.000Z","updated_at":"2024-03-22T11:15:22.000Z","dependencies_parsed_at":"2023-01-22T06:55:16.852Z","dependency_job_id":null,"html_url":"https://github.com/ragingwind/next-workbox-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fnext-workbox-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fnext-workbox-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fnext-workbox-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fnext-workbox-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ragingwind","download_url":"https://codeload.github.com/ragingwind/next-workbox-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252579993,"owners_count":21771248,"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":[],"created_at":"2024-11-13T14:46:47.290Z","updated_at":"2025-05-05T21:30:53.511Z","avatar_url":"https://github.com/ragingwind.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-workbox-webpack-plugin\n\n\u003e Webpack plugin with workbox, it helps you build a Progressive Web App powered by Next.js. Generating service worker scripts and precache manifest of Next.js's pages and chunks.\n\n\u003cimg width=\"1024\" src=\"https://user-images.githubusercontent.com/124117/36341030-4b040398-142b-11e8-9de7-41d3dbe55427.png\"\u003e\n\n## Install\n\n```\n$ npm install -d next-workbox-webpack-plugin\n```\n\n## Usage\n\n```js\nconst nextWorkboxWebpackPlugin = require('next-workbox-webpack-plugin');\n\nnextWorkboxWebpackPlugin({\n  // must, see next.config.js below\n  buildId,\n  // optional, next.js dist path as compiling. most of cases you don't need to fix it.\n  distDir: '.next',\n  // optional, which version of workbox will be used in between 'local' or 'cdn'. 'local'\n  // option will help you use copy of workbox libs in localhost.\n  importWorkboxFrom: 'local',\n  // optional ,whether make a precache manifest of pages and chunks of Next.js app or not.\n  precacheManifest: true,\n  // optional, whether delete workbox path generated by the plugin.\n  removeDir: true,\n  // optional, path for generating sw files in build, `./static/workbox` is default\n  swDestRoot: './static/',\n  // optional, path for serving sw files in build, `./static/workbox` is default\n  swURLRoot: '/static'\n  // optional, you can use workbox-build options. except swDest because of output location is fixed in 'static/workbox',\n  ...WorkboxBuildOptions,\n});\n```\nVisit [workbox-build page](https://developers.google.com/web/tools/workbox/modules/workbox-build) for more information.\n\n## Usage in next.config.js\n\n```\nconst NextWorkboxWebpackPlugin = require('next-workbox-webpack-plugin');\n\nmodule.exports = {\n  webpack: (config, {isServer, dev, buildId, config: {distDir}}) =\u003e {\n    if (!isServer \u0026\u0026 !dev) {\n      config.plugins.push(new NextWorkboxWebpackPlugin({\n        distDir,\n        buildId\n      }))\n    }\n\n    return config\n  }\n}\n```\n\n## How it works\n\n### Custom Server\n\n- Only works in `NOT dev mode`. You can't test with `next` and `next start`\n- To serve `sw.js`, you need [custom server with custom route](https://github.com/ragingwind/next-workbox-webpack-plugin/blob/master/bin/server.js)\n- You have to [add script of registering service worker](https://github.com/ragingwind/next-workbox-webpack-plugin/blob/master/examples/hello-pwa/pages/index.js) into part of your application\n- All of files will be generated under `/static/workbox` because of exporting. You might need to add the path to gitignore.\n\n```\nstatic/workbox\n├── next-precache-manifest-d42167a04499e1887dad3156b93e064d.js\n├── sw.js\n└── workbox-v3.0.0-beta.0\n    ├── workbox-background-sync.dev.js\n    ├── ...\n    ├── workbox-sw.js\n```\n- For more information, please refer to test and [Get Started With Workbox For Webpack](https://goo.gl/BFQxuo)\n\n### Now 2.0\n\nTo use this plugin on now 2.0, you should have more work below\n\n1. Using fixed build id with `generateBuildId`. It will be used at path of sw asserts\n2. Set fixed path for sw assets. one is `swDestRoot`, another is `swURLRoot`. For service sw.js and manifest on now 2.0, we have to put those of files under `.next` as a part of app\n\n```\nconst NextWorkboxWebpackPlugin = require('next-workbox-webpack-plugin');\n\nmodule.exports = {\n\twebpack: (config, { isServer, dev, buildId, config: { distDir } }) =\u003e {\n\t\tif (!isServer \u0026\u0026 !dev) {\n\t\t\tconfig.plugins.push(\n        new NextWorkboxWebpackPlugin({\n          importWorkboxFrom: 'cdn',\n          distDir,\n          buildId,\n          // destination root for sw assets, sw.js\n          swDestRoot: '.next/static/my-build-id/pages',\n          // root url for sw.js\n          swURLRoot: '_next/static/my-build-id/pages'\n        })\n      );\n    }\n\t\treturn config;\n  },\n  generateBuildId: async () =\u003e {\n    return 'my-build-id'\n  }\n};\n```\n\n3. Update your routes for sw.js\n\n```\n{\n\t\"version\": 2,\n\t\"routes\": [{ \"src\": \"/sw.js\", \"dest\": \"_next/static/my-build-id/pages/sw.js\" }],\n\t\"builds\": [{ \"src\": \"next.config.js\", \"use\": \"@now/next\" }]\n}\n```\n\n4. type `now`,  and congrats!\n\n\u003cimg width=\"1424\" alt=\"\" src=\"https://user-images.githubusercontent.com/124117/63063243-cf62ab00-bf36-11e9-8d46-8835af16162f.png\"\u003e\n\n\n### Examples\n\n- [Hello PWA](https://github.com/ragingwind/next-workbox-webpack-plugin/tree/master/examples/hello-pwa): You can learn how to use the webpack plugin basically\n- [HNPWA](https://github.com/ragingwind/next-workbox-webpack-plugin/tree/master/examples/hnpwa): Simple HNPWA apps with Next.js\n\n## License\n\nMIT © [Jimmy Moon](https://ragingwind.me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fragingwind%2Fnext-workbox-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fragingwind%2Fnext-workbox-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fragingwind%2Fnext-workbox-webpack-plugin/lists"}