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

如何解决缓存 API - Cache.addAll() 遇到网络错误

我遇到了 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）。它将在生产中缩小。我的问题是：

我怎样才能更仔细地调查错误？错误消息只是给我这个消息。有没有办法获得更详细的错误信息？这种“网络错误”的原因可能是什么？会不会是文件太大了？或者，当 Service Worker 试图将文件放入缓存时，该文件根本没有被下载，从而引发错误？

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

解决方法

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

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