rollup-plugin-workbox-inject

2.0.0 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin that injects a Workbox precache manifest into a Rollup-compiled service worker. Currently at version 2.0.0 (last updated 2020), this plugin differs from other Rollup/Workbox plugins by letting Rollup control the entire compilation and output of the service worker, instead of Workbox moving the file and bypassing Rollup. It uses workbox-build's getManifest() method and supports all options from that API, plus a customizable injectionPoint (default: 'self.__WB_MANIFEST'). Requires Rollup ^1.2.0 and Workbox v5+ in the service worker. Not actively maintained.

Common errors

error Error: Cannot find module 'rollup-plugin-workbox-inject' ↓

cause Package not installed or missing from node_modules.

fix

Run: npm install rollup-plugin-workbox-inject --save-dev

error TypeError: workbox is not a function ↓

cause Default import not used correctly (e.g., import { workbox } instead of import workbox).

fix

Use 'import workbox from 'rollup-plugin-workbox-inject'' (default import).

error The 'injectionPoint' option is not supported in workbox-build < 5 ↓

cause Using workbox-build v4 with the plugin; the plugin requires workbox-build v5+.

fix

Update workbox-build to v5+ or remove the injectionPoint option.

Warnings

gotcha Requires Workbox v5+ in your service worker; earlier versions use a different injection pattern. ↓

fix Use workbox-precaching v5+ and import precacheAndRoute from 'workbox-precaching'.

gotcha Plugin uses workbox-build's getManifest() which outputs to console; enable logging by setting NODE_ENV=development. ↓

fix Add @rollup/plugin-replace and replace 'process.env.NODE_ENV' with your desired value.

deprecated Package has not been updated since 2020; may not work with Rollup 3+ or latest Workbox. ↓

fix Consider using @rollup/plugin-workbox or workbox-build directly.

breaking Requires Rollup ^1.2.0; not compatible with Rollup 2 or 3. ↓

fix Upgrade to a maintained plugin or use workbox-build separately.

Install

npm install rollup-plugin-workbox-inject

yarn add rollup-plugin-workbox-inject

pnpm add rollup-plugin-workbox-inject

Imports

default

wrong

const workbox = require('rollup-plugin-workbox-inject')

correct

import workbox from 'rollup-plugin-workbox-inject'

ESM default import; CommonJS require works but note that the package is ESM-first.

workbox (require)
```
const workbox = require('rollup-plugin-workbox-inject');
```
CommonJS require pattern for use in rollup.config.js (which is often CommonJS).
self.__WB_MANIFEST
wrong
```
self.__WB_MANIFEST__ or self.wbManifest
```
correct
```
self.__WB_MANIFEST
```
The injection point string must match exactly; default is 'self.__WB_MANIFEST'.

Quickstart

Shows how to configure rollup-plugin-workbox-inject in rollup.config.js with @rollup/plugin-replace to set NODE_ENV.

import workbox from 'rollup-plugin-workbox-inject';
import replace from '@rollup/plugin-replace';

export default {
  input: 'src/sw.js',
  output: {
    dir: 'public',
    format: 'esm',
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
    }),
    workbox({
      globDirectory: 'public',
      globPatterns: ['css/**/*.css', 'js/**/*.js'],
    }),
  ],
};