next-workbox - npm Package Compare versions

next-workbox

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.1.0-0 to 2.1.0

index.js

		@@ -43,14 +43,7 @@ const { join } = require('path');
		const { webpack, workbox = {} } = nextConfig;
		const registerSW = workbox.registerSW \|\| defaultRegisterSW;

		if (!isServer && !dev) {
		// append server-worker register script to main.js chunk
		const content = typeof registerSW === 'string' ?
		registerSW :
		registerScript(registerSW);
		config.entry = withSWContent(config.entry, content);
		config.entry = withSWContent(config.entry, registerScript(defaultRegisterSW));

		// cleanup params
		delete workbox.registerSW;

		// push workbox webpack plugin
		@@ -57,0 +50,0 @@ config.plugins.push(

package.json

		{
		"name": "next-workbox",
		"version": "2.1.0-0",
		"version": "2.1.0",
		"description": "Next.js plugins for workbox and PWA",
		@@ -5,0 +5,0 @@ "license": "MIT",

106

README.md

		# next-workbox

		> Next.js plugin for workbox
		> Next.js plugin for [workbox](https://developers.google.com/web/tools/workbox/). The plugin help you to use service worker for Next.js and now 2.0

		- `After 2.x, only works with now 2.0 from zeit in production mode`. You can check out after publishing your app to [now](https://zeit.co/now)
		- Built on top of [next-workbox-webpack-plugin](https://github.com/ragingwind/next-workbox-webpack-plugin), you can use [almost all options](https://github.com/ragingwind/next-workbox-webpack-plugin#usage)

		# Installation

		```sh
		npm install --save next-workbox
		npm install --save-dev next-workbox
		```

		or

		```
		yarn add next-workbox
		yarn add -D next-workbox
		```
		@@ -18,100 +22,16 @@

		This next.js plugin powered by [next-workbox-webpack-plugin](https://github.com/ragingwind/next-workbox-webpack-plugin). You can use [almost all options](https://github.com/ragingwind/next-workbox-webpack-plugin#usage) of the webpack plugin except `distDir` and `buildId`. Both thse options are overridden and handled by this plugin.

		```js
		// next.config.js
		const withWorkbox = require('next-workbox')
		const withWorkbox = require('next-workbox');

		module.exports = withWorkbox({
		workbox: {
		// https://github.com/ragingwind/next-workbox-webpack-plugin#usage
		...webpackOptions
		}
		})
		```

		## Register service worker

		To register the service worker script generated by workbox, you must call service worker APIs in your application. There are many ways to do this, but we recommend adding the `<ServiceWoerk>` component provided with this package to a custome `Document` (for more information about using a custom `Document` component, please see [Next's documentation](https://github.com/zeit/next.js/#custom-document)):

		```js
		import Document, {Head, Main, NextScript} from 'next/document'
		import flush from 'styled-jsx/server'
		import ServiceWorker from 'next-workbox/service-worker'

		export default class extends Document {
		render() {
		return (
		<html lang="en">
		<Head/>
		<body>
		<Main />
		<NextScript />
		<ServiceWorker
		src={'/sw.js'}
		scope={'/'}
		unregister={process.env.NODE_ENV !== 'production'}
		/>
		</body>
		</html>
		)
		}
		}
		```

		An alternative method to do this would be to use the plugin directly by setting it up to register the service worker code into the main chunk of your application. This can easily be done by adding a `registerSW` property to your `next.config.js`. `registerSW` takes either an options or a string with a path to the script:

		```js
		// next.config.js
		const withWorkbox = require('next-workbox')

		module.exports = withWorkbox({
		workbox: {
		registerSW: {
		src: '/static/sw.js',
		scope: '/static/'
		}
		generateBuildId: async () => {
		// You must have own custom build id
		return 'my-build-id';
		}
		})
		});
		```

		or with string content

		```js
		// next.config.js
		const withWorkbox = require('next-workbox')

		module.exports = withWorkbox({
		workbox: {
		registerSW: readFileSync('./register-sw.js')
		}
		})
		```

		## Default src and scope of service worker

		Out of the box, this plugin doesn't allow changing the src and\or scope of service worker. Rather, it uses the default path and scope, under `static/workbox`, which is generated by this plugin. As a result, an additional http header of `'Service-Worker-Allowed', '/'` must be set by the server to cache the files on the root. Here is the sample code for that.

		```js
		app.prepare().then(() => {
		createServer((req, res) => {
		if (req.url.startsWith('/static/')) {
		res.setHeader('Service-Worker-Allowed', '/')
		app.serveStatic(req, res, join(root, `.${req.url}`))
		} else {
		handle(req, res, req.url)
		}
		}).listen(port, err => {
		if (err) {
		throw err
		}
		console.log(`> Ready on http://localhost:${port}`)
		})
		})
		```

		If you do need to make changes these settings, you can use your own script to register the service worker as outlined above.

		## License

		MIT © [Jimmy Moon](https://ragingwind.me)
		MIT © [Jimmy Moon](https://jimmymoon.dev)

service-worker.js

Fixed alerts

Improved metrics

Worsened metrics