npm

Need private packages and team management tools?Check out npm Orgs. »

rollup-plugin-workbox

4.0.0 • Public • Published

rollup-plugin-workbox

Published on npm

Rollup plugin that builds a service worker with workbox as part of your rollup build

Usage

This package provides two rollup plugins: one that generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file.

The plugins are implemented as two function in the rollup-plugin-workbox module, named generateSW and injectManifest.

generateSW

Import the generateSW plugin from rollup-plugin-workbox, and add it to your plugins array in your rollup.config.js. The plugin takes a workbox config object, and an optional render function as the second argument.

You can find a detailed list of supported properties for the workbox config object here.

const { generateSW } = require('rollup-plugin-workbox');
 
module.exports {
  input: 'main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    generateSW({
      swDest: '/dist/sw.js',
      globDirectory: 'demo/dist/',
    })
  ],
};

You can also require your workbox-config.js file and pass it to the plugin.

const { generateSW } = require('rollup-plugin-workbox');
 
const workboxConfig = require('./workbox-config.js')
 
module.exports {
  // ...
  plugins: [
    generateSW(workboxConfig)
  ],
};

You can also customize the console output after workbox has generated your service worker by passing an optional render function as the second argument to the plugin:

const { generateSW } = require('rollup-plugin-workbox');
 
const workboxConfig = require('./workbox-config.js')
 
module.exports {
  // ...
  plugins: [
    generateSW(
      workboxConfig,
      function render({ swDest, count, size }) {
        console.log(
          '📦', swDest,
          '#️⃣', count,
          '🐘', size,
        );
      }),
    )
  ],
};

injectManifest

Import the injectManifest plugin from rollup-plugin-workbox, and add it to your plugins array in your rollup.config.js. The plugin takes a workbox config object, and an optional render function as the second argument.

You can find a detailed list of supported properties for the workbox config object here.

const { injectManifest } = require('rollup-plugin-workbox');
 
module.exports {
  input: 'main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    injectManifest({
      swSrc: 'sw.js',
      swDest: '/dist/sw.js',
      globDirectory: 'demo/dist/',
    })
  ],
};

You can also require your workbox-config.js file and pass it to the plugin.

const { injectManifest } = require('rollup-plugin-workbox');
 
const workboxConfig = require('./workbox-config.js')
 
module.exports {
  // ...
  plugins: [
    injectManifest(workboxConfig)
  ],
};

You can also customize the console output after workbox has created your service worker by passing an optional render function as the second argument to the plugin:

const { injectManifest } = require('rollup-plugin-workbox');
 
const workboxConfig = require('./workbox-config.js')
 
module.exports {
  // ...
  plugins: [
    injectManifest(
      workboxConfig,
      function render({ swDest, count, size }) {
        console.log(
          '📦', swDest,
          '#️⃣', count,
          '🐘', size,
        );
      }),
    )
  ],
};

install

npm i rollup-plugin-workbox

Downloadsweekly downloads

789

version

4.0.0

license

ISC

homepage

gitlab.com

repository

Gitgitlab

last publish

collaborators

  • avatar
Report a vulnerability