https://github.com/ragingwind/next-workbox-webpack-plugin
webpack plugin for Next.js PWA with workbox
https://github.com/ragingwind/next-workbox-webpack-plugin
Last synced: about 1 year ago
JSON representation
webpack plugin for Next.js PWA with workbox
- Host: GitHub
- URL: https://github.com/ragingwind/next-workbox-webpack-plugin
- Owner: ragingwind
- License: mit
- Created: 2018-02-16T09:35:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-12-15T10:46:27.000Z (over 6 years ago)
- Last Synced: 2025-04-18T21:28:12.896Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 75
- Watchers: 3
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# next-workbox-webpack-plugin
> 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.
## Install
```
$ npm install -d next-workbox-webpack-plugin
```
## Usage
```js
const nextWorkboxWebpackPlugin = require('next-workbox-webpack-plugin');
nextWorkboxWebpackPlugin({
// must, see next.config.js below
buildId,
// optional, next.js dist path as compiling. most of cases you don't need to fix it.
distDir: '.next',
// optional, which version of workbox will be used in between 'local' or 'cdn'. 'local'
// option will help you use copy of workbox libs in localhost.
importWorkboxFrom: 'local',
// optional ,whether make a precache manifest of pages and chunks of Next.js app or not.
precacheManifest: true,
// optional, whether delete workbox path generated by the plugin.
removeDir: true,
// optional, path for generating sw files in build, `./static/workbox` is default
swDestRoot: './static/',
// optional, path for serving sw files in build, `./static/workbox` is default
swURLRoot: '/static'
// optional, you can use workbox-build options. except swDest because of output location is fixed in 'static/workbox',
...WorkboxBuildOptions,
});
```
Visit [workbox-build page](https://developers.google.com/web/tools/workbox/modules/workbox-build) for more information.
## Usage in next.config.js
```
const NextWorkboxWebpackPlugin = require('next-workbox-webpack-plugin');
module.exports = {
webpack: (config, {isServer, dev, buildId, config: {distDir}}) => {
if (!isServer && !dev) {
config.plugins.push(new NextWorkboxWebpackPlugin({
distDir,
buildId
}))
}
return config
}
}
```
## How it works
### Custom Server
- Only works in `NOT dev mode`. You can't test with `next` and `next start`
- To serve `sw.js`, you need [custom server with custom route](https://github.com/ragingwind/next-workbox-webpack-plugin/blob/master/bin/server.js)
- 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
- All of files will be generated under `/static/workbox` because of exporting. You might need to add the path to gitignore.
```
static/workbox
├── next-precache-manifest-d42167a04499e1887dad3156b93e064d.js
├── sw.js
└── workbox-v3.0.0-beta.0
├── workbox-background-sync.dev.js
├── ...
├── workbox-sw.js
```
- For more information, please refer to test and [Get Started With Workbox For Webpack](https://goo.gl/BFQxuo)
### Now 2.0
To use this plugin on now 2.0, you should have more work below
1. Using fixed build id with `generateBuildId`. It will be used at path of sw asserts
2. 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
```
const NextWorkboxWebpackPlugin = require('next-workbox-webpack-plugin');
module.exports = {
webpack: (config, { isServer, dev, buildId, config: { distDir } }) => {
if (!isServer && !dev) {
config.plugins.push(
new NextWorkboxWebpackPlugin({
importWorkboxFrom: 'cdn',
distDir,
buildId,
// destination root for sw assets, sw.js
swDestRoot: '.next/static/my-build-id/pages',
// root url for sw.js
swURLRoot: '_next/static/my-build-id/pages'
})
);
}
return config;
},
generateBuildId: async () => {
return 'my-build-id'
}
};
```
3. Update your routes for sw.js
```
{
"version": 2,
"routes": [{ "src": "/sw.js", "dest": "_next/static/my-build-id/pages/sw.js" }],
"builds": [{ "src": "next.config.js", "use": "@now/next" }]
}
```
4. type `now`, and congrats!
### Examples
- [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
- [HNPWA](https://github.com/ragingwind/next-workbox-webpack-plugin/tree/master/examples/hnpwa): Simple HNPWA apps with Next.js
## License
MIT © [Jimmy Moon](https://ragingwind.me)