Доброе утро, у меня есть веб-приложение в производственном окружении. Пользователи используют его каждый день, когда я публикую обновление, и пользователь возвращается в веб-приложение, которое он просматривает в старой версии веб-приложения. Он должен обновить браузер, чтобы загрузить новую версию. Как я могу решить эту проблему? Я не могу сказать, что сотни пользователей обновляют страницу каждый раз, когда я публикую обновление (3-4 раза в неделю).
Простым решением было бы добавить строки запроса, представляющие временную метку или идентификатор сеанса для ваших файлов.
Например, в наших приложениях spring мы просто используем:
<script src="js/angular/lib/app.js?r=<%= session.getId()%>"></script>
Вы можете реализовать одно и то же решение в своей конкретной реализации на сервере.
Классическая проблема с кешем. Если не указано иное (веб-сервером), браузер будет кэшировать активы на основе имени файлов. Поэтому, когда он видит тот же самый script/style/image с тем же именем, он будет 304 и будет обслуживать кешированную версию. Это можно сделать несколькими способами:
Настройте веб-сервер, чтобы сообщить браузерам, что они не кэшируют файл. Это явно неэффективно, так как пользователю придется снова и снова загружать тот же файл.
Добавить параметр строки запроса в имя файла, например my-angular-code.js?x=123, снова неэффективно.
Отпечаток ваших активов. Это подробно описано в документации Rails Asset Pipeline. Существует несколько способов достижения этого, есть задачи grunt и gulp задачи, также доступные для этого. По сути, это процесс изменения имени файла только при изменении содержимого, заставляя браузер считать его новым.
Если вы используете HTML5, вы можете использовать кэш приложений. Он будет автоматически проверять наличие обновлений, и вы можете попросить пользователя обновить кеш.
Вот несколько полезных руководств по его использованию:
Руководство для начинающих по использованию кэша приложений
Позвольте взять это в автономном режиме (автономные веб-приложения)
Первым шагом будет понять, что происходит на стороне сервера прямо сейчас. Понять и настроить Cache-Control и Etag. Хотя вы можете использовать параметры строки запроса, отпечаток пальца - лучший способ, поскольку прокси-серверу будет разрешено кэшировать файл.
Идея заключается в том, что вы устанавливаете свои документы, которые могут измениться (если у вас есть приложение Angular, это скорее всего только ваш index.html) до no-cache и агрессивно кэширует ресурсы, которые ссылаются на этот документ. Когда вы выпускаете новую сборку, все ресурсы переименовываются, а когда приходит запрос, все работает так, как ожидалось.
Я использую grunt-rev в моем приложении Angular. Отлично работает.
Первый шаг - получить метку времени и передать метку времени в качестве параметра запроса в URL для расширений .html.
При загрузке html-контента каждый раз он будет отображаться с разными маршрутами, поскольку временная метка добавляется к URL-адресу.
Пример:
var date = new Date().getTime().toString();
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
}])
$stateProvider.state('app', {
abstract: true,
url: '/app',
cache: false,
templateUrl: 'views/app.html'**+'?t='+ date**
})
.state('app.dashboard', {
url: '/dashboard',
cache: false,
controller: 'DashboardCtrl as showCase',
templateUrl: 'components/dashboard/dashboard.view.html'**+'?t=' + date** ,
})
В дополнение к ответу Andy Gaskell, я использую gulp вместо grunt и использую gulp -rev и gulp -usemin для сопоставления версий js и css. Файлы HTML должны быть настроены так, чтобы они не кэшировались!!! Эта последняя часть очень важна.