README

@coco-platform/webpack-plugin-inject-service-worker

Build Status Package Dependency Package DevDependency

Usage

# npm
npm install @coco-platform/webpack-plugin-inject-service-worker --only=dev;
# yarn
yarn add @coco-platform/webpack-plugin-inject-service-worker --dev;

Options

options.swScope

Optional, default /, indicated the service worker register scope.

options.swPath

Optional, default sw.js, indicated service worker file path.

options.swDelay

Optional, time delay to register service worker.

Example

Then config the webpack:

const configuration = {
  entry: path.resolve(__dirname, '__fixture__', 'index.js'),
  resolve: {
    extensions: ['.js', '.css'],
  },
  output: {
    path: path.resolve(process.cwd(), 'dist'),
    filename: '[name].js',
    publicPath: '/',
  },
  module: {
    rules: [],
  },
  plugins: [
    Reflect.construct(HtmlWebpackPlugin, [
      {
        template: path.resolve(__dirname, '__fixture__', 'index.html'),
        inject: 'body',
      },
    ]),
    Reflect.construct(InjectServiceWorkerPlugin, []),
  ],
};

Finally output:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Webpack Plugin</title>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          setTimeout(function() {
            navigator.serviceWorker
              .register('sw.js', { scope: '/' })
              .then(function(registration) {
                // Registration was successful
                console.log(
                  'ServiceWorker registration successful with scope: ',
                  registration.scope
                );
              })
              .catch(function(err) {
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
              });
          }, 200);
        });
      }
    </script>
  </head>
  <body>
    <script type="text/javascript" src="/main.js"></script>
  </body>
</html>

License

MIT

@coco-platform/webpack-plugin-inject-service-workerdeprecated

Usage no npm install needed!