maximumFileSizeToCacheInBytes使SW冗余

问题描述

我正在使用workBox-webpack-plugin（5.1.4）生成服务工作者。

在wepback中，我已将GenerateSW添加到具有下一个配置的插件中

{
  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)(.*)/,}],}

效果很好。

但是当我将maximumFileSizetoCacheInBytes：20 * 1024 * 1024添加到配置中时，抛出了以下错误：

我想念什么？

解决方法

这听起来像是对maximumFileSizeToCacheInBytes的更改，意味着一个额外的（大）文件正在添加到您的预缓存清单中，然后尝试下载该文件失败。

如果无法下载预缓存清单中列出的所有内容，则Service Worker安装将失败，并且下次注册Service Worker时将重新尝试安装。

如果您需要调试哪个URL失败，则可能会在Chrome的DevTools的“网络”面板中看到与失败的下载相对应的条目。但是根据您的描述，很可能是通过maximumFileSizeToCacheInBytes允许的任何大文件的URL。

下载失败的根本原因可能与Workbox无关，并且是由于Web服务器处理对该URL请求的问题。