При использовании внешних файлов js браузеры могут быть вынуждены перезагрузить файлы. Смотрите здесь .
Недавно я обнаружил, что сценарии INLINE также кэшируются, по крайней мере, в Chrome, версия 80.0.3987.132, пример фрагмента:
<html>
<head>
<script>alert("I am cached!");</script>
</head>
<body>
<script>alert("Me too!");</script>
</body>
</html>
Каков способ обновления встроенные сценарии?
Обновление 1: я должен упомянуть, что веб-сервер, возвращающий содержимое, использует HTTP 2.0
Обновление 2: Решение, которое работает , - это иметь вспомогательный скрипт в качестве базы и при загрузке страницы получать «реальный» контент скрипта через ajax или через websocket, а затем добавить его в заголовок следующим образом:
function addScript(content){
let s = document.createElement('script');
s.innerHTML = content;
document.head.appendChild(s);
}
Это делает работу, но не оптимально так как требуется больше запросов, чем необходимо.
Обновление 3: заголовки, отправленные из бэкэнда, похоже, не работают, используя следующие заголовки:
Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") // HTTP 1.1.
Header().Set("Pragma", "no-cache") // HTTP 1.0.
Header().Set("Expires", "0") // Proxies.
Обновление 4: согласно ответу Jinxmcg, do c https://v8.dev/blog/code-caching-for-devs Don’t change URLs упоминает:
мы можем однажды решить связать кеши с исходным текстом, а не с исходным URL, и этот совет больше не будет действительным.
Вероятно, этот день наступил и также применяется к встроенным сценариям.
Спасибо всем за участие
Окончательное решение (работает по крайней мере в моих обстоятельствах):
1 Заголовки бэкэнда:
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate, max-age=0") // HTTP 1.1.
w.Header().Set("Pragma", "no-cache") // HTTP 1.0.
w.Header().Set("Expires", "0") // Proxies.
2 Случайные строки в HTML, JS и CSS, пример:
<html>
<head>
<style>
--cache-color: #8528cc; //Random hex color generated by backend
</style>
<script>
console.log("<?php echo date(); ?>");
alert("I am cached!");
</script>
</head>
<body>
<div>Hidden DIV with a random value: <?php echo date(); ?></div>
<script>
console.log("<?php echo date(); ?>");
alert("Me too!");
</script>
</body>
</html>