Webpack plugin for next with workbox


102.0.04 years ago4 years agoMinified + gzip package size for @engineerapart/next-workbox-webpack-plugin in KB



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 @engineerapart/next-workbox-webpack-plugin


const nextWorkboxWebpackPlugin = require('@engineerapart/next-workbox-webpack-plugin');

    // Should debug mode be forced? If true, this will set workbox.setConfig({ debug: true }); in the service worker
    debug: false,
  // must, you can get it at time time of Next.js compiling
  buildId: '6c071eb6-ab01-47bc-8074-71057afc1f64',
  // 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.
    // if true, your next build will be used to generate the paths.
    // if an array of strings, the next build will be used in addition to the paths you specify.
    // This allows you to add arbitrary URLs to the precache manifest URL list.
  precacheManifest: true | string[],
  // optional, whether delete workbox path generated by the plugin.
    removeDir: true,
    // Where the service worker will be copied to, as well as the workbox bundle, if using importWorkboxFrom = 'local'
    swDestRoot: './static/workbox',
    // The root of the SW url you want generated for the service worker and its scripts. It is recommended to leave this
    // as the default value if you are using importWorkboxFrom = 'local'. If you use 'cdn', this value only determines
    // the folder where `sw.js` is copied to.
    swURLRoot: '/static/workbox',
    // This URL is pre-pended to the precached URLs generated by the plugin, e.g.
    // if cdnRoot = 'https://yourpage.com', then the URLs generated look like:
    // https://yourpage.com/_next/7b3a3428-687c-43cb-a835-164b6550c593/page/index.js
    cdnRoot: '',
    // optional, you can use workbox-build options. swDest will be forced to use the basename, e.g. if you provide
    // /some/path/sw.js only `sw.js` will be used, and placed in swDestRoot.
    // All workbox-build config options that are not specified above will be passed through to workbox-build.
    // For all available options, please see
    // https://developers.google.com/web/tools/workbox/modules/workbox-build#generateswstring_mode

Usage in next.config.js

const NextWorkboxWebpackPlugin = require('@engineerapart/next-workbox-webpack-plugin');

module.exports = {
  webpack: (config, {isServer, dev, buildId, config: {distDir}}) => {
    if (!isServer && !dev) {
      config.plugins.push(new NextWorkboxWebpackPlugin({
                swDestRoot: './static', // copy sw.js to your static folder
                swURLRoot: '/static'

    return config

How it works

For Next.js, It contains some of restrictions:

  • Only works in not dev mode and on the custom server which means you can't test with next and next start
  • You need customized server for serving service worker scripts and workbox libraries. For your convenience, test server is in this package.
  • All of files will be generated in static/workbox because of exporting. You might need to add the path to gitignore.
    ├── next-precache-manifest-d42167a04499e1887dad3156b93e064d.js
    ├── sw.js
    └── workbox-v3.0.0-beta.0
      ├── workbox-background-sync.dev.js
      ├── ...
      ├── workbox-sw.js
  • You have to add register service worker script into part of your application
  • For more information, please refer to test and Get Started With Workbox For Webpack


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


MIT © Jimmy Moon MIT © EngineerApart, LLC

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.