next-sw
Use any service worker with nextjs.
Features
- Easy to use
- No dependencies
- No custom server needed
- Supports
next export
After running next
or next build
, this will generate single file sw.js
in your public folder, which serve statically.
Live reloading and unregistering service worker are supported out of the box during development.
Configuration
There are options you can use to customize the behavior of this plugin in next.config.js
:
const { withServiceWorker } = require('next-sw');
module.exports = withServiceWorker({
name: 'sw.js',
entry: 'worker/entry.ts',
livereload: true
})();
Available Options
-
name: string
- service worker name- default to
sw.js
- default to
-
entry: string
- service worker script entry point -
livereload: boolean
- default to
true
during development - set
livereload: false
to disable live reloading - note: if the option is disabled, you need to use your own implementation of page reload
- default to
-
port: number
- default to
4000
- default to
-
sideEffects: boolean | string | RegExp | string[] | RegExp[] | ((file: string) => boolean)
- default to
true
- default to
-
resolve: boolean | 'force'
- patch resolve for worker support- default to
false
- set
'force'
to force patch
- default to
Usage
You need to manually register service worker, for example, in pages/_app.jsx
like this:
if (typeof window !== 'undefined') {
navigator.serviceWorker.register(process.env.__NEXT_SW, {
scope: process.env.__NEXT_SW_SCOPE
});
}
or if you use appDir
, you need to create a client component with registration:
'use client';
import { useEffect } from 'react';
export const ClientServiceWorkerRegistration = () => {
useEffect(() => {
navigator.serviceWorker.register(process.env.__NEXT_SW, {
scope: process.env.__NEXT_SW_SCOPE
});
}, []);
};
or create a universal one with check:
import { useEffect } from 'react';
export const ServiceWorkerRegistration = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
navigator.serviceWorker.register(process.env.__NEXT_SW, {
scope: process.env.__NEXT_SW_SCOPE
});
}
}, []);
};
Installation
Recommend to use yarn for dependency management:
yarn add -D next-sw
License
next-sw is MIT licensed.