sw-precache-webpack-plugin

1.0.0 verified Mon Apr 27 auth: no javascript abandoned

Webpack plugin (v1.0.0) that generates a service worker file using sw-precache to cache external project dependencies. Abandoned since 2019; no longer updated with new webpack versions. Key differentiator: simple integration for service worker caching in webpack builds, but superseded by workbox-webpack-plugin which is actively maintained and more feature-rich. Handles automatic cache busting, minification, and navigation fallback. Last stable release was 2017; requires Node >=4.

Common errors

error Error: Cannot find module 'sw-precache-webpack-plugin' ↓

cause Plugin not installed

fix

npm install --save-dev sw-precache-webpack-plugin

error TypeError: SWPrecacheWebpackPlugin is not a constructor ↓

cause Incorrect import or ESM usage without default handling

fix

Use const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); or if using ESM, ensure bundler supports default interop.

error Invalid or unexpected token (when using options.staticFileGlobsIgnorePatterns) ↓

cause Non-RegExp value in the array

fix

Use array of RegExp objects, e.g., [/pattern/].

error Uncaught (in promise) TypeError: ServiceWorker startup: SecurityError ↓

cause Service worker file not served from same origin at correct scope

fix

Ensure service-worker.js is placed in the build directory and service worker is registered from the same path.

Warnings

gotcha Plugin requires webpack 1, 2, 2.1 beta, 2.2 beta, 3, or 4; not compatible with webpack 5+ ↓

fix Migrate to workbox-webpack-plugin for webpack 5 support.

deprecated sw-precache-webpack-plugin is no longer maintained and has been superseded by workbox-webpack-plugin ↓

fix Replace with @angular/service-worker or workbox-webpack-plugin (GenerateSW).

gotcha Service worker filename defaults to service-worker.js and is placed in webpack output.path; scope is determined by directory, so ensure file is served from correct path ↓

fix Set filename option to match desired scope path (e.g., '/service-worker.js').

gotcha staticFileGlobsIgnorePatterns must be array of RegExp objects; non-RegExp values cause errors ↓

fix Use /regex/ pattern literals or new RegExp() objects.

breaking Plugin incompatible with webpack 4's output.publicPath change (requires trailing slash) – may cause runtime service worker registration failure ↓

fix Ensure publicPath ends with '/' and path is absolute.

Install

npm install sw-precache-webpack-plugin

yarn add sw-precache-webpack-plugin

pnpm add sw-precache-webpack-plugin

Imports

SWPrecacheWebpackPlugin

wrong

import SWPrecacheWebpackPlugin from 'sw-precache-webpack-plugin'

correct

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

CommonJS default export; not compatible with ESM import syntax. Use require().

SWPrecacheWebpackPlugin

wrong

import { SWPrecacheWebpackPlugin } from 'sw-precache-webpack-plugin'

correct

import SWPrecacheWebpackPlugin from 'sw-precache-webpack-plugin'

Default export, not named. Works with ESM if using bundler that allows default from CJS.

Quickstart

Shows basic webpack configuration to generate a service worker using SWPrecacheWebpackPlugin.

const path = require('path');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  plugins: [
    new SWPrecacheWebpackPlugin({
      cacheId: 'my-app',
      filename: 'service-worker.js',
      navigateFallback: '/index.html',
      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
      minify: true,
    }),
  ],
};