Edit in GitHubLog an issue

Service worker

A webpack plugin for configuring a ServiceWorker for different PWA development scenarios. This plugin is a wrapper around the Google Workbox Webpack Plugin. It generates a caching ServiceWorker based on assets emitted by webpack.

Configurations#

The following configurations are available for this plugin:

  • normal development - the ServiceWorker is disabled
  • service worker debugging - the ServiceWorker and hot-reloading are enabled.

ServiceWorker(options)#

Plugin constructor for the ServiceWorkerPlugin class.

Parameters#

  • options: PluginOptions - Configuration object for the ServiceWorkerPlugin

The PluginOptions object contains the following properties:

PropertyTypeDescription
envEnvironmentObjectRequired. An object that represents the current environment.
pathsobjectRequired. Map of important project locations. Must at least contain a root property set to the context (root directory) of the project.
enableServiceWorkerDebuggingbooleanToggles service worker debugging.
serviceWorkerFilenamestringRequired. The name of the ServiceWorker file this project creates.
runtimeCacheAssetPathstringA remote URL or root path to assets the ServiceWorker should cache during runtime.

The EnvironmentObject contains the following properties:

PropertyTypeDescription
modestringMust be development or production.

Example#

In webpack.config.js:

Copied to your clipboard
1const path = require("path");
2const buildpack = require("@magento/pwa-buildpack");
3const ServiceWorkerPlugin = buildpack.Webpack.ServiceWorkerPlugin;
4
5module.exports = async (env) => {
6 const config = {
7 /* webpack config, i.e. entry, output, etc. */
8 plugins: [
9 /* other plugins */
10 new ServiceWorkerPlugin({
11 env: {
12 mode: "development",
13 },
14
15 paths: {
16 output: path.resolve(__dirname, "web"),
17 },
18 enableServiceWorkerDebugging: true,
19 serviceWorkerFileName: "sw.js",
20 runtimeCacheAssetPath: "https://cdn.url",
21 }),
22 ],
23 };
24
25 return config;
26};

Service worker debugging#

When PluginOptions.enableServiceWorkerDebugging is set to true, hot reloading is enabled and the ServiceWorker is active in the document root.

When this value is set to false, the ServiceWorker is disabled to prevent cache interruptions when hot reloading assets.

  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.