解决！如何使用cache.put将jpg添加到缓存中？

问：

这个问题涉及 javascript 缓存 api。

我使用 cache.add 将 jpg 添加到缓存中没有问题。但到目前为止，我还没有弄清楚如何使用 fetch 和 cache.put 来做同样的事情。我做了很多搜索并浏览了很多帖子，但到目前为止，我还没有看到一个基本的例子。

以下代码将jpg_url作为键添加到缓存中。但是当我的 pwa 尝试离线显示jpg_url时，不会显示任何图像。显然，我的代码实际上并没有将jpg保存在缓存中。我错过了什么？

更新：已解决！cache_url指向 jpg。下面的代码会将该 jpg 保存在缓存中，并以 cache_url 为键。秘诀是 await response.blob（）

async function cache_fetch (cache,cache_url) {
    options = {
        method: "GET",
        mode: "cors",
        headers: {'Content-Type': 'image/jpeg'}
    }
    response = await fetch(cache_url, options)
    .then (async function(response) {
        if (response.status === 200) {
            my_blob = await response.blob();
            cache.put(cache_url,new Response(my_blob, {type:'image/jpeg'}))
            .then(function() {
            // do stuff
            })
            .catch(function(error) {
            // do other stuff
            });
        }   else {
            // handle status not 200
        }
    })
    .catch(function(error) {
        // handle fetch error
    });
}