Firefox“A ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值‘undefined’解决”，用于本地服务器

如何解决Firefox“A ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值‘undefined’解决”，用于本地服务器

从 Visual Studio 运行本地服务器时，Firefox 会出错并且无法正确加载页面。它显示此错误：

Failed to load ‘https://localhost/js/mqtt.js’. A ServiceWorker passed a promise to FetchEvent.respondWith() that resolved with non-Response value ‘undefined’. serviceworker.js:19:10

它在 Chrome 上运行良好。当服务器位于基于云的 Azure 服务器上时，它也可以在 Firefox 上正常工作。这是服务工作者的代码：

// Service worker file for PWA
var CACHE_NAME = 'v5';
var urlsToCache = [
    '/index.html'
];

self.addEventListener('install',function (event) {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch',event => {
    event.respondWith(
        fetch(event.request).then(response => {
            cache.put(event.request,response.clone());
            return response;
        }).catch(_ => {
            return caches.match(event.request);
        })
    )
});

我不确定这个错误是由什么引起的。一种解决方法是转到“about:debugging#workers”并手动取消注册 serviceworkers。然后刷新页面将允许它正确加载。但是我需要一个解决方案，而不是一个解决方法。

解决方法

根据该代码，如果满足以下两个条件，我希望看到该错误消息：

fetch(event.request) 拒绝。
caches.match(event.request) 导致缓存未命中，从而导致使用 undefined 解析 promise。

这并没有什么特别之处——这只是您在 Service Worker 中编写的逻辑，其行为取决于当前的网络/服务器状况，以及您本地缓存的状态。