@axah/next-workbox-webpack-plugin

1.0.0 • Public • Published

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

static/workbox
├── next-precache-manifest-d42167a04499e1887dad3156b93e064d.js
├── sw.js
└── workbox-v3.0.0-beta.0
    ├── workbox-background-sync.dev.js
    ├── ...
    ├── workbox-sw.js

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'
  }
};
  1. 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" }]
}
  1. 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

Package Sidebar

Install

npm i @axah/next-workbox-webpack-plugin

Weekly Downloads

2

Version

1.0.0

License

UNLICENSED

Unpacked Size

12 kB

Total Files

5

Last publish

Collaborators

  • sandrozbinden-axa
  • putnockyt
  • pascaltan
  • thedadi
  • dan-m
  • tico86
  • brukri
  • healthbot
  • andibolleteraxa
  • david_s