Проверка обновлений манифеста кэша при изменении представления Angular SPA

У меня есть автономный Angular SPA, настроенный следующим образом:

  • Использование манифеста кеша для сохранения всех статических ресурсов в кеше приложения.
  • Использование JS, которое автоматически перезагружает страницу при обнаружении обновления в файле манифеста кеша. Обычно это означает, что в случае обновления страница перезагрузится вскоре после открытия или обновления страницы.
  • Настройте заголовки HTTP так, чтобы ни один из статических ресурсов не сохранялся в обычном кеше браузера (только в кеше приложения); это гарантирует, что поведение автоматической перезагрузки всегда будет отображать последние активы.

Все это работает нормально, за исключением одного предостережения: браузер будет проверять наличие обновлений манифеста кеша только при перезагрузке страницы, но, поскольку приложение является SPA, пользователь может использовать приложение в течение длительного времени (и менять представления). на странице много раз) без перезагрузки одной страницы приложения, что подводит меня к моему вопросу. Есть ли какой-то JS, который я мог бы добавить, чтобы браузер искал обновление манифеста кеша всякий раз, когда пользователь меняет представления в SPA, без необходимости перезагрузки пользователем самой страницы. Единственное, что я могу придумать, это автоматически перезагружать страницу каждый раз при изменении представления, тем самым заставляя браузер искать обновление манифеста кеша при каждом изменении представления, но это кажется нелогичным, поскольку это SPA.


angularjs single-page-application offline cache-manifest application-cache
person Gerry    schedule 30.04.2015    source источник
comment
По моей информации, нет возможности пропинговать app-cahe без перезагрузки страницы. У вас также есть еще одна проблема: обновление кеша приложения не будет видно при первой перезагрузке. Он будет виден только при второй перезагрузке из-за того, как работает кэш приложения.   -  person Vishwanath    schedule 05.05.2015
comment
Спасибо @Vishwanath. Вы правы, обновление кеша приложения не будет отображаться при первой загрузке страницы после обновления, но можно проверить JS на наличие события updateready и автоматически перезагрузить страницу без необходимости обновления пользователем вручную.   -  person Gerry    schedule 05.05.2015

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете добавить прослушиватель событий в событие готовности обновления кэша приложений.

Код напрямую скопирован из руководства по AppCache на сайте HTML5-Rocks.

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);
person Vishwanath    schedule 05.05.2015
comment
Спасибо @Vishwanath, но это не совсем ответ на мой вопрос. Как указано в первом комментарии кода, который вы опубликовали, он проверяет только новый манифест кеша при загрузке страницы, но я ищу JS, который будет искать новый манифест кеша при изменении представления Angular SPA, который не требует загрузки страницы - на самом деле, это обычно не так! - person Gerry; 05.05.2015

arrow_upward
0
arrow_downward

Немного поздно, но на всякий случай, если у других могут возникнуть эти вопросы, используйте этот модуль, вы можете внедрить его в свое приложение и проверьте наличие изменений в манифесте вашего приложения при просмотре изменений и сделайте то, что нужно сделать в вашем приложении!

   appcache.checkUpdate().then(function() {
alert('There\'s an update available!'); });
person E. Najafi    schedule 02.12.2016

arrow_upward
0
arrow_downward

Это будет лучше, когда вы используете AngularJS.

Используйте: ng-apcache

angular.module('myApp')
.controller('indexCtrl', ['appcache',
    function(appcache){
        appcache.checkUpdate()
        .then(
            function(value){
                $window.location.reload();
            }
        );
        );
    }
]);

;

person plampot    schedule 21.02.2017