服务工作人员无法在“缓存”上执行“放置”

Question

我有一个网络应用程序，它将数据存储在浏览器中以支持“离线”工作。

下面是相关代码：

function getPosCacheData(request, cacheName) {

var storageUrl = request.url;

var checkResponse = navigator.onLine;

return caches.open(cacheName).then(function(cache) {
    if (checkResponse == true) {
        return fetch(request).then(function(networkResponse) {
            if (networkResponse.ok == true) {
                cache.put(storageUrl, networkResponse.clone());
            }

            return networkResponse;
        }).catch(function(error) {
            return cache.match(storageUrl).then(function(response) {
                if (response)
                    return formFilter(response);
                else
                    return fallPosBackResponse('live');
            });
        });
    } else {
        return cache.match(storageUrl).then(function(response) {
            if (response) {
                return response;
            } else {
                return fetch(request).then(function(networkResponse) {
                    if(networkResponse.ok == true){
                        cache.put(storageUrl, networkResponse.clone());
                    }

                    return networkResponse;
                }).catch(function(error) {
                    return fallPosBackResponse('css');
                });
            }
        });
    }
});
}

上面的代码引发了这个错误：

Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported
at service-worker.js

我对此错误所做的研究提到清除缓存可以解决此错误，但不幸的是它不起作用。

我非常感谢您帮助修复此错误。

Answer 1

您正在尝试存储状态代码为 206 的 Response 对象。cache_storage 规范禁止这样做。请参阅此处的步骤 6：

https://w3c.github.io/ServiceWorker/#cache-put

206状态码表示服务器只返回了响应正文的一部分。通常，服务器仅在请求包含Range标头时才执行此操作。看：

HTTP 206 Partial Content 状态消息意味着什么以及如何完全加载资源？

您可以更改上面的代码以检查带有Range标头的请求，然后创建一个不带违规标头的新请求。这将导致将整个响应存储在cache_storage中，而不是尝试仅存储部分响应。由于您可以返回完整的响应来满足范围请求，因此当您离线时，这应该可以正常工作。