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

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 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'
  }
};

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!

Examples

Hello PWA: You can learn how to use the webpack plugin basically
HNPWA: Simple HNPWA apps with Next.js

License

compiler.plugin is not a function , with Next.js 12 which use Webpack 5 by default

> Build error occurred
TypeError: compiler.plugin is not a function
    at NextWorkboxWebpackPlugin.apply (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next-workbox-webpack-plugin\index.js:153:14)
    at createCompiler (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\compiled\webpack\bundle5.js:133259:12)
    at create (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\compiled\webpack\bundle5.js:133320:16)
    at webpack (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\compiled\webpack\bundle5.js:133344:32)
    at Object.f [as webpack] (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\compiled\webpack\bundle5.js:88032:16)
    at D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\build\compiler.js:31:40
    at new Promise (<anonymous>)
    at Object.runCompiler (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\build\compiler.js:30:12)
    at D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\build\index.js:369:59
    at Span.traceAsyncFn (D:\Work\Edify\Frontend\edifytalent.presentation.web\node_modules\next\dist\trace\trace.js:79:26)
error Command failed with exit code 1.

Next.js 12 uses webpack5 completely and does not support webpack 4. next-workbox-webpack-plugin uses compiler.plugin it the apply function in index.js . compiler.plugin is removed from webpack 5, should use compiler.hooks.done.tap instead.

use compiler.hooks.done.tap as mentioned here.

ragingwind / next-workbox-webpack-plugin Goto Github PK

next-workbox-webpack-plugin's Introduction

next-workbox-webpack-plugin

Install

Usage

Usage in next.config.js

How it works

Custom Server

Now 2.0

Examples

License

next-workbox-webpack-plugin's People

Contributors

Stargazers

Watchers

Forkers

next-workbox-webpack-plugin's Issues

Recommend Projects

Recommend Topics

Recommend Org