Wie zu zwingen client neu laden nach der Bereitstellung?

Ich bin mit dem MEAN stack (mongo, express, angular und Knoten). Ich bin die Bereitstellung von relativ Häufig bis zur Produktion...alle paar Tage. Meine Sorge ist, dass ich bin ändern der client-seitige code und die API mal an und ich möchte lieber nicht haben, um sicherzustellen, die Abwärtskompatibilität der API, die mit früheren Versionen von client-code.

In einem solchen Szenario, was ist der effektivste Weg, sicherzustellen, dass alle clients neu laden, wenn ich push-to-Produktion? Ich habe gesehen, dass Evernote hat zum Beispiel ein pop-up, dass sagt etwas entlang der Linien von, aktualisieren Sie bitte Ihren browser auf die neueste version von Evernote. Ich würde gerne etwas tun, ähnlich...brauche ich, um auf den Pfad der Steckdose.io oder sock.js oder bin ich etwas fehlt einfach und es ist ein einfacher Weg, dies zu erreichen?

InformationsquelleAutor Andrew | 2015-03-27

8

Update:
AppCache veraltet Sommer 2015, so das unten ist nicht mehr die beste Lösung. Die neue Empfehlung ist die Verwendung Service-Mitarbeiter statt. Allerdings, Service-Mitarbeiter sind derzeit noch in der Testphase mit sketchy (lies: wahrscheinlich Nein) - Unterstützung in IE und Safari.

Alternativ, viele build-tools integrieren cache-busting-Datei und "versioning" - Techniken zu Adresse OPs Frage. WebPack ist wohl der derzeitige Marktführer in diesem Raum.

Könnte dies ein guter use-case für die Verwendung mit HTML5 - AppCache

Würden Sie wahrscheinlich wollen zu automatisieren einige der Schritte in den deployment-Skripte, aber hier ist etwas code, der nützlich sein könnte, um Ihnen den Einstieg.

Erstellen Sie zunächst Ihre appcache-manifest-Datei. Dies erlaubt es Ihnen auch, um cache-Ressourcen in den client-browser, bis Sie Sie explizit ändern Sie die appcache-manifest-Datei Datum.

/app.appcache:
```
CACHE MANIFEST

#v20150327.114142

CACHE:
/appcache.js
/an/image.jpg
/a/javascript/file.js
http://some.resource.com/a/css/file.css

NETWORK:
*
/
```
In app.appcache -, der Kommentar auf Zeile #v20150327.114142 ist wie zeigen wir dem browser, dass sich das manifest geändert hat und die Ressourcen neu geladen werden muss. Es kann alles sein, wirklich, solange die Datei wird anders Aussehen, als der browser der früheren version. Während der Implementierung des neuen Codes in Ihrer Anwendung sollte diese Zeile geändert werden. Könnte auch ein build-ID statt.

Zweite, auf alle Seiten, die Sie verwenden möchten, den appcache, ändern Sie die header-Tags als solche:
```
<html manifest="/app.appcache"></html>
```
Schließlich müssen Sie zum hinzufügen von Javascript zu überprüfen, die appcache-für alle änderungen, und wenn es gibt, etwas dagegen zu tun. Hier ist ein Winkel-Modul. Für diese Antwort, hier ist ein Beispiel Vanille:

appcache.js:
```
window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        //Browser downloaded a new app cache.
        //Swap it in and reload the page to get the latest hotness.
        window.applicationCache.swapCache();
        if (confirm('A new version of the application is available. Would you like to load it?')) {
            window.location.reload();
        }
    }
    else {
        //Manifest didn't changed. Don't do anything.
    }
}, false);
```
Alternativ, wenn AppCache nicht für Ihre situation funktioniert, ein mehr ghetto-Lösung wäre das erstellen eines einfachen API-Endpunkt, gibt die aktuelle build-ID oder der Letzte Einsatz-Datum-Zeit. Ihre Kantigen Anwendung gelegentlich trifft, wird dieser Endpunkt und vergleicht das Ergebnis mit es die interne version, und, wenn unterschiedlich, lädt sich selbst.

Oder erwägen Sie vielleicht eine live-reload-Skript (Beispiel), aber, während sehr hilfreich in der Entwicklung, ich bin mir nicht sicher, wie gut eine Idee ist die Verwendung von live/in-Platz-nachladen von assets in der Produktion.
- Wow!!! AppCache. Ich denke, es kann ein bisschen viel für das, was ich bin nach...vor allem als ich sehe, IE9 sieht nicht unterstützt werden und Firefox scheint zu verlangen, die Einwilligung der Nutzer. Ich mag die Idee von dem 'ghetto' - Lösung, obwohl eine überprüfung, eine API-Endpunkt in einem festgelegten Intervall und aufrufenden Fensters.Lage.reload ( ), wenn nötig. Scheint tatsächlich so schön und einfach für mich...aber ich bin sicher, jemand wird mir sagen, dass ich das selbe tun nur so leicht, mit sockel.io....
- ja; Sie konnte es tun, mit sockel.io.. aber das ist eine Menge Aufwand nur für "realtime" code-updates. Pingen Sie den server-timeout scheint ausreichend (und billiger Ressourcen-Weise; Sie nicht haben, um sorgen über Belastungen des offenen socket-verbindungen oder sorgen über load balancing Ihnen, wie Sie scale-up..), es sei denn, natürlich, Ihre app bereits nutzt socket.io. Dann macht es mehr Sinn.
- Yep - ich denke das gleiche...zu viel overhead. Wir werden wahrscheinlich hinzufügen-Buchse.io in den nächsten Monaten, aber ich denke, dass wird gehen mit der API-ping-Ansatz, bis wir tatsächlich tun. Vielen Dank für deine Antwort!
- Das sollte wohl nicht sein, die akzeptierte Antwort. Oben der link zum app-cache: Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time. .... Use Service Workers instead.
- Ich würde Zustimmen müssen. Ich werde aktualisieren, meine Antwort entsprechend mit einem Nachtrag.
InformationsquelleAutor Marco Lüthy
1

Vielleicht kann man hinzufügen-hash, um Ihren client-code-Datei Namen. zB app-abcd23.js.

Damit der browser die Datei auch neu laden, anstatt, bekommen es aus dem cache. oder Sie können einfach fügen Sie die url-hash zu.zB app.js?hash=abcd23 aber einige browser können trotzdem die version im Cache.

ich weiß rails hat die assets-pipline, es zu handhaben, aber ich bin nicht vertraut mit MEAN-stack. es sollte ein Paket in npm für diesen Zweck.

Und ich glaube, es ist wirklich notwendig, um socket.io wenn Sie möchten, um den Benutzer zu Benachrichtigen, Ihr client-code ist veraltet. definieren Sie Ihre version in beiden html meta tag und js - Datei,wenn Sie nicht übereinstimmen, zeigen Sie ein popup und sagt dem Benutzer zu aktualisieren.
- Danke! Es ist ein SPA-obwohl...also ich bin mir nicht sicher, dass die html-meta-tag und js Datei version Ansatz funktionieren wird. Denkbar könnte der Benutzer lassen Sie das browser-Fenster öffnet für eine Woche, kommen zurück und starten Sie die app ohne nachladen und die meta-tag-und js-Datei in der version unverändert. Die Namensgebung Punkt ist ein guter, aber gleiche Problem - fixes-cache auf neu laden, aber nicht, wenn der Benutzer nicht laden. Richtig?
- ja, fügen Sie die hash-Datei-name für browser-cache und cdn. ich denke also, stellen Sie ajax-call jede Stunde oder Tag, um zu sehen, ob es, wenn es eine neue version, und aktualisieren Sie dann die Seite mit js kann für Sie arbeiten. socket.io ist noch zu viel. Und wenn Sie möchten, fügen Sie Echtzeit-Dinge zu Ihrer app, schlage ich vor, mit FB oder analysieren, anstatt mit Buchse.io.
- Vielen Dank für deine Antwort!
InformationsquelleAutor at15
0
1. Versuchen zu begrenzen js/Dateien zu verfallen, in kleinere regelmäßige Zeit, dh: 1 Tage.
2. Aber wenn Sie wollen etwas, das pop-out und erzählen Sie Ihren Benutzer neu laden (Strg+f5) in Ihrem browser, dann machen Sie einfach ein Skript, dass die popup-Nachrichten, wenn Sie gerade verändert einige Dateien, markieren Sie die ip/session, die gerade neu erzählt, neu zu laden, Sie werden nicht genervt mit mehreren popup.
- Punkt 1 ist fair. Ich habe geändert, die Zeit bis zum Ablauf auf das CDN für statische assets 1 Tag von 7 Tagen.
InformationsquelleAutor rezashamdani
0

Ich Stand vor dem gleichen problem vor kurzem. Ich reparierte diese durch anfügen von meiner app die build-Nummer mit meiner js/css-Dateien. Alle meine Skript-und style-tags enthalten waren, die von einem Skript in einer gemeinsamen include-Dateien so war es trivial, fügen Sie eine 'build-Nummer' am Ende der js/css-Datei-Pfad wie in diesem
```
/foo/bar/main.js?123
```
123 ist eine Zahl, die ich verfolgen meiner derselben header-Datei. Ich increment Sie es, Wann immer ich will, den client zu zwingen, den download aller js-Dateien von der app. Dies gibt mir die Kontrolle über, wenn die neuen Versionen heruntergeladen, aber immer noch erlaubt den browser cache nutzen für jede Anforderung nach der ersten. Das ist bis zu Schiebe ich ein weiteres update erhöht die build-Nummer.

Dies bedeutet auch, dass ich ein cache-Ablaufdatum-header wie lange ich will.

InformationsquelleAutor Achshar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.