Пользователь не может видеть обновленный веб-сайт angular без очистки кеша

Цель: цель состоит в том, чтобы конечный пользователь мог видеть обновленный веб-сайт без необходимости вручную очищать кеш.

Настройка: клиентская сторона: Angular 1.4 серверная сторона: веб-приложения Azure Метод развертывания: Azure связывается с веткой в ​​учетной записи bitbucket и обнаруживает обновления, отправленные в эту учетную запись из git.

Проблема : Служба контроля качества сообщила, что не может видеть обновления. Я упомянул, что это, вероятно, кеш и очистить кеш, чтобы увидеть обновления, как указано на следующем веб-сайте:

https://pixpa.zendesk.com/hc/en-us/articles/201555604-My-website-changes-are-not-showing-up-How-can-I-clear-my-browser-s-cache-

Она указала, что пользователи этого веб-сайта не будут знать об очистке своего кеша, чтобы увидеть обновление (даже это так же просто, как нажать ctrl+shift+r).

Исследования и шаги, предпринятые для решения проблемы:

Я исследовал эту тему и добавил следующие метатеги в index.html, чтобы остановить кеширование:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="0" />

Я проверил это изменение, обновив заголовок страницы, и, похоже, это сработало с ее стороны, поскольку заголовок страницы обновился без необходимости очистки кеша. Однако сегодня служба контроля качества сообщила, что страница отображается неправильно, и ей необходимо обновить кеш, чтобы страница отображалась правильно. Много изменений было внесено в структуру Модель/представление/что угодно, поэтому я не могу определить, где именно в структуре произошло бы это критическое изменение.

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


azure caching angularjs
person user2819911    schedule 03.12.2015    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вероятно, это должно решить вашу проблему. Я нашел это здесь: https://www.reddit.com/r/angularjs/comments/3j77a2/prevent_browser_template_caching/

$httpProvider.interceptors.push(['constants', function(constants){
    return {
        request: function(config){
            if(config.url.indexOf('partials/') > -1){
                var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                config.url = config.url + separator + 'c=' + constants.cache;
            }

            return config;
        }
    };
}]);

Это добавит параметр очистки кеша к вашим запросам на получение файлов шаблонов. Пример ищет все вызовы /partials, но я бы предложил изменить это, чтобы искать запросы, оканчивающиеся на .html.

Самый простой способ сделать это — просто использовать +new Date() вместо constants.cache. Таким образом, он всегда будет получать самую последнюю версию файла шаблона. Если вы не заботитесь о кэшировании файлов шаблонов, когда они не были изменены, это легко исправить.

$httpProvider.interceptors.push([function(){
    function endsWith(str, suffix) {
       return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    return {
        request: function(config){
            if(!endsWith(config.url, '.html')) return config;

            config.url = config.url + '?c=' +new Date();

            return config;
        }
    };
}]);
person DerekMT12    schedule 03.12.2015
comment
Спасибо, Дерек. Я добавляю этот перехватчик и дам вам знать, как у меня дела. - person user2819911; 03.12.2015

arrow_upward
0
arrow_downward

Браузеры должны кэшировать частичные фрагменты только в том случае, если обслуживаемый файл .html имел заголовок управления кешем, указывающий им кэшировать его.

В этом ответе показан заголовок, необходимый для предотвращения кэширования: Как управлять кэшированием веб-страниц во всех браузерах?

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

В интересах снижения нагрузки на ваш сервер вы можете изменить заголовок, например, для кэширования на один день, или 1 час, или на что-то еще, что соответствует вашему циклу выпуска / требованиям пользователя.

Я не думаю, что ваш подход к использованию метатегов HTML будет работать в этом случае, поскольку частичные страницы не загружаются/не отображаются браузером как html-страницы как часть обычного пайплайна страниц. Они загружаются асинхронно и компилируются Angular. Поэтому вам нужно получить управление кешем на более низком уровне (то есть в заголовке). Это может зависеть от браузера, но если они не работают, я ожидаю, что именно поэтому.

person James Gaunt    schedule 03.12.2015

arrow_upward
0
arrow_downward

Если представление отображается неправильно, это проблема css и/или javascript (браузер кэширует css и js). Самый простой обходной путь - это поставить случайное число или, в моем случае, я поместил свою веб-версию в свой файл css и js и изменил ее, например, при обновлении своего веб-сайта.

example.com/style.css?v=11009

при этом ваш клиентский браузер всегда будет получать css вашего веб-сайта, если версия будет изменена (поскольку браузер будет считать, что это два разных файла)

person Ansel    schedule 05.12.2015
comment
не забудьте принять это как ответ, если он работает, поэтому он также поможет людям, у которых такая же проблема - person Ansel; 27.12.2015