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.
$ npm install -d next-workbox-webpack-plugin
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 for more information.
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
}
}
- Only works in
NOT dev mode
. You can't test withnext
andnext start
- To serve
sw.js
, you need custom server with custom route. See test server is in this package. - You have to add script of registering service worker 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
To use this plugin on now 2.0, you should have more work below
- Using fixed build id with
generateBuildId
. It will be used at path of sw asserts - Set fixed path for sw assets. one is
swDestRoot
, another isswURLRoot
. 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'
}
};
- 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" }]
}
- type
now
, and congrats!
- Hello PWA: You can learn how to use the webpack plugin basically
- HNPWA: Simple HNPWA apps with Next.js
MIT © Jimmy Moon