@axah/next-workbox-webpack-plugin

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

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.

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
• 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

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: You can learn how to use the webpack plugin basically
• HNPWA: Simple HNPWA apps with Next.js

License

MIT © Jimmy Moon