ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值“未定义”解决。浏览器同步

Question

有时当我运行我的服务器时，控制台会给我一个错误：

Failed to load ‘http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=Lm2wn4p’. A ServiceWorker passed a promise to FetchEvent.respondWith() that resolved with non-Response value ‘undefined’.

我不知道发生了什么，

服务-worker.js：

importScripts('assets/js/cache-polyfill.js');

var CACHE_VERSION = 'app-v1';
var CACHE_FILES = [
    'index.html'
];

self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open(CACHE_VERSION)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(CACHE_FILES);
            })
    );
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        caches.keys().then(function(keys){
            return Promise.all(keys.map(function(key, i){
                if(key !== CACHE_VERSION){
                    return caches.delete(keys[i]);
                }
            }))
        })
    )
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request).then(function(res){
            if(res){
                return res;
            }
            requestBackend(event);
        })
    )
});

function requestBackend(event){
    var url = event.request.clone();
    return fetch(url).then(function(res){
        //if not a valid response send the error
        if(!res || res.status !== 200 || res.type !== 'basic'){
            return res;
        }

        var response = res.clone();

        caches.open(CACHE_VERSION).then(function(cache){
            cache.put(event.request, response);
        });

        return res;
    })
}

有什么想法或解决方案吗？

Answer 1

只是缺少 return 关键字 :)

当在缓存中找到请求时，您的 returning 响应，太棒了！但是当没有缓存时，你没有 return 语句，它最终会 return 来自你的 requestBackend 函数的正确响应，这就是导致问题的原因。

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request).then(function(res){
            if(res){
                return res;
            }
            return requestBackend(event);
        })
    )
});

shorthand:

caches.match(event.request).then(function(res){
  return res || requestBackend(event);
})

Answer 2

这不是修复，而是解决方法

您可以注销service worker，让网页reloads/refreshes缓存。

是您可以在 Firefox 上执行的操作。

是您在 chrome

上可以做的

ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值“未定义”解决。浏览器同步

A ServiceWorker passed a promise to FetchEvent.respondWith() that resolved with non-Response value ‘undefined’. Browser-sync

javascript

node.js

socket.io

service-worker

browser-sync