Jak obsłużyć aktualizację witryny za pomocą kątów?

Question

Mam kątową aplikację hostowaną na stronach github. Kiedy wypycham nową wersję, użytkownicy, którzy mają częściowo załadowaną stronę, mogą napotkać problemy, dopóki strona nie zostanie odświeżona.

Myślę, że może dlatego, że przeglądarka użytkowników pobrała zaktualizowaną wersję widoku. Zaktualizowany widok korzysta z nowej dyrektywy, której nie ma w modułach załadowanych do przeglądarek.

Potrafię wymyślić mnóstwo hacków, aby ominąć to, ale na pewno musi to być coś powszechnego. Czy istnieje standardowy sposób radzenia sobie z tym lub budowa aplikacji w celu uniknięcia tych problemów.

Answer 1

Zakładając minify swojej stronie klienta JavaScript i/lub aktywa css można sprawdzić, czy skrypt lub arkusz stylów, który został zawarty w HTML w postaci:

<script src="scripts/vendor.a2d3cfb2.js"></script> 

Wciąż istnieje na serwerze - jeśli robi nie istnieje, możesz poprosić użytkownika o ponowne załadowanie aplikacji, ponieważ może to być wskaźnik nowej wersji wdrażanej aplikacji.

Należy pamiętać, że ten numer wymaga używania pliku, który często się zmienia, jeśli nie zawsze, gdy wdrażana jest nowa wersja aplikacji. Jeśli nie masz takiego pliku lub aplikacja jest często wdrażana z małymi zmianami, możesz użyć swojej index.html do weryfikacji pomijania pamięci podręcznej w linkach do arkuszy stylów, zmieniły się javascripts w świeżej wersji pobranej z serwera.

A rough szkic czeku dla zaktualizowanego pliku skryptu:

var module = angular.module('test', []); 
 
module.run(function($interval, $http) { 
 
    var intervalHandle; 
 
    var scripts = [].slice.call(document.scripts); 
 
    var testFile = scripts[0]; //use resource whose uri changes with each deploy 
 
    intervalHandle = $interval(function() { 
 
    $http.head(url + '?' + Date.now()) //scripts may be large avoid downloading content 
 
     .catch(function(response) { 
 
     if (response.status === 404 || response.status === 410) { 
 
      alert('New version may be deployed.'); 
 
      $interval.cancel(intervalHandle); 
 
     } 
 
     }); 
 
    }, 5 * 1000 * 60); //every five mnutes 
 

 
});