npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@engineerapart/next-workbox

v2.0.0

Published

Next.js plugins for workbox and PWA

Downloads

29

Readme

next-workbox

Next.js plugin for workbox

Installation

npm install --save @engineerapart/next-workbox

or

yarn add @engineerapart/next-workbox

Usage

This next.js plugin powered by next-workbox-webpack-plugin. which mean you can use almost options on the webpack plugin except distDir and buildId. The two of options will be overwriten and handled in this next.js plugin.

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

module.exports = withWorkbox({
    workbox: {
      // https://github.com/engineerapart/next-workbox-webpack-plugin#usage
      ...webpackOptions,
      // register server worker script with default value or your own content
      registerSW: true, // boolean or string
      // Allow SW to be registered on build even on dev builds
      includeDev: false, // default false
    }
})

Register server worker

To register service worker script generated by workbox, you must call service worker APIs at your application. There are many ways out there, but you can use our solution to achieve in convinience way. first is declaring <ServiceWoerk> component to the class derived from Document (for more information about custom Document component, please visit official document). For example,

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>
		)
	}
}

alternative method is that you can set the option to append register service worker code into main chunk of your application. you can config at next.config.js with registerSW. registerSW could be accepted string content of your own service worker regster script. For instance,

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

module.exports = withWorkbox({
  workbox: {
    registerSW: true
  }
})

or with string content

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

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

registerSW options

You can also provide an options object to the register script that will generate the Service Worker source url and scope:

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

module.exports = withWorkbox({
  workbox: {
    registerSW: true,
    registerScope: {
      src: '/static/workbox/sw.js',
      scope: '../../'
    },
  }
})

This allows you to customize the path you wish it to use.

Default src and scope of service worker

This plugin doesn't allow you to change src and scope of service worker. we will use default path and scope, under static/workbox, which generated by this plugin. So, http server must set additional http header 'Service-Worker-Allowed', '/' to cache the files on the root. Here is the sample code for that.

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 want to have changes of those, you can use your own regster script for. It's described below section.

License

MIT © Jimmy Moon MIT © EngineerApart, LLC