@birchill/inject-manifest-plugin

An rspack plugin that generates a manifest of assets and injects it into a service worker asset.

This is a fork of the InjectManifest part of the workbox-webpack-plugin package but adapted to rspack's native Service Worker support.

• Installation
• Usage
• Options
• Differences to Workbox
• Related projects

Installation

npm install -D @birchill/inject-manifest-plugin

Usage

1. The first step is to define your service worker in a way that rspack will detect it. That means passing a URL object to navigator.serviceWorker.register(). For example:

   1const registrationPromise = navigator.serviceWorker.register(
   2  new URL(
   3    /* webpackChunkName: "serviceworker" */
   4    './sw.ts',
   5    import.meta.url
   6  )
   7);

   Note that there are various limitations to rspack's handling of URL arguments such as not being able to pass a URL variable. See rspack's usage notes for Web Workers.

2. The next step is ensuring that your generated service worker asset has a fixed name (e.g. serviceworker.js) rather than a name with a cache-busting hash in it.

   1// rspack.config.js
   2const config = {
   3  // ...
   4  output: {
   5    chunkFilename: (assetInfo) => {
   6      // The service worker entrypoint needs to be fixed (i.e. not have a hash
   7      // appended).
   8      if (assetInfo.chunk?.name === 'serviceworker') {
   9        return '[name].js';
   10      }
   11      return '[name].[contenthash].js';
   12    },
   13  },
   14};

3. Finally, add the plugin to your rspack configuration.

   The only required parameter is swDest, which is the path to the generated service worker asset. This is not necessarily the same as the path of the source file.

   For example, if your service worker source file is src/sw.ts but you registered it as follows:

   1navigator.serviceWorker.register(
   2  new URL(
   3    /* webpackChunkName: "serviceworker" */
   4    './sw.ts',
   5    import.meta.url
   6  )
   7);

   swDest should be 'serviceworker.js', NOT src/sw.ts.

   For example:

   1// rspack.config.js
   2import { InjectManifest } from '@birchill/inject-manifest-plugin';
   3
   4const config = {
   5  // ...
   6  plugins: [
   7    new InjectManifest({
   8      swDest: 'serviceworker.js',
   9    }),
   10  ],
   11};

Options

The options are the same as the InjectManifest options in the Workbox plugin which are documented here.

• additionalManifestProperties (optional) - A list of entries to be precached, in addition to any entries that are generated as part of the build configuration.

  Type: Array of strings or ManifestEntry objects whose shape is as follows:

  1interface ManifestEntry {
  2  integrity?: string;
  3  revision: string | null;
  4  url: string;
  5}

• chunks (optional) - One or more chunk names whose corresponding output files should be included in the precache manifest.

  Type: Array of strings.

• dontCacheBustURLsMatching (optional) - Assets that match this will be uniquely versioned via their URL, and exempted from the normal HTTP cache-busting that's done when populating the precache.

  While not required, it's recommended that if your existing build process already inserts a [hash] value into each filename, you provide a RegExp that will detect that, as it will reduce the bandwidth consumed when precaching.

• exclude (optional) - One or more specifiers used to exclude assets from the precache manifest.

  This is interpreted following the same rules as rspack's standard exclude option.

  If not provided, the default value is [/\\.map$/, /^manifest.*\\.js$/].",

  Type: Array of Conditions whose type is

  1type Condition = RegExp | string | ((any: unknown) => boolean);

• excludeChunks (optional) - One or more chunk names whose corresponding output files should be excluded from the precache manifest.

  Type: Array of strings.

• include (optional) - One or more specifiers used to include assets in the precache manifest.

  This is interpreted following the same rules as rspack's standard include option.

  Type: Array of Conditions.

• injectionPoint (optional) - The string to find inside of the swDest asset. Once found, it will be replaced by the generated precache manifest.

  Defaults to 'self.__WB_MANIFEST'.

  Type: string.

• manifestTransforms (optional) - One or more functions which will be applied sequentially against the generated manifest.

  If modifyURLPrefix or dontCacheBustURLsMatching are also specified, their corresponding transformations will be applied first.

  Type: Array of functions whose type is ManifestTransform:

  1type ManifestTransform = (
  2  manifestEntries: Array<ManifestEntry & { size: number }>,
  3  compilation?: Compilation
  4) => Promise<ManifestTransformResult> | ManifestTransformResult;
  5
  6type ManifestTransformResult = {
  7  manifest: Array<ManifestEntry & { size: number }>;
  8  warnings?: Array<string>;
  9};
  10
  11type ManifestEntry = {
  12  integrity?: string;
  13  revision: string | null;
  14  url: string;
  15};

• maximumFileSizeToCacheInBytes (optional) - This value can be used to determine the maximum size of files that will be precached.

  This prevents you from inadvertently precaching very large files that might have accidentally matched one of your patterns.

  Defaults to 2097152 (2MB).

  Type: number.

• modifyURLPrefix (optional) - An object mapping string prefixes to replacement string values.

  This can be used to, e.g., remove or add a path prefix from a manifest entry if your web hosting setup doesn't match your local filesystem setup.

  As an alternative with more flexibility, you can use the manifestTransforms option and provide a function that modifies the entries in the manifest using whatever logic you provide.

  Type: object whose keys are strings and values are strings.

• swDest (required) - The name of the service worker file that will be The name of the service worker file that will be generated, e.g. "serviceworker.js".

  This file is generated by rspack but needs to be specified in order to inject the manifest into it.

  Note that this is name of the file generated by rspack, not the original service worker file.

Differences to Workbox

Since this plugin relies on rspack's native handling of service workers, it does not support any of the features related to compiling service workers in Workbox.

Specifically the following options are not supported:

• compileSrc
• importScriptsViaChunks
• mode
• swSrc
• webpackCompilationPlugins

Furthermore, swDest is a required option in this plugin as we need to know which asset to inject the manifest into (and which assets to automatically exclude from the manifest).

Related projects

The following projects all recreate Workbox's InjectManifest functionality in some form. At the time of writing, however, I couldn't get any of them to behave correctly with rspack's native service worker generation.

• workbox-rspack-plugin. Port of Workbox to rspack.
• @aaron/workbox-rspack-plugin. More up-to-date port.
• inject-manifest-plugin. A much leaner version of what Workbox's InjectManifest does (with different but similar options), adapted to work with both webpack and rspack.