spa web apps.
У нас регулярно катятся релизы фронта и как обеспечить чтобы у пользователя который заходил на сайт допустим неделю назад и у него старая версия - закeшированных данных в LS и самих скриптов.
Вот он открывает сайт начинает ходить а бэкенд за неделю тоже обновился и возвращает какие-то данные новые, или чего-то не возвращает.
Соответственно у пользователя возникает ошибка на клиенте, два вопроса:
1) если он просто обновит страницу при возникновении ошибки у меня подтянется новая версия скриптов а то что в LS лежит не будет соответствовать новой версии. Как сделать какой-то сигнал коду фронтенд-приложения что надо весь кэш почистить и подтянуть по новой?
2) можно ли как-то не дожидаться того что пользователь будет обновлять страницу за ошибки, а прямо в runtime работающего фронтен-приложения понять что код/кеш протух и надо как-то всё обновить?
Возможно ответом на это является сервис worker но я так понимаю что это только часть решения.
Я у себя использую две стратегии: 1) При сборке бандла плагином формируется хэш всех файлов и кладётся рядом с остальной статикой. Дальше фронтенд при каждом переходе по страницам шлёт запрос для получения этого хэша. Если запрос вернул значение хэша, отличное от того что у нас было - значит что-то поменялось и вместо подтверждения перехода я делаю window.location = to.fullPath 2) При сборке приложения в него вшивается текущий номер версии. И nginx, через который и раздаётся статика, и проксируются запросы к бекенду, при каждом ответе от бекенда добавляет хедер с текущей версией. На стороне приложения добавляется интерцептор всех ответов, где проверяется хедер с версией. Если она отличается от той версии, что вшита в текущую сборку - значит вышла новая версия. Тогда показываем пользователю всплывашку "обнови страницу плиз"
Кирилл, спасибо за подробный ответ! Второй вариант мне нравится больше. Сейчас прикидываю всё ли у нас есть чтобы его реализовать
ну у меня они обе вместе работают. Второй метод просто спасает в ситуациях, когда флоу пользователя не предусматривает переход по страницам. Например, он просто сидит на одной и той же форме, отправляет её и она сбрасывается. Плюс первого метода в том, что это незаметно для пользователя происходит.
Обсуждают сегодня