ReactJS одностраничное приложение.Невозможно получить обновленную версию в Chrome

Question

У нас есть приложение, построенное на onReactJS и развернутое с использованием S3 и CloudFront. Мы постоянно сталкиваемся с проблемой клиентов, когда им необходимо выполнить полное обновление веб-приложения, чтобы получить новейшее SPA-приложение.

Чтобы решить эту проблему, я наткнулся на следующую статью.

Добавить уведомление о перезагрузке в create-реагировать-app & registerServiceWorker.js

Подход в этой статье успешно вызывает событие под названием «newContentAvailable» во всех трех браузерах, т.е. FF, Chrome и Safari. При возникновении этого события логика пытается перезагрузить обновленную версию, используя window.location.reload(true). Это обновляет FF и Safari успешно, но Chromes все еще получает старую версию.

Я пытался использовать другой подход для перезагрузки в Chrome, но безуспешно. При поиске по этой проблеме я наткнулся на следующий код

$.ajax({
    url: window.location.href,
    headers: {
        "Pragma": "no-cache",
        "Expires": -1,
        "Cache-Control": "no-cache"
    }
}).done(function () {
    window.location.reload(true);
});

Я не уверен, что я делаю здесь неправильно. Пожалуйста, помогите.

Answer 1

Существует два типа файлов для развертывания:

• Общие файлы, такие как index.html, которые не должны кэшироваться браузером
• Сборка файлов с помощью хеш-ключейНапример, 18.a7e57db0.chunk.js, который можно безопасно кэшировать, поскольку изменения в вашем источнике приведут к созданию новых файлов сборки

Чтобы установить кэширующие заголовки HTTP, вы можете использовать инструменты CLI AWS S3 или другие инструменты API, такие каккак python boto3 .Обычно вы хотите, чтобы браузер перезагружал общие файлы при каждом вызове для перезагрузки, но избегал ненужного трафика для файлов, которые не будут изменяться (например, файлы с хеш-ключами).

Я собрал программу на Python, который позаботится об этом автоматически при загрузке на S3.Он устанавливает параметры заголовка кэша HTTP в соответствии с типом файла, удаляет старые файлы и, при необходимости, поддерживает более старые версии.

Также см .: Действия по развертыванию приложения React на S3 с CloudFront при управлении кэшированием?