Configuring

There are options you can use to customize the behavior of this plugin:

const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
  // disable: process.env.NODE_ENV === "development",
  // register: true,
  // scope: "/app",
  // sw: "service-worker.js",
  //...
});

// Your Next config is automatically typed!
module.exports = withPWA({
  // Your Next.js config
});

• cacheOnFrontendNav — Enable additional route caching when users navigate through pages with next/link.

  • aggressiveFrontEndNavCaching — Cache every <link rel="stylesheet" /> and <script /> on frontend navigation. Requires cacheOnFrontEndNav to be enabled.

• cacheStartUrl — Turn on caching for the start URL.

  • dynamicStartUrl — If your start URL returns different HTML document under different states (such as logged in and not logged in), this should be set to true if you also use cacheStartUrl. Effective only when cacheStartUrl is set to true.

  • dynamicStartUrlRedirect — If your start URL redirects to another route such as /login, it's recommended to specify this redirected URL for the best user experience. Effective when dynamicStartUrl is set to true.

• customWorkerSrc — Change the directory in which next-pwa looks for a custom worker implementation to import into the service worker.

• customWorkerDest — The output directory of the custom worker.

• customWorkerPrefix — The custom worker's output filename prefix.

• disable — Whether next-pwa should be disabled.

• dest — The output directory of the service worker. Relative to Next.js's root directory.

• extendDefaultRuntimeCaching — Extend the default runtimeCaching array. Only effective when runtimeCaching is specified.

• fallbacks — Configure routes to be precached so that they can be used as a fallback when fetching a resource from both the cache and the network fails. If you just need a fallback document, simply create pages/_offline.tsx or app/~offline/page.tsx.

• publicExcludes — An array of glob pattern strings to exclude files in the public folder from being precached.

• scope — URL scope for PWA. Defaults to basePath in next.config.js. Set to /foo/ so that paths under /foo/ are PWA while others are not.

• sw — The service worker's output filename.

• register — Whether next-pwa should automatically register the service worker. Set this to false if you want to register the service worker yourself.

• reloadOnOnline — Reload the app when it has gone back online.

next-pwa uses workbox-webpack-plugin under the hood. As such, its options are also available:

const withPWA = require("@ducanh2912/next-pwa").default({
  // Your other options,
  workboxOptions: {
    // Workbox options go here...
  },
});

module.exports = withPWA({
  // Your Next.js config
});

next-pwa provides a list of caching strategies out of the box. You can also write your own list like so:

const withPWA = require("@ducanh2912/next-pwa").default({
  // Your other options,
  extendDefaultRuntimeCaching: true,
  workboxOptions: {
    runtimeCaching: [
      // Your runtimeCaching array
    ],
  },
});

module.exports = withPWA({
  // Your Next.js config
});