Cache API-Cache.addAll()遇到网络错误

Question

我在JavaScript的Cache API上遇到问题。我正在开发PWA，所以我的应用程序中有一个serviceWorker.js。在这个serviceWorker.js文件中，我想将文件添加到我的静态缓存中。所以我将其配置为缓存静态文件：

var CACHE_STATIC_NAME = 'static-v544';
var CACHE_DYNAMIC_NAME = 'dynamic-v544';
var STATIC_FILES = [
'/css/app.css',
'/js/app.js',
'/js/vendor.js',
'/js/manifest.js',
'/js/utility.js',
'/offline'
];
self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing service worker...', event);
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(function(cache) {
//console.log('[Service Worker] Precaching App Shell');
cache.addAll(STATIC_FILES)
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
})
);
});

事实上，这工作得很好，除非app.js文件出现问题。所以当调用cache.addAll(STATIC_FILES)时，我得到错误

Uncaught(in promise(DOMException:Cache.put((遇到网络错误

所有其他文件都缓存在静态缓存中。我需要说的是，app.js文件正在开发中，非常大(~12MB(。生产时会收缩。我的问题是：

如何更仔细地调查错误？错误消息只是给我这个消息。有没有办法获得更详细的错误消息？这是什么原因造成的；网络错误"；？可能是文件太大了吗？或者，当服务工作者试图将文件放入缓存时，文件根本没有被下载，因此引发了错误？

Answer 1

您可能正在使用Chrome、Firefox或其他基于Chromium的浏览器进行开发。在这种情况下，开发人员工具的网络选项卡可能会揭示网络请求到底是如何失败的。你可以找到很多指南(包括Chromium团队的这本指南(，其中对如何做到这一点有更多的解释。

尽管我们缺少很多信息，但我的第一个猜测是，您的服务工作者在编译过程中被安装，并且在下载js/app.js文件时，Webpack(或您使用的任何东西(会更改文件并导致下载中断。