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

@celio.latorraca/serviceworker-webpack-plugin

v0.3.0

Published

Simplifies creation of a service worker to serve your webpack bundles

Downloads

2

Readme

serviceworker-webpack-plugin

Simplifies creation of a service worker to serve your webpack bundles.

npm version npm downloads Build Status

Dependencies DevDependencies

Installation

npm install serviceworker-webpack-plugin

The problem solved

When building a service worker, you probably want to cache all your assets during the install phase. But in order to do so, you need their names. That's not simple when you are using Webpack:

  • The assets names are non-deterministic when taking advantage of the long term caching.
  • The assets list can even evolve over time as you add splitting points or more resources.
  • You want to be able to use your service worker with the dev-server mode of Webpack.
  • You want to keep the build process as simple as possible.

Setup

1. Add the plugin to your webpack config

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

...

  plugins: [
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, 'src/sw.js'),
    }),
  ],

2. Register the service worker in your main JS thread

import runtime from 'serviceworker-webpack-plugin/lib/runtime';

if ('serviceWorker' in navigator) {
  const registration = runtime.register();
}

3. Write your own sw.js

You can now use the global serviceWorkerOption variable in your sw.js. E.g. In our example this object looks like:

{
  assets: [
    './main.256334452761ef349e91.js',
  ],
}

Simple example

You can have a look at the /docs folder if you need a full working example.

API

ServiceWorkerWebpackPlugin(options)

  • options
  • entry, required, string: Path to the actual service worker implementation.
  • filename, string, default 'sw.js': Relative (from the webpack's config output.path) output path for emitted script.
  • excludes, array, default ['**/.*', '**/*.map']: Exclude matched assets from being added to the serviceWorkerOption.assets variable. (Blacklist)
  • includes, array, default ['**/*']: Include matched assets added to the serviceWorkerOption.assets variable. (Whitelist)
  • publicPath, string, default '/': Specifies the public URL address of the output files when referenced in a browser.
  • template, function, default noop: This callback function can be used to inject statically generated service worker. It's taking a serviceWorkerOption argument and must return a promise.
  • transformOptions, function: This callback function receives a raw serviceWorkerOption argument. The jsonStats key contains all the webpack build information.

runtime(options)

Credit

Why simply not use the offline-plugin?

I wouldn't have been able to write this plugin without the offline-plugin project. Thanks @NekR for sharing it!

Still, soon after using it, I realized that it wasn't what I was looking for.

  • The abstraction provided was too high. (I needed to build some custom fetch logic.)
  • It was making me, even more, dependent on Webpack. (What if later, I want to switch to another build system?)

Hence, I decided to change the approach and created this thin layer on top of Webpack to solve the assets name issue. Nothing more.

If you don't care about my two issues with offline-plugin then you don't need to use this package, offline-plugin is great.

The specs

License

MIT