问题描述
从 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 中编写的逻辑，其行为取决于当前的网络/服务器状况，以及您本地缓存的状态。