chore(deps): update dependency workbox-webpack-plugin to v6 - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
workbox-webpack-plugin	4.3.1 -> 6.5.1

---

Release Notes

googlechrome/workbox

v6.5.1

Compare Source

The Workbox v6.5.1 release includes a few changes related to our TypeScript interfaces and documentation.

A full changelog is available at GoogleChrome/workbox@v6.5.0...v6.5.1

What's New

• Additional inline @examples of using our build tools have been added to the TSDocs for workbox-build and workbox-webpack-plugin. [#​3038]
• The TypeScript type for the generateSW(), injectManifest(), and getManifest() methods in workbox-build has been updated from unknown to an appropriate actual type specific to each method. This should lead to better TSDoc generation and type inferences for developers. As this takes what was previously only a runtime check and moves it to a compile-time check, we believe that it should be functionally equivalent to prior releases, but if you run into problems, please let us know by opening an issue. [#​3037]

What's Fixed

• We have re-added the default export to workbox-webpack-plugin. [#​3036]

v6.5.0

Compare Source

The Workbox v6.5.0 release includes a number of smaller fixes, as well as a major rewrite of the workbox-webpack-plugin to TypeScript.

A full changelog is available at GoogleChrome/workbox@v6.4.2...v6.5.0

What's New

• workbox-webpack-plugin has been rewritten in TypeScript, and has public TypeScript definitions for its interfaces published as part of this release. We do not anticipate any changes in the underlying functionality as part of this rewrite. [#​2882]
• A forceSyncFallback parameter has been added to workbox-background-sync, without changing the default behavior. When forceSyncFallback is explicitly set to true, workbox-background-sync will always attempt to replay queued requests when the service worker starts up and never rely on the sync event listener. Most developers will not need this behavior, but it can be useful when targeting environments that have a non-functional Background Sync implementation, like some Electron runtimes. [#​3020]

What's Fixed

• A more informative message is returned when an opaque response is erroneously used in workbox-streams. [#​3001]
• Removed a dynamic method call in workbox-background-sync which could lead to errors when run through with certain aggressive minifiers. [#​3012]
• A waitUntil() was added to the StaleWhileRevalidate strategy, ensuring that it works properly with navigation preload responses. [#​3015]
• Removed the dependency on the deprecated source-map-url package. [#​3031]

New Contributors

Thank you to @​roikoren755 for their contributions to the workbox-webpack-plugin TypeScript migration!

v6.4.2

Compare Source

The Workbox v6.4.2 release fixes a few issues:

What's Changed

• fix: update @apideck/better-ajv-errors to ^0.3.1 by @​wopian in fix: update @apideck/better-ajv-errors to ^0.3.1 GoogleChrome/workbox#2988
• Fix request vs. response in ExpirationPlugin docs by @​mungojam in Fix request vs. response in ExpirationPlugin docs GoogleChrome/workbox#2987
• Skip ignoreURLParametersMatching in workbox wizard --injectManifest by @​jeffposnick in Skip ignoreURLParametersMatching in workbox wizard --injectManifest GoogleChrome/workbox#2992

New Contributors

• @​wopian made their first contribution in fix: update @apideck/better-ajv-errors to ^0.3.1 GoogleChrome/workbox#2988
• @​mungojam made their first contribution in Fix request vs. response in ExpirationPlugin docs GoogleChrome/workbox#2987

Full Changelog: GoogleChrome/workbox@v6.4.1...v6.4.2

v6.4.1

Compare Source

The Workbox v6.4.1 release fixes a few issues:

🐛 What's Fixed?

workbox-build

• The dependency on @apideck/better-ajv-errors has been updated, which in turn addresses a security issue in one of its dependencies. [#​2977]

worbox-navigation-preload

• The inline TypeScript definition for preloadResponse was incorrect, and has been fixed to reflect the previous definition that used to be provided by the TypeScript standard library. [#​2975]

worbox-strategies

• Take request.url into account in StrategyHandler.getCacheKey(). This ensures if a custom strategy overrides the Strategy._handle() method and performs multiple cache operations on different URLs, the cache key is properly calculated for each distinct URL. [#​2973]

v6.4.0

Compare Source

Workbox v6.4.0 includes:

🎉 What's New?

• We upgraded to TypeScript 4.4.3. This required us to declare inline some types that are now longer part of the TypeScript standard; see #​2946 for more context. [#​2950]

worbox-background-sync

• You can check the number of requests in the sync queue with the new method size(). [#​2941]

🐛 What's Fixed?

• We upgraded @​surma/rollup-plugin-off-main to patch a vulnerability from the dependency. [#​2962]
• A missing sourcemap is no longer a fatal error when running injectManifest. It returns now returns a warning and continues with execution. [#​2959]

🎁 Thank you

To our new contributors in this version: @​StephanBijzitter and @​fuzail-ahmed!

v6.3.0

Compare Source

Workbox v6.3.0 includes a couple of bug fixes and several new features.

🎉 What's New?

Allow precaching "repair" when using subresource integrity

Although unexpected, there are edge cases where the precache might not be in an inconsistent state, most likely due to a developer manually deleting something in DevTools.

When this happens, workbox-precaching defaults to falling-back to using a network response (assuming the device is online) when there's a precaching miss. Up until now, workbox-precaching hasn't attempting to use this network response to repopulate the precache, because there are no guarantees that the network response corresponds to the version of the asset specified in the precache manifest.

However, if the precache entry includes an integrity property, then subresource integrity guarantees that the response does correspond to the same version of the asset in the manifest. So it should be safe to "repair" the cache with that response. [#​2921]

IDB writes use relaxed durability

This small change to the way Workbox writes to IndexedDB should lead to slightly better performance, without any appreciable downsides. [#​2934]

notifyAllClients option in BroadcastCacheUpdate

BroadcastCacheUpdate uses postMessage() to notify all open tabs controlled by the current service worker about a cache update. This default behavior is not changing.

Setting notifyAllClients: false when configuring BroadcastCacheUpdate and the associated plugin will result in postMessage() only communicating the update to the specific window client that triggered the fetch request which resulted in the cache update. [#​2920]

All WorkboxEvents TypeScript types are now exported

This enhancement makes it easier to use TypeScript to write workbox-window event handlers. [#​2919]

Debug logging when caching responses with Vary: headers

The presence of Vary: headers on a cached Response can make it difficult to properly match and delete cache entries. To make it clearer to developers when this is happening, the development builds of Workbox will now log a message to the console when a Response that's being cached includes a Vary: header. [#​2916]

🐛 What's Fixed?

workbox-cli

• Update to chokidar dependency, for better node compatibility and to eliminate security warnings. [#​2913]

workbox-precaching

• Preserve all request headers in PrecacheCacheKeyPlugin. [#​2914]

v6.2.4

Compare Source

🐛 What's Fixed?

• Passing in functions for onSync and handler in generateSW's runtimeCaching should not fail validation. [#​2911]

v6.2.3

Compare Source

🐛 What's Fixed?

• Move @types/trusted-types to dependencies of workbox-window [#​2909]

v6.2.2

Compare Source

Workbox v6.2.2 fixes a few bugs introduced in the v6.2.0 release.

🐛 What's Fixed?

• Validation fix for plugin functions passed to runtimeCaching in the build tools. [#​2901]

• Ensure that our tsc configuration transpiles newer language features down to the ES2017 target level. [#​2902]

• Update to our lerna configuration to use the --exact tag when publishing to npm, to ensure that all the mutual dependencies in the monorepo use exact version matches, and not ^ versions. [#​2904]

v6.2.1

Compare Source

v6.2.0

Compare Source

Workbox v6.2.0 includes a number of bug fixes and internal refactoring described below.

Our intention is not to include any breaking changes in v6.2.0, and we've made an effort to maintain the same public interfaces and general behaviors while rewriting some of Workbox's internals.

🎉 What's New?

workbox-build TypeScript rewrite

The workbox-build module has been rewritten in TypeScript, following the earlier migration of the workbox-cli module. (workbox-webpack-plugin has not yet been migrated.) Developers who use workbox-build from their own TypeScript code should benefit from the official, accurate type definitions that are now published alongside workbox-build. [#​2867]

Build tool option validation

As part of this change, workbox-build now uses the TypeScript definitions as the source of truth when validating the configuration options developers provide. Previously, joi was used for validation with its own set of schema, and this would sometimes lead to mismatches between what the validation logic thought was okay and what the code actually expected. Developers who inspect the validation errors returned by workbox-build will likely see different error strings in v6.2.0. We expect that moving forward, using TypeScript as the source of truth will lead to fewer of those mismatches.This change applies to both workbox-cli and workbox-webpack-plugin, as well, which rely on workbox-build under the hood.

IndexedDB code migration

Another refactoring is the replacement of our previous custom IndexedDB logic with the idb library. No developer-visible changes are expected due to this migration. [#​2838]

Multiple controlling events during a page's lifetime

Following this change, worbox-window's controlling event is fired each time the underlying oncontrollerchange event happens. Multiple controlling events can occur on a long-lived page in which multiple service worker updates take place. isExternal: true will be set when the service worker that takes control is "external," which will always be the case for multiple updates.

Previously, controlling would only be fired once per lifetime of the page, which does not match the documented behavior. This change is considered a bug fix to match the expected behavior, and developers are encouraged to test their logic to ensure that they were not relying on the previous, buggy behavior. [#​2817]

TrustedScriptURL support in workbox-window

Developers who have opted-in to the CSP policy "require-trusted-types-for 'script'" and who are using TypeScript would have previously had trouble using TrustedScriptURLs in workbox-window. This release improves that support. [#​2872]

rangeRequests option in runtimeCaching

Setting rangeRequests: true inside of a runtimeCaching configuration entry will add the RangeRequestsPlugin to the service worker generated by Workbox's build tools. [#​2871]

🐛 What's Fixed?

workbox-core

• The HandlerDidErrorCallbackParam type definition is now exported alongside the other relevant TypeScript types. [#​2886]

workbox-webpack-plugin

• A bug was fixed that could lead to invalid generated code when quotation chars when webpack's eval-cheap-source-map is used along with the InjectManifest plugin. [#​2847]

workbox-window

• ports was missing on the WorkboxMessageEvent. It's been added, mirroring the value of the underlying MessageEvent, when used in an onmessage handler. [#​2874]

• The WorkboxEventMap type definition is now exported alongside the other relevant TypeScript types. [#​2870]

Thanks!

Thank you @​rockwalrus for contributing a PR [#​2857] that went into this release!

v6.1.5

Compare Source

Workbox v6.1.5 includes fixes in workbox-cli, workbox-window and workbox-webpack-plugin. Also, the rollup and @rollup/plugin-node-resolve dependencies were updated.

(There was no v6.1.3 or v6.1.4 release.)

🐛 What's Fixed?

workbox-cli

In the configuration file generated by workbox wizard the regex for ignoreURLParametersMatching are now serialized correctly, as before they were being serialized as strings and that was causing errors. [#​2796]

workbox-window

Added support for external controlling events. The controlling event is now dispatched whether it originated in the current or external service worker. Developers can check the isExternal flag to distinguish between the two. [#​2786]

workbox-webpack-plugin

Fix to push an Error object to compilation.warnings instead of strings, since pushing strings causes the warnings to not be bubbled up correctly. See [#​2790]

Thanks!

Thank you @​jcabak for contributing documentation updates [#​2808]!

v6.1.2

Compare Source

Workbox v6.1.2 includes several fixes to the workbox-cli's wizard mode, and removes some potentially confusing logging.

🐛 What's Fixed?

workbox-build

• A warning message was logged when workbox-build was used, due to an update to the @rollup/plugin-replace plugin that it uses. The underlying issue raised in the warning message has been addressed. [#​2772]

workbox-cli

• Previously, the wizard question flow would not give developers the opportunity to specify a value to override the default ignoreURLParametersMatching setting. The wizard now provides some context and explicitly asks about overriding this value. [#​2763]

• There were two issues fixed in the wizard related to entering the globDirectory value: the separator characters, --------, were inadvertently selectable, and additionally, the logic was buggy when a manual directory name was entered. Both of these issues are fixed. [#​2766]

workbox-strategies

• There was previously unnecessary logging of an uncaught error when a network request failed while offline, even if the response was eventually provided via the cache. This amounted to extra noise in the JS console, and could be particularly confusing if it was triggered during Chrome's new automatic offline check. This uncaught error should no longer show up in the logs. [#​2777]

Thanks!

Special thanks to @​ognjenjevremovic for contributing the two workbox-cli PRs that went into this release!

v6.1.1

Compare Source

Workbox v6.1.1 includes a bug fix for the NetworkFirst strategy, as well as some documentation and TypeScript fixes.

🐛 What's Fixed?

workbox-strategies

The NetworkFirst strategy uses two promises: one for the network request, and one is the optional networkTimeoutSeconds option is set. If the network request succeeds, then the timeout promise's timer is canceled. However, the strategy previously attempted to wait until both promises resolve before the handler resolves. This meant that, if the network request succeeds before the timeout, the strategy's over handler promise would not properly resolve.

See #​2744

Thanks!

Special thanks to @​joshkel for both bringing that NetworkFirst issue to our attention, as well as contributing the code for the fix!

v6.1.0

Compare Source

Workbox v6.1.0 includes a number of new features, as well as an important fix for a bug that could have affected workbox-precaching behavior in earlier v6 releases.

🎉 What's New?

setCatchHandler for individual Routes

The setCatchHandler() method on a Router allows you to configure "fallback" logic if any handler invoked by that Router returns an error. It can be awkward to use, however, if you have many different Routes registered for the same Router, and you would prefer that the fallback logic only be invoked when one or two particular Route handlers fail.

Starting in this release, each individual Route object has a setCatchHandler() method, allowing you to add fallback logic just to that Route, without affecting any other Routes. To use this method, make sure you explicitly construct a Route first, and then pass that Route to the (overloaded) registerRoute() method:

import {Route, registerRoute} from 'workbox-routing';
import {NetworkOnly, StaleWhileRevalidate} from 'workbox-strategies';

const navigationRoute = new Route(
  ({event, request, url}) => request.mode === 'navigate',
  new NetworkOnly()
);
navigationRoute.setCatchHandler(
  ({event, request, url}) => {
    // Do something to generate a fallback response,
    // e.g. read a HTML document from the cache.
  }
);
registerRoute(navigationRoute);

// This route, created implicitly via an overloaded registerRoute()
// method, won't have the catch handler applied.
registerRoute(
  ({event, request, url}) => request.destination === 'image',
  new StaleWhileRevalidate()
);

See #​2699

New "recipes"

The workbox-recipes module has been extended with a few new features:

• A new recipe, warmStrategyCache, which takes an array of paths and a Workbox strategy and warms that strategy's cache with those paths at service worker install time.
• Adds a warmCache option to page, image, and static resource recipes to allow users to warm those caches.
• Adds a plugins option to page, image, and static resource recipes to allow users to pass additional plugins to those recipes, allowing a user, for instance, to add a URL normalization plugin to the page recipe.

The workbox-recipes documentation has more information and examples.

See #​2718

🐛 What's Fixed?

workbox-precaching

The expected behavior for workbox-precaching is that all URLs listed in the precache manifest need to be considered "cacheable" in order for service worker installation to succeed. By default, workbox-precaching considers any response with a status code less than 400 as being cacheable (including opaque responses, which have a status code of 0). Developers who need to customize this behavior can pass a cacheWillUpdate plugin to workbox-precaching, and use that logic to determine whether or not a response should be precached during installation.

Two bugs were introduced in the Workbox v6.0.0 release:

• The default criteria, in which any response with a status of 400 or higher should be considered uncacheable, would lead to the invalid response being inadvertently written to the cache prior to failing the service worker installation. The next time installation was attempted, this previously cached error response wouldn't be retried, so after enough retries, the service worker would eventually finish installation, even though some responses that should have been considered invalid were precached.

• If a developer uses a cacheWillUpdate plugin while precaching, returning null from the plugin properly excluded that response from being precached, but it would not cause the overall service worker installation to fail.

Both of these bugs are fixed in the v6.1.0 release. During service worker installation, if any response that is uncacheable (either via the default or custom cacheWillUpdate criteria) is encountered, installation will consistently fail and the invalid response won't be added to the cache.

See #​2738

workbox-webpack-plugin

• Using the chunks or excludeChunks options could lead to a warning message under some circumstances, due to workbox-webpack-plugin assuming they always corresponded to chunk group names. The code will now check to see if the name matches a chunk itself, not just a group. See #​2735

All build tools

• The source-map dependency has been updated to resolve an issue that could occur when run in a Node environment that had a polyfilled fetch(). See #​2716

Thanks!

Special thanks to @​Spiderpig86 for contributing a PR that was part of this release.

v6.0.2

Compare Source

Workbox v6.0.2 resolves an issue that could prevent workbox-precaching from working as expected when loaded via workbox-sw.

(There was no v6.0.1 release.)

🐛 What's Fixed?

• Preserve symbols across builds and don't mangle _handle. [#​2687]

Thanks!

Special thanks to @​pidtuner for raising the issue that was resolved in this release.

v6.0.0

Compare Source

Overview of Workbox v6

We're happy to announce the release of Workbox v6!

🎉 What's New?

webpack improvements

This release includes additional bug fixes for better compatibility with webpack. As of this release, workbox-webpack-plugin requires webpack v4.40.0 or later (for those still on the v4.x branch) or webpack v.5.9.0 or later (for those who have updated to webpack v5.x).

workbox-webpack-plugin will also now take advantage of the immutable metadata that webpack automatically adds to hashed assets. In most cases, this means that explicitly using dontCacheBustURLMatching in your workbox-webpack-plugin configuration is no longer necessary.

See #​2651, #​2673, and #​2675.

workbox-strategies improvements

The best way to ensure third-party developers have the power to extend Workbox in ways that fully meet their needs is to base our own strategies on top of the extensibility mechanisms we expose to third-party developers.

Specifically, v6 introduces a new way for third-party developers to define their own Workbox strategies, and all of our built-in strategies have been rewritten on top of this mechanism.

This change also allowed us to rewrite the workbox-precaching codebase to use workbox-strategies as a base. This should not result in any breaking changes, and should lead to better long-term consistency in how the two modules access the network and cache.

See #​2446, #​2459 and #​2569 for more details.

New strategy base class

In v6, all Workbox strategy classes (both built-in strategies as well as custom, third-party strategies) must extend the new Strategy base class.

The Strategy base class is responsible for two primary things:

• Invoking plugin lifecycle callbacks common to all strategy handlers (e.g. when they start, respond, and end).
• Creating a "handler" instance, that can manage state for each individual request a strategy is handling.

A new "handler" class

We previously had internal modules call fetchWrapper and cacheWrapper, which (as their name implies) wrap the various fetch and cache APIs with hooks into their lifecycle. This is the mechanism that currently allows plugins to work, but it's not exposed to developers.

The new "handler" class (which this proposal calls StrategyHandler) will expose these methods so custom strategies can call fetch() or cacheMatch() and have any plugins that were added to the strategy instance automatically invoked.

This class would also make it possible for developers to add their own custom, lifecycle callbacks that might be specific to their strategies, and they would "just work" with the existing plugin interface.

New plugin lifecycle state

In Workbox v5, plugins are stateless. That means if a request for /index.html triggers both the requestWillFetch and cachedResponseWillBeUsed callbacks, those two callbacks have no way of communicating with each other or even knowing that they were triggered by the same request.

In this proposal, all plugin callbacks will also be passed a new state object. This state object will be unique to this particular plugin object and this particular strategy invocation (i.e. the call to handle()).

This allows developers to write plugins where one callback can conditionally do something based on what another callback in the same plugin did (e.g. compute the time delta between running requestWillFetch and fetchDidSucceed or fetchDidFail).

New plugin lifecycle callbacks

In order to fully leverage the plugin lifecycle state (mentioned above), you need to know when the lifecycle of a given strategy invocation starts and finishes.

To address this need (and others), the following new plugin lifecycle callbacks will be added:

• handlerWillStart: called before any handler logic starts running. This callback can be used to set the initial handler state (e.g. record the start time).
• handlerWillRespond: called before the strategies handle() method returns a response. This callback can be used to modify that response before returning it to a route handler or other custom logic.
• handlerDidRespond: called after the strategy's handle() method returns a response. This callback can be used to record any final response details, e.g. after changes made by other plugins.
• handlerDidComplete: called after all extend lifetime promises added to the event from the invocation of this strategy have settled. This callback can be used to report on any data that needs to wait until the handler is done in order to calculate (e.g. cache hit status, cache latency, network latency).
• handlerDidError: called if the handler was unable to provide a valid response from any source. This callback can be used to provide "fallback" content as an alternative to a network error.

Developers implementing their own custom strategies do not have to worry about invoking these callbacks themselves; that's all handled by a new Strategy base class.

More accurate TypeScript types for handlers

TypeScript definitions for various callback methods have been normalized. This should lead to a better experience for developers who use TypeScript and write their own code to implement or call handlers.

See #​2548.

workbox-recipes

This release includes a new module, workbox-recipes, that combines common routing and caching strategy configurations into ready-to-use code that can be dropped in to your service worker.

You can read more about what's included in the first batch of recipes, as well as how to use them, in #​2664.

workbox-window improvements

New messageSkipWaiting() method

A new method, messageSkipWaiting(), has been added to the workbox-window module to simplify the process of telling the "waiting" service worker to activate.

This offers some improvements over alternatives:

• It calls postMessage() with the de facto standard message body, {type: 'SKIP_WAITING'}, that a service worker generated by Workbox checks for to trigger skipWaiting().

• It chooses the correct "waiting" service worker to post this message to, even if it's not the same service worker that workbox-window was registered with.

See #​2394.

Removal of "external" events in favor of an isExternal property

Many developers were confused by the concept of "external" events in workbox-window, and in practice, they did not end up being a net-positive.

All "external" events are now represented as "normal" events with an isExternal property set to true. This allows developers who care about the distinction to still detect it, and developers who don't need to know can ignore the property.

See #​2031.

Cleaner "Offer a page reload for users" recipe

Taken together, these two changes make the "Offer a page reload for users" recipe cleaner:

<script type="module">
import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.0.0/workbox-window.prod.mjs';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  const showSkipWaitingPrompt = () => {
    // This assumes a hypothetical createUIPrompt() method with
    // onAccept and onReject callbacks:
    const prompt = createUIPrompt({
      onAccept: () => {
        wb.addEventListener('controlling', () => {
          window.location.reload();
        });

        // This will postMessage() to the waiting service worker.
        wb.messageSkipWaiting();
      },

      onReject: () => {
        prompt.dismiss();
      }
    });
  };

  // Listening for externalwaiting is no longer needed.
  wb.addEventListener('waiting', showSkipWaitingPrompt);
  wb.register();
}
</script>

sameOrigin parameter in matchCallback functions

A new boolean parameter, sameOrigin, is passed to the matchCallback function used in workbox-routing. It's set to true if the request is for a same-origin URL, and false otherwise.

This simplifies some common boilerplate:

// In v5:
registerRoute(
  ({url}) => url.origin === self.location.origin &&
             url.pathname.endsWith('.png'),
  new StaleWhileRevalidate({cacheName: 'local-png'}),
);

// In v6:
registerRoute(
  ({sameOrigin, url}) => sameOrigin &&
                         url.pathname.endsWith('.png'),
  new StaleWhileRevalidate({cacheName: 'local-png'}),
);

See #​2487.

matchOptions are supported in workbox-expiration

You can now set matchOptions in workbox-expiration, which will then be passed through as the CacheQueryOptions to the underlying cache.delete() call. (Most developers won't need to do this.)

See #​2206.

Precaching now processes entries one by one, not in bulk

workbox-precaching has been updated so that only one entry in the precache manifest is requested and cached at a time, instead of attempting to request and cache all of them at once (leaving it to the browser to figure out how to throttle).

This should reduce the likelihood of net::ERR_INSUFFICIENT_RESOURCES errors while precaching, and also should reduce the bandwidth contention between precaching and simultaneous requests made by the web app.

See #​2528.

PrecacheFallbackPlugin allows for easier offline fallback

workbox-precaching now includes a PrecacheFallbackPlugin, which implements the new handlerDidError lifecycle method added in v6.

This makes it easy to specify a precached URL as a "fallback" for a given strategy when a response otherwise wouldn't be available. The plugin will take care of properly constructing the correct cache key for the precached URL, including any revision parameter that's needed.

Here's a sample of using it to respond with a precached /offline.html when the NetworkOnly strategy can't generate a response for a navigation request—in other words, displaying a custom offline HTML page:

import {PrecacheFallbackPlugin, precacheAndRoute} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

// Ensure that /offline.html is part of your precache manifest!
precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  ({request}) => request.mode === 'navigate',
  new NetworkOnly({
    plugins: [
      new PrecacheFallbackPlugin({
        fallbackURL: '/offline.html',
      }),
    ],
  }),
);

precacheFallback in runtime caching

If you're using generateSW to create a service worker for you instead of writing your service worker by hand, you can use the new precacheFallback configuration option in runtimeCaching to accomplish the same thing:

{
  // ... other generateSW config options...
  runtimeCaching: [{
    urlPattern: ({request}) => request.mode === 'navigate',
    handler: 'NetworkOnly',
    options: {
      precacheFallback: {
        // This URL needs to be included in your precache manifest.
        fallbackURL: '/offline.html',
      },
    },
  }],
}

Under-the-hood workbox-precaching improvements

This release includes a substantial rewrite to the implementation of workbox-precaching, to build on top of other standard Workbox idioms (like Routes, Strategy subclasses, and custom plugins) as much as possible. There are a few breaking changes, described in the follow section, but they are mostly limited to uncommon use cases, when PrecacheController is instantiated directly. For the most part, these changes are meant to be invisible to developers, but should lead to be better consistency in how routing and request handling works across all of Workbox.

You can read more about what's change in #​2638

cacheKeyWillBeUsed can be used to cache non-GET requests

Only GET requests can be used as cache keys, but there are scenarios in which you might want to use a combination of plugins to transform a POST or PUT request into a cacheable GET request.

You can now use the cacheKeyWillBeUsed lifecycle callback in a plugin to return a GET request with whatever URL you'd like to use as a cache key, and that can then allow the response associated with a POST or PUT to be cached.

See #​2615 for more details. Thanks to @​markbrocato for their contribution.

⚠️ Breaking Changes

Build Tools

• The minimum required version of node has been increased to v10.0.0. This applies to workbox-build, workbox-cli, and workbox-webpack-plugin. [#​2462]

• mode was not intended to be a supported parameter for the injectManifest and getManifest modes of workbox-build and workbox-cli. It's been removed from the documentation and attempting to use it outside of generateSW will now trigger a build error. This does not apply to workbox-webpack-plugin, which does support mode in its InjectManifest plugin. [#​2464]

workbox-core

• The skipWaiting() method in workbox-core wrapped the underlying call to self.skipWaiting() in an install handler. In practice, this caused undue confusion and offered little value, as it's valid to call self.skipWaiting() outside of an install event. As of v6, Workbox's skipWaiting() will no longer add in an install handler, and is equivalent to just calling self.skipWaiting(). Because of this, developers should migrate to calling self.skipWaiting() directly, and Workbox's skipWaiting() will likely be removed in v7. [#​2547]

workbox-precaching

• While this scenario is uncommon, if you precache a URL that corresponds to an HTTP redirect to an HTML document on a different origin, that cross-origin HTML document can no longer be used to satisfy a navigation request. [#​2484]

• By default, the fbclid URL query parameter is now ignored when looking up a precached response for a given request. [#​2532]

Note: The following changes primarily apply to direct usage of the PrecacheController class. Most developers don't use PrecacheController directly, and instead use static helper methods like precacheAndRoute() exported by workbox-precaching. [#​2639]

• The PrecacheController constructor now takes in an object with specific properties as its parameter, instead of a string. This object supports the following properties: cacheName (serving the same purpose as the string that was passed in to the constructor in v5), plugins (replacing the addPlugins() method from v5), and fallbackToNetwork (replacing the similar option that was passed to createHandler() and `createHandlerBoundToURL() in v5).

• The install() and activate() methods of PrecacheController now take exactly one parameter, which should be set to a corresponding InstallEvent or ActivateEvent, respectively.

• The addRoute() method has been removed from PrecacheController. In its place, the new PrecacheRoute class can be used to create a route that you can then register.

• The precacheAndRoute() method has been removed from PrecacheController. (It still exists as a static helper method exported by the workbox-precaching module.) It was removed because PrecacheRoute can be used instead.

• The createMatchCalback() method has been removed from PrecacheController. The new PrecacheRoute can be used instead.

• The createHandler() method has been removed from PrecacheController. The strategy property of the PrecacheController object can be used to handle requests instead.

• The createHandler() static export has already been removed from the workbox-precaching module. In its place, developers should construct a PrecacheController instance and use its strategy property.

• The route registered with precacheAndRoute() is now a "real" route that uses workbox-routing's Router class under the hood. This may lead to a different evaluation order of your routes if you interleave calls to registerRoute() and precacheAndRoute(). See #​1857 and #​2402 for more details.

workbox-routing

• The setDefaultHandler() method now takes an optional second parameter corresponding to the HTTP method that it applies to, defaulting to 'GET'. It no longer applies to requests with any HTTP method. If you were using setDefaultHandler() and all of your web app's requests are 'GET', then no changes need to be made. [#​2463]

workbox-webpack-plugin

• The minimum required version of webpack has been increased to v4.40.0 (for users remaining on the webpack v4.x major release) or v5.9.0 (for users who have updated to the webpack v5.x major release). [#​2641]

v5.1.4

Compare Source

The v5.1.4 release contains a dependency update for rollup-plugin-terser, resolving a security error with one of its dependencies.

See GoogleChrome/workbox#2601

v5.1.3

Compare Source

🐛 What's Fixed?

workbox-build

• Correct workbox-build's getManifest() JSDoc [#​2429]

workbox-cli

• Don't check swSrc for hardcoded injection point in wizard flow [#​2451]

workbox-core

• handlerCallback JSDocs update [#​2440]

workbox-precaching

• Remove the isSWEnv assertion [#​2453]
• Update message to remove duplicate is [#​2466]

Thanks!

Special thanks to @​akonchady for contributing a PR that went in to this release.

v5.1.2

Compare Source

🐛 What's Fixed?

workbox-build

• Reverted the strip-comments dependency to an earlier revision, to provide continued compatibility with the v8.x.y releases of node. [#​2416]

Thanks!

Special thanks to @​Mister-Hope for raising issues that were resolved in this release.

v5.1.1

Compare Source

(We ran into some issues with the v5.1.0 release process, so v5.1.1 is a republish of the same code.)

🎉 What's New?

workbox-routing

• Adjusted the debug logging code so that a URL's hash portion is displayed. [#​2371]

workbox-webpack-plugin

• A new compileSrc option (defaulting to true) has been added. If set to false, then webpack will not run the swSrc file through a compilation. This can be useful if you want your swDest output to be, e.g., a JSON file which contains your precache manifest. [#​2412]

🐛 What's Fixed?

workbox-webpack-plugin

• Switch to official package exports when using internal webpack modules. [#​2397]
• webpackCompilationPlugins that customize the swSrc compilation should now be properly applied. [#​2400]

Thanks!

Special thanks to @​aritsune, @​bailnl, @​novaknole and @​pizzafox for raising issues that were resolved in this release.

v5.1.0

Compare Source

v5.0.0

Compare Source

Overview of Workbox v5

We're happy to announce the release of Workbox version 5! This release introduces a lot of new features, as well as some breaking changes.

If you're already using Workbox, the best place to get up to speed is the guide to migrating from v4 to v5.

One example migration, with commentary, can be found in this GitHub commit.

🎉 What's New?

A shift towards local Workbox bundles & away from the CDN

While our immediate plan is to continue publishing copies of the Workbox runtime code to our CDN, in v5, the generateSW mode of our build tools will create a local bundle of exactly the Workbox runtime methods you end up using in your service worker. Depending on the value of inlineWorkboxRuntime, this bundle will either be imported from a separate file, or inlined directly in your top-level service worker.

Under the hood, we use Rollup to create this optimized bundle, optionally minifying it and generating sourcemaps, depending on the configuration.

See #​2064 for more details.

If you're using the workbox-webpack-plugin's InjectManifest mode, the service worker file you specify via swSrc will end up being run through a webpack compilation process, optionally applying any compilation plugins configured via the webpackPlugins parameter. This should simplify the development flow described in the Using Bundlers (webpack/Rollup) with Workbox guide.

See #​1513 for more details.

You can continue using importScripts('http://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js') and relying on workbox-sw to dynamically pull in the Workbox runtime code that you need in v5, but we expect that using a custom bundle will lead to smaller runtime payloads (as well as work around issues with asynchronous imports), and we encourage developers to consider switching off of the CDN.

Changes to the webpack precache manifest

Before v5, workbox-webpack-plugin would generate a list of entries to precache based on two distinct sources: the set of assets in a webpack compilation, along with an optional additional set of files matched via glob patterns. Most webpack developers did not use the glob-related options (since the webpack compilation would normally include all the assets that they cared about), but at the same time, some helpful configuration options for manipulating or post-processing the precache manifest only applied to entries created via those glob patterns.

In v5, the glob-related configuration options are no longer supported. The webpack asset pipeline is the source of all the automatically created manifest entries. (Developers who have files that exist outside of the webpack asset pipeline are encouraged to use, e.g., copy-webpack-plugin to get those files into the webpack compilation.)

Beyond that, options for post-processing the precache manifest can now be used to manipulate entries that originate from the webpack asset pipeline. manifestTransforms, in particular, can be used to make arbitrary changes to any aspect of the precache manifest, including adding entries, deleting them, and changing their revision or url fields as needed. The current webpack compilation will be passed in to the callback function in case you need information from there to determine how to manipulate entries.

Here's an example of using manifestTransforms to perform extensive post-processing of a precache manifest:

const manifestTransform = (originalManifest, compilation) => {
  // If anything needs to be propagated to webpack's list
  // of compilaiton warnings, add the message here:
  const warnings = [];

  const manifest = originalManifest.map((entry) => {
    // entry has size, revision, and url fields.

    // Add a CDN prefix to certain URLs.
    // (alternatively, use modifyURLPrefix)
    if (entry.url.endsWith('.jpg')) {
      entry.url = `https://examplecdn.com/${entry.url}`;
    }

    // Remove revision when there's a match for your hashed URL pattern.
    // (alternatively, just set dontCacheBustURLsMatching)
    if (entry.url.match(/\.[0-9a-f]{6}\./)) {
      delete entry.revision;
    }

    // Exclude assets greater than 1MB, unless they're JPEGs.
    // (alternatively, use maximumFileSizeToCacheInBytes)
    if ((entry.size > 1024 * 1024) && !entry.url.endsWith('.jpg')) {
      warnings.push(`${entry.url} will not be precached because it is too big.`);
      return null;
    }

    return entry;
  }).filter(Boolean); // Exclude any null entries.

  // When manually adding in additional entries, make sure you use a URL
  // that already includes versioning info, like the v1.0.0 below:
  manifest.push({
    url: 'https://examplecdn.com/third-party-code/v1.0.0/index.js',
  });

  return {manifest, warnings};
};

Helpers that implement common manifest transformations, like maximumFileSizeToCacheInBytes, dontCacheBustURLsMatching and modifyURLPrefix, are also supported for webpack assets.

See #​1591 and #​1854.

Additionally, in v5, the precache manifest is inlined into the top-level service worker file, and not stored in a separate, external JavaScript file.

Simplified injectManifest placeholder replacement

Prior to v5, manifest injection worked by using a regular expression to find the correct location in the source service worker file to replace with the array of manifest entries. This could be brittle, and it was hard to customize, since the replacement step assumed you were using a RegExp that had capture groups.

This is simplified in v5, and using the injectManifest mode just checks for a placeholder variable and performs the equivalent of string replacement to inject the full manifest in its place. This variable is self.__WB_MANIFEST by default.

Your swSrc file in v4 might have looked like precacheAndRoute([]);

In v5, you should change this to precacheAndRoute(self.__WB_MANIFEST);

self.__WB_MANIFEST was chosen as the default replacement because self should always be defined in the service worker global scope, and it is unlikely to conflict with any user-created variables. If you need a different replacement, it can b

---

Configuration

📅 Schedule: "after 8am every weekend,before 7pm every weekend" (UTC).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by WhiteSource Renovate. View repository job log here.