Как я могу принудительно обновить клиентов SPA, если есть новая сборка? - PullRequest
Новая
       53

Как я могу принудительно обновить клиентов SPA, если есть новая сборка?

0 голосов
/ 30 мая 2019

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

Есть ли способ сказать клиенту, чтобы он смотрел на ресурс (скажем, что-то вроде build.txt), и если этот ресурс содержит номер сборки, превышающий текущий загруженный, делает кэш недействительным и обновляет его?

Ответы [ 2 ]

1 голос
/ 30 мая 2019

Поскольку этот вопрос помечен progressive-web-apps Я собираюсь предположить, что он устанавливает сервис-работника, который агрессивно кеширует ресурсы.

Этот пост хотя и показывает всплывающее окно «Доступна новая версия» для PWA - даже если это не то поведение, которое вам нужно, оно многое объясняет о том, как обновляются работники службы.

Этот вопрос / ответ также рассказывается о том, как часто работник службы проверяется на наличие обновлений.

В этом вопросе / ответе рассказывается о плюсах / минусах, связанных с использованием skipWaiting для своевременного обновления клиента.

Редактировать: Если вы просто имеете дело с обычным HTTP-кешем, попробуйте использовать location.reload(true) (перезагрузить с установленным флагом forcedReload) при обнаружениичто на сервере есть более новая версия.В прошлом я делал это, помещая номер выпуска в код js во время сборки / выпуска, и заставляя сервер добавлять свой номер выпуска к каждому ответу в качестве заголовка.Простое сравнение значений после вызова ajax может подтвердить, совпадают ли номера версий пользовательского интерфейса и сервера, и принять меры, если они не совпадают.

0 голосов
/ 15 июня 2019

Благодарю Jono Job за помощь в достижении этого решения.

В итоге я сделал следующее:

В своем конвейере сборки я добавил следующие две строки перед сборкой клиента 

- sed -i -e "s/{{build-number}}/${CI_COMMIT_SHORT_SHA}/g" ./src/environments/environment.prod.ts
- echo $CI_COMMIT_SHORT_SHA > ./src/assets/build.txt

Первая строка помещает хеш коммита в скомпилированный пакет javascript, вторая создает текстовый файл с хэшем коммита в качестве содержимого.

Затем я настраиваю службу Angular, которая использует сервис Angular.http-клиент для опроса текстового файла, который содержит хеш коммита.Он проверяет, отличается ли хеш в текстовом файле от хеша, загруженного из комплекта javascript.

Теория здесь заключается в том, что комплект Javascript можно кэшировать, но запрос http для получения build.txtфайла не будет.Позвольте мне проверить разницу между хешами сборки, хранящимися в них.

Если служба обнаружит разницу в сборках, она выдаст пользователю уведомление об обновлении, которое после нажатия обновит страницу.

Обновление выполняется с помощью window.location.reload(true).TypeScript говорит мне, что параметр устарел, хотя он все еще работает.

Вот суть вышеупомянутой службы Angular: https://gist.github.com/alshdavid/032ea535f222646dc74420e20b28faa1

В моем APM я вижу, что в течение пары часовНажав обновление, каждый клиент был обновлен до последней версии.

Так что, вероятно, работает.

...