缓存 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)被调用时，我得到了错误

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

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

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

非常感谢您提前提供的任何提示！

Answer 1

您可能正在使用 Chrome、Firefox 或其他基于 Chromium 的浏览器进行开发。在这种情况下，开发人员工具的network tab 可能会阐明网络请求究竟是如何失败的。您可以找到很多指南（包括 Chromium 团队的 this one），其中详细说明了如何做到这一点。

虽然我们缺乏很多信息，但我的第一个猜测是你的 service worker 是在编译期间安装的，并且在下载 js/app.js 文件时，Webpack（或你使用的任何东西）会更改文件并导致下载到被打断。