maximumFileSizeToCacheInBytes make SW redundant

Question

I am using workbox-webpack-plugin (5.1.4) to generate a service worker.

In wepback, I've added GenerateSW to plugins with the next config

{
  swDest: 'serviceWorker.js',
  clientsClaim: true,
  skipWaiting: true,
  mode: process.env.NODE_ENV,
  sourcemap: false,
  cleanupOutdatedCaches: true,
  runtimeCaching: [{
    urlPattern: /\//,
    handler: 'NetworkFirst',
  }, {
    urlPattern: /\.(?:js|css|html|map)$/,
    handler: 'StaleWhileRevalidate',
  }, {
    urlPattern: /\.(?:png|jpg|jpeg|mp4|svg|ico)$/,
    handler: 'CacheOnly',
  }, {
    urlPattern: /^https:\/\/xx(?:-dev|)\.xx\.xx\/media-service\/(?:page1|page2|page3)(.*)/,
    handler: 'NetworkFirst',
  }],
}

It works well.

But when I added maximumFileSizeToCacheInBytes: 20 * 1024 * 1024 to config, the following error was thrown:

What am I missing?

Answer 1

That makes it sound like the change to maximumFileSizeToCacheInBytes means that an additional (large) file is being added to your precache manifest, and then the attempt to download that file fails.

If there's a failure to download anything listed in your precache manifest, service worker installation will fail, and it will be re-attempted the next time the service worker is registered.

You might see an entry in the Network panel in Chrome's DevTools corresponding to the failed download, if you need to debug which URL is failing. But based on what you describe, it's likely to be the URL of whatever large file is allowed via maximumFileSizeToCacheInBytes.

The underlying reason for the failed download is likely unrelated to Workbox and due to an issue with your web server's handling of a request for that URL.