Higher order Next.js config to generate a Workbox service worker.
It auto-magically sets up certain aspects like pre-caching public
folder and cache busting exclusions in order
to get the most out of Workbox with Next.js.
Heavily inspired from shadowwalker/next-pwa.
npm install next-with-workbox --save
# or
yarn add next-with-workbox
Update or create next.config.js
with
const withWorkbox = require("next-with-workbox");
module.exports = withWorkbox({
workbox: {
swSrc: "worker.js",
},
// .
// ..
// ... other Next.js config
});
Add public/sw.js
and public/sw.js.map
to your .gitignore
public/sw.js
public/sw.js.map
Create your service worker at /path/to/your-next-app/worker.js
import { precacheAndRoute } from "workbox-precaching";
precacheAndRoute(self.__WB_MANIFEST);
Register your service worker at /path/to/your-next-app/pages/_app.js
:
import React, { useEffect } from "react";
import { Workbox } from "workbox-window";
function App({ Component, pageProps }) {
useEffect(() => {
if (
!("serviceWorker" in navigator) ||
process.env.NODE_ENV !== "production"
) {
console.warn("Pwa support is disabled");
return;
}
const wb = new Workbox("sw.js", { scope: "/" });
wb.register();
}, []);
return <Component {...pageProps} />;
}
export default App;
There are options you can use to customize the behavior of this plugin
by adding workbox
object in the Next.js config in next.config.js
.
Alongside those documented workbox
options below, this library would
also pass through any Workbox plugin options
to the appropriate plugin
const withWorkbox = require("next-with-workbox");
module.exports = withWorkbox({
workbox: {
dest: "public",
swDest: "sw.js",
swSrc: "worker.js",
force: true,
},
});
-
dest: string - the destination folder to put generated files, relative to the project root.
- defaults to
public
.
- defaults to
-
swDest: string - the destination file to write the service worker code to.
- defaults to
sw.js
.
- defaults to
-
swSrc: string - the input file to read the custom service worker code from. Setting this
switches to InjectManifest plugin.
If not set, GenerateSW plugin
is used.
- defaults to
false
.
- defaults to
-
force: boolean - whether to force enable Workbox in dev mode.
- defaults to
false
.
- defaults to