Я собираюсь выпустить веб-приложение с несколькими страницами. Каждая страница представляет собой пакет Vue. js. Таким образом, на каждой странице есть один javascript пакет и один CSS файл, а также один div с уникальным идентификатором на странице, где монтируются элементы приложения.
Мне нужно чтобы иметь возможность обновлять файлы stati c CSS / JS без существенного нарушения работы службы. Я использую бэкэнд Google Firebase для данных приложения, поэтому, если клиентский код не обновляется при развертывании обновления, он может попытаться записать в базу данных неправильный формат. Таким образом, кеширование файлов сценариев было проблемой.
Сначала у меня сложилось впечатление, что кэши становятся недействительными, когда изменяется ха sh содержимого файла, но, видимо, это не так. Итак, основной вопрос: Как я могу аннулировать кэш браузера этих файлов при каждом обновлении контента?
Что усложняет то, что веб-приложение может быть встроено в клиенты веб-сайты, добавив небольшой фрагмент на страницу. И я не хочу изменять эти фрагменты для каждого обновления - поэтому я не могу изменить имя файла с каждой версией. Например, someoneswebsite.com.au/app/index.html:
<div id="my-app-mount"></div>
<script src="https://mywebapp.com.au/app/homepage.js"></script>
Что не будет работать для меня
Добавление строки запроса или с изменением имя файла с каждым обновлением (или другие уловки на стороне сервера в PHP): я не могу использовать какой-либо препроцессор, поскольку фрагмент должен быть встраиваемым в другие сайты только в HTML.
Просто установить короткий TTL в кеше для этих предметов. Мне нужно, чтобы обновления работали в одночасье, поэтому мне пришлось бы go до часа или двух. И это приводит к следующему пункту:
Полное отключение кэширования для этих элементов: я не хочу порвать свой сервер с дополнительным трафиком c.
Просто говорю своим пользователям выполнить полную перезагрузку, если у них есть какие-либо проблемы - это продукт для клиентов.
Мои идеи для решения до сих пор
Меняйте имя файла при каждом обновлении app-1.0.js, app-1.1.js и т. Д. И добавляйте сценарий 'bootstrap', который получает последнюю версию на основе строки версии, прочитанной из Firebase , Тем не менее, это добавляет дополнительную задержку к каждой загрузке страницы, поскольку нам нужно получить информацию из базы данных перед загрузкой основной полезной нагрузки JS.
В каждом пакете javascript добавьте проверку сравнить версию приложения с номером версии, полученным из Firebase. Если скрипт устарел, мы можем программно аннулировать кэш и обновить sh страницу (но как это сделать?)
Некоторая комбинация заголовков кэша HTTP, чтобы всегда аннулировать кэшированную копию, если хешированное содержимое не соответствует серверу.