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

Question

我对JavaScript的缓存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)时，我会得到错误

DOMException: Cache.put()遇到了一个网络错误

所有其他文件都被缓存在静态缓存中。我需要说的是，app.js文件正在开发中(~12 MB)。它将因生产而缩小。我的问题是：

怎样才能更仔细地调查错误呢？错误信息只是给了我这个消息。有没有办法获得更详细的错误信息？造成这个“网络错误”的原因是什么？文件太大了吗？或者，当服务工作人员试图将文件放到缓存中并因此抛出错误时，文件根本没有下载吗？

非常感谢事先给出的提示！

Answer 1

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

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