Progressive Web-Apps: Aktualisieren Sie sw.js auf Single Page Anwendungen

Question

Wir bauen also eine progressive Web-App und natürlich verwenden wir Service-Mitarbeiter, die großartig sind.

Immer wenn wir eine neue Version unserer App veröffentlichen, aktualisieren wir die Versionsnummer in unserer sw.js-Datei. Beim Laden der Seite stellt der Browser fest, dass sw.js geändert wurde, und löst die Ereignisse "install" und "activate" aus, die wiederum die richtigen Ressourcen für die Offline-Verwendung zwischenspeichern.

Das funktioniert super. Aber von meinem Verständnis wird es nur bei Seitenlast gefeuert werden. Wenn also ein Benutzer die App zu seinem Startbildschirm hinzufügt und diese Verknüpfung immer für den Zugriff auf die App verwendet, wird das Ereignis "refresh" nicht sehr oft ausgelöst, sodass diese Benutzer die Updates nicht so oft sehen werden wie bei a nicht SPA-Web-App.

Also meine Frage ist, wie würden Sie gehen über die Aktualisierung einer Single Page Progressive Web App, die sw.js als Update-Prozess verwendet?

Ich habe gedacht, von mehreren Lösungen, die einen Timeout enthalten, die den Server auf der Suche nach einer neuen Version und vergleichen Sie es mit dem lokalen usw. abfragen würde Aber das scheint nur ein bisschen seltsam ..

Answer 1

Überprüfung für einen neuen Version von sw.js passiert auf every navigation request auf einer Seite unter dem Umfang des Service-Arbeiters. Sie haben also Recht, wenn ein SPA unbegrenzt offen bleibt und keine "echten" Navigationen auftreten, werden keine Überprüfungen für sw.js Updates durchgeführt.

Dies wird etwas durch die Tatsache gemildert, dass die meisten Browser Hintergrundseiten aus dem Speicher entladen und dann neu laden, wenn/wenn Sie sie wieder in den Vordergrund bringen. Aber das ist keine deterministische Sache, auf die man sich verlassen könnte.

Sie können die Methode ServiceWorkerRegistration.update() verwenden, um den Browser zu erzwingen, nach Updates für sw.js zu suchen, genau so, als ob es eine Navigation gegeben hätte.

Es liegt an Ihnen zu bestimmen, wie oft Sie diese Methode aufrufen möchten. Wenn Sie das Verhalten, das Sie mit "echten" Navigationen erhalten, abgleichen möchten, könnten Sie etwas wie das Folgende tun:

function spaNavigate(url) { 
    // Do what you'd normally do to update page content, 
    // use the History API to change the location to `url`, etc. 

    // Then, force a service worker update check: 
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.ready.then(function(registration) { 
     registration.update(); 
    }); 
    } 
}