Estoy tratando de usar HTTP Cache para algo simple, pero no puedo hacer que funcione.

Estoy usando las siguientes opciones para 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') );

El punto final test simplemente devuelve un json con el siguiente formato

 { "date": "...", /* date in 'Ymd H:i:s' format */ }

Me aseguré de que la respuesta también tenga el encabezado Cache-Control. Puedo verlo cuando inspecciono los encabezados de respuesta.

HTTP/1.1 200 Aceptar
Servidor: Apache
Control de caché: público, edad máxima = 3600
Longitud del contenido: 30
Keep-Alive: tiempo de espera = 5, máximo = 94
Conexión: Keep-Alive
Tipo de contenido: aplicación/json; conjunto de caracteres = UTF-8

Los encabezados de solicitud también parecen ser correctos.

Conexión: mantener vivo
Pragma: edad máxima = 3600
Control de caché: edad máxima = 3600
Aceptar: */*
Sec-Fetch-Site: mismo origen
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: vacío

Traté de ejecutar la misma búsqueda una y otra vez en el lapso de un minuto, esperando obtener la misma fecha, sin cambios, pero los resultados siempre fueron "nuevos", por así decirlo.

¿Tengo un malentendido fundamental de cómo funciona HTTP Cache o es mejor simplemente almacenar en caché el valor en el back-end?

Actualmente estoy probando ejecutando el siguiente código dentro de una etiqueta <script> .

 let x = 0; const interval_id = setInterval(() => { fetch('test', { ... }); if (++x === 20) { window.clearInterval(interval_id); } }, 1500);

Espero que me devuelvan la misma fecha y hora 20 veces (almacene en caché la primera respuesta)