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

【问题标题】：ServiceWorkers - how to compare between fetch response and cached assetServiceWorkers - 如何比较获取响应和缓存资产
【发布时间】：2020-01-24 20:54:29
【问题描述】：

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

在我的一个用例中，我需要从网络中获取资产并从缓存中获取相应的缓存资产，然后只有当它们的内容不同时，我才需要将新资产存储在缓存中并执行其他操作对其进行处理。由于不同的原因，了解该资产是否已更改对我来说至关重要。

是否可以使用 fetch API 的 Response 接口做类似的事情？

在 Response.Body 接口下实现的 blob() 或 text() 函数听起来很相关https://developer.mozilla.org/en-US/docs/Web/API/Response

但在开始实验之前，我想了解一下我的选择以及这种方法的任何注意事项。

再想一想 - 如果文件自缓存后没有更改，是否有办法从服务器获取 304 响应？

【问题讨论】：

标签： javascript service-worker

【解决方案1】：

我还没有在 Service Worker 中尝试过 304 响应，但这是一个很好的开始。

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

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

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

【讨论】：

【解决方案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)))
    })
})

【讨论】：

【解决方案3】：

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

关于 304 - 这被浏览器的缓存混淆了，服务工作者只得到 200。此外，即使您可以获得该信息，它也不可靠，因为资产可能在插入服务后被重新缓存工作人员的缓存。

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

【讨论】：