Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eolme/next-sw
Use any service worker with nextjs
https://github.com/eolme/next-sw
next nextjs service-worker serviceworker sw
Last synced: about 1 month ago
JSON representation
Use any service worker with nextjs
- Host: GitHub
- URL: https://github.com/eolme/next-sw
- Owner: eolme
- License: mit
- Created: 2022-03-05T18:41:17.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-01T17:14:30.000Z (about 1 year ago)
- Last Synced: 2024-11-02T09:00:23.956Z (about 2 months ago)
- Topics: next, nextjs, service-worker, serviceworker, sw
- Language: TypeScript
- Homepage: https://npm.im/next-sw
- Size: 95.7 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-sw [](https://github.com/eolme/next-sw/blob/master/LICENSE)
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`:
```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`
- `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
- `port: number`
- default to `4000`
- `sideEffects: boolean | string | RegExp | string[] | RegExp[] | ((file: string) => boolean)`
- default to `true`
- `resolve: boolean | 'force'` - patch resolve for worker support
- default to `false`
- set `'force'` to force patch
## Usage
You need to manually register service worker, for example, in `pages/_app.jsx` like this:
```js
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:
```js
'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:
```js
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](https://yarnpkg.com/getting-started/install) for dependency management:
```shell
yarn add -D next-sw
```
## License
next-sw is [MIT licensed](./LICENSE).