Question

我正在尝试为我的网络应用添加一些离线功能。在某些情况下，我想从缓存中的请求/响应中获取数据，更改它，并将其作为新的请求/响应对添加回缓存。

到目前为止，我已经能够从缓存中获取数据并对其进行修改，但是当我将其放入缓存时，我得到一个空的缓存条目（Content-Length：0）。编辑：实际上，Chrome开发者工具在预览窗格中显示正确的对象，但在缓存条目列表中显示“Content-Length：0”和“Time Cached：1/1/1970”零时59" 分59秒。

然后，当尝试从缓存中再次获取它时，我得到一个不匹配的错误，并且cache.match（）返回undefined。

这是我到目前为止所做的：

return caches.open(CACHE_NAME).then(function(cache) {
    return cache.matchAll().then(function(responses) {
        var resp = responses[0].clone();
        return resp.clone().json().then(function (datosResp) {

            var nuevaMed = nuevaMedicionDesdeMedicion(datosResp);
            var urlACachear = new URL('obra/' + nuevaMed.obraId + '/mediciones/' + nuevaMed.id, urlBase);

            var nuevaMedJSON = JSON.stringify(nuevaMed);
            var blob1 = new Blob([nuevaMedJSON], { type: "application/json;charset=utf-8" });
            var myHeaders = new Headers(resp.headers);

            var resACachear = new Response(blob1, { "status": 200, myHeaders });

            return cache.put(urlACachear, resACachear.clone()).then(function() {
                // Whatever...
            });
        });
    });
});

关于如何做到这一点的任何想法？甚至可以存储并正确检索我自己的请求和响应吗？

Answer 1

Time Cached: 1/1/1970 0:59:59是已知的bug in Chrome's DevTools。我想象Content-Length: 0是同一个错误。

您所描述的内容听起来好像您的新Response已正确写入缓存，但是您对match()的调用出现了问题，导致您无法找到缓存的条目

作为快速健全性检查，您可以在JS控制台中运行以下代码，以获取在CACHE_NAME缓存中用作密钥的所有URL的列表。确保您看到了打算缓存的网址，然后明确尝试使用其中一个网址执行match()。

const cache = await caches.open(CACHE_NAME);
const requests = await cache.keys();
const urls = requests.map(request => request.url);
console.log(urls):

在缓存中放入“手工制作”的响应

1 个答案: