已解决：如何使用cache.put将JPG存入Cache API缓存？

之前用 cache.add() 能正常缓存 JPG 图片，但一直找不到用 fetch 配合 cache.put() 实现该功能的靠谱示例。自己写的代码虽然能把图片 URL 作为键加到缓存里，但 PWA 离线时图片根本显示不出来——显然图片内容没真正存进去。

现在问题解决了：当 cache_url 是目标 JPG 的地址时，下面的代码可以把该图片以 cache_url 为键存入缓存，核心要点是用 await response.blob() 处理响应内容：

async function cache_fetch(cache, cache_url) {
    const options = {
        method: "GET",
        mode: "cors",
        headers: {'Content-Type': 'image/jpeg'}
    };
    try {
        const response = await fetch(cache_url, options);
        if (response.status === 200) {
            const my_blob = await response.blob();
            try {
                await cache.put(cache_url, new Response(my_blob, { type: 'image/jpeg' }));
                // 缓存成功后执行的逻辑
            } catch (cacheError) {
                // 缓存操作失败的处理逻辑
            }
        } else {
            // 响应状态码非200时的处理逻辑
        }
    } catch (fetchError) {
        // 请求失败的处理逻辑
    }
}

关键说明 #

直接使用 fetch 返回的响应对象调用 cache.put() 时，可能因为响应流已被消耗或格式不匹配，导致缓存的内容无效。通过 response.blob() 将响应转换为 Blob 对象，再基于该 Blob 创建新的 Response 对象，就能确保缓存的是完整可用的图片数据，离线时可以正常读取显示。

内容的提问来源于stack exchange，提问作者Gmap4 guy