Nascent Personality Manifestation
    Have ideas to improve npm?Join in the discussion! »

    @dr-kobros/serviceworker-webpack-plugin

    0.1.1 • Public • Published

    serviceworker-webpack-plugin

    I forked this from Olivier Tassinari olivier.tassinari@gmail.com (https://github.com/oliviertassinari), as the development seemed stalled and I needed this. So most of all credits go to him! :)

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

    npm version npm downloads Build Status

    Dependencies DevDependencies

    Installation

    yarn install @dr-kobros/serviceworker-webpack-plugin

    The problem solved

    When building a service worker, you probably want to cache 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 '@dr-kobros/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 '@dr-kobros/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',
      ],
    }

    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. We use this value to load the service worker over the network.
    • 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

    Install

    npm i @dr-kobros/serviceworker-webpack-plugin

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    32.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar