Question

我有一个服务工作者来缓存我的应用程序的静态资源。

在我的一个用例中，我需要从网络中获取资产并从缓存中获取相应的缓存资产，然后只有在内容不同时才需要将新资产存储在缓存中并执行其他操作处理它。出于不同的原因，我必须知道该资产是否已经发生变化。

是否可以使用fetch API的Response接口执行类似的操作？

在Response.Body界面声音相关https://developer.mozilla.org/en-US/docs/Web/API/Response

下实现的blob（）或text（）函数

但是在开始实验之前，我会对我的选择以及这种方法中的任何警告都有一些线索。

还有一个想法 - 如果文件自缓存后没有改变，是不是有办法从服务器获得304响应？

Answer 1

我还没有在服务工作者中尝试304回复，但这是一个很好的开始。

etag响应标头也会指示更改。您的服务器必须通过发送所需的CORS标头来授权您的应用程序查看Access-Control-Expose-Headers: etag标头：response.headers.get('etag')。否则null会返回width: 10px

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

例如，Nginx似乎从上次修改时间和内容长度（more info）生成弱etag值。因此，如果发生了使文档保持相同长度的更改（即CSS从width: 20px更改为DynamicDestinations，则修改时间将是更改的唯一指标。可以使用字符串来比较差异与实际内容比较函数。

Answer 2

尝试此代码

caches.open('cache-and-update-v1.1.4').then(function (cache) {
    cache.match('/').then(m => m.text()).then(b=>{
        fetch('/').then(res=>res.text()).then(e => console.log(b.localeCompare(e)))
    })
})

Answer 3

我最后比较了网络响应的最后修改标头和缓存响应，正如cøder所回答的那样，可以（或应该）使用etag标头。

关于304 - 浏览器的缓存对此进行了模糊处理，服务工作者只获得200.此外，即使您可以获得该信息也不可靠，因为自插入服务后资产可能已被重新访问工人的缓存。

正如问题所述，在某些情况下，我仍然需要比较该资产的实际内容，在这种情况下，我在响应中使用text()方法来获得对实际内容的承诺。如果您还需要它，请务必在使用之前克隆响应。

ServiceWorkers - 如何比较获取响应和缓存资产

3 个答案: