Google chrome не соблюдает максимальный возраст в Cache-Control

Question

У меня есть приложение реагирования, в котором я выполняю выборку запроса к бэкэнд-API. Я пытаюсь реализовать кэширование на стороне пользовательского интерфейса для тяжелых запросов.

Я могу сделать это успешно в Mozilla Firefox, и он работает отлично. Но chrome доставляет мне неприятности. Вот фрагмент кода, который я пытаюсь реализовать -

        fetch(URL, {
            signal: this.abortController.signal,
            cache: "default",
            headers: {
                "Cache-Control": "max-age=120"
            }
        })
            .then(response => return response.json())
            .catch(error => {
                if (error.name === "AbortError") {
                    return;
                }
                this.setError(error);
            });

Процесс, которому я следую, чтобы проверить кэш-

1. Сначала открываем вкладку, которая выполняет запрос выборки.
2. Измените вкладку на другую.
3. Вернитесь к вкладке, упомянутой в шаге 1, в течение периода ожидания (120 сек c)

При проверке в на вкладке сети для Firefox, я могу видеть «Переданный» как «кэшированный» и значительное улучшение загрузки страницы и все работает как положено.

Однако, в Chrome я все еще вижу «Размер» с '3,9 КБ' и временем с некоторыми 'мс'.

Я пробовал шаги, упомянутые в - Chrome игнорирует Cache-Control: max-age? без какого-либо успеха.

Я также нашел - https://www.mnot.net/blog/2017/03/16/browser-caching, говоря

Chrome поддерживает только max-age = 0 в запросах и только со значением 0. Это не поддержка min-fre sh или max-stale.

Но он немного староват (2017), и я не уверен, что он по-прежнему верен. * 10 35 *

Также, глядя на спецификацию Fetch - https://fetch.spec.whatwg.org/#concept -request-cache-mode 'default' - это режим кэширования, который мне нужен, но я не уверен, почему он не работает во всех chrome

Может ли кто-нибудь направить меня в правильном направлении? Что нужно сделать, чтобы заставить его работать как в firefox, так и в chrome?

EDIT - Хорошо, использование 'cache' в качестве 'принудительного кэширования' работает в Google chrome и firefox оба.

С - https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

«default» означает использовать поведение браузеров по умолчанию при загрузке ресурсов. Отличается ли поведение по умолчанию для firefox и chrome? Так как это поведение браузера по умолчанию, это зависит от браузера, как они его используют.

Кроме того,

«принудительный кеш» означает, что браузер всегда будет использовать кэшированный ответ, если в кэше найдена соответствующая запись, игнорируя достоверность ответа. Таким образом, даже если в кеше найдена действительно старая версия ответа, она всегда будет использоваться без проверки.

Я не уверен, как работает принудительный кеш для chrome, но это то, что мне не нужно.

Answer 1

Это проблема хрома / хрома, о которой сообщалось в 2011 году и которая до сих пор остается открытой:

С самозаверяющими сертификатами SSL Chrome полностью игнорирует все директивы кэширования и всегда перезагружает весь контент.

https://bugs.chromium.org/p/chromium/issues/detail?id=103875

Я вижу несколько альтернатив:

• Вы можете стать СА, подписать свои сертификаты как СА и импортировать этот CA в chrome Authorities (в chrome: // settings / certificate), см. Getting Chrome для принятия самозаверяющего сертификата localhost для получения более подробной информации. Это решение, которое я использую на данный момент.
• Используйте бесплатный сертификат SSL с Letsencrypt. Это не сработало для меня, потому что я использую домен . docker и не является действительным суффиксом publi c и поэтому не может получить сертификат.
• Вы можете использовать URL-адреса http вместо https для тестирования кэша, но Chrome вызовет смешанную ошибку содержимого, которую необходимо отключить в настройках chrome.
• Просто используйте Firefox для тестирования кэша.

Надеюсь, это поможет, удачи.