通过 fetch 强制使用 HTTP 缓存

Question

我试图使用 HTTP 缓存来做一些简单的事情，但我无法让它工作。

我正在使用以下选项fetch()。

fetch('test', {
        cache: 'force-cache',
        headers: {
            'Cache-Control': 'max-age=3600',
            'Pragma': 'max-age=3600', // added for redundancy
        }
    })
    .then( response => response.json() )
    .then( data     => console.log(data) )
    .catch( error   => console.error(error) )
    .finally( ()    => console.log('Done') );

端点test只是返回一个具有以下格式的json

{
    "date": "...", /* date in 'Y-m-d H:i:s' format */
}

我已确保响应也具有 Cache-Control 标头。当我检查响应标头时我可以看到它。

HTTP/1.1 200 好
服务器：阿帕奇
缓存控制：公共，最大年龄=3600
内容长度：30
保持活动：超时=5，最大值=94
连接：保持活动状态
内容类型：application/json；字符集=UTF-8

请求标头似乎也是正确的。

连接：保持活动状态
编译指示：最大年龄=3600
缓存控制：max-age=3600
接受： */*
Sec-Fetch-Site：同源
Sec-Fetch-Mode：cors
Sec-Fetch-Dest：空

我尝试在一分钟内一遍又一遍地运行相同的获取，期望获得相同的日期，不变，但结果总是“新的”，可以这么说。

我对 HTTP 缓存的工作原理是否有根本性的误解，或者我最好只是在后端缓存该值？

---

我目前正在通过在标签内运行以下代码进行测试<script>。

HTTP/1.1 200 OK
Server: Apache
Cache-Control: public, max-age=3600
Content-Length: 30
Keep-Alive: timeout=5, max=94
Connection: Keep-Alive
Content-Type: application/json; charset=UTF-8

我期望返回相同的日期时间 20 次（缓存第一个响应）

Answer 1

或者，如果您不想依赖 max-age 并且希望立即从缓存中渲染，请考虑探索我的 CacheFirst 库的功能，网址为https://github.com/lakshminathan/CacheFirst。该库利用 localStorage 和 indexedDB 进行存储，并使用 SHA-256 来比较新旧响应，允许您立即提供缓存的响应，并且仅在新响应不同时才重新渲染。与 max-age 方法相比，这种方法减少了我们提供过时数据的时间。