Haben Sie den Witz gehört, dass es Zeit ist, die Domain zu ändern, wenn Sie ServiceWorker installiert haben? Jetzt werde ich Ihnen sagen, was es bedeutet und was zu tun ist, wenn Sie dennoch entscheiden, dass Sie eine PWA benötigen.
In den Anweisungen für den Typ dieses oder dieses ServiceWorkers und dessen Arbeit wird fast keine Aufmerksamkeit geschenkt. Und ich bin sicher, dass Artikel wie dieser das erste sind, was Sie vor der Verwendung lesen. Aber in dem Moment, in dem nach solchen Artikeln Ihre frisch gebackene PWA endlich in der Produktion erschien und Benutzer die Möglichkeit hatten, ihrem Desktop ein weiteres Symbol hinzuzufügen, wissen Sie, dass Sie den Punkt ohne Wiederkehr überschritten haben.
Mit Ihrer Erlaubnis werde ich nicht auf die Beschreibung des Servicemitarbeiters (im Folgenden: SW) und dessen Funktionsweise eingehen. Habré hat bereits einen guten Artikel darüber . Es ist nicht einmal wichtig, welche SW Sie speziell haben. Möglicherweise verwenden Sie die Create-React -App , was bedeutet, dass die Workbox- Bibliothek für SW für Sie verantwortlich ist . Vielleicht haben Sie SW selbst mit einer kniffligen Caching-Strategie implementiert. Der Stapel ist nicht wirklich wichtig. In derselben CRA-Dokumentation heißt es, dass Sie lediglich eine Zeile ändern und alle Vorteile eines app-ähnlichen Verhaltens nutzen müssen. Sie haben geschrieben .register()
und erwarten das Ergebnis. Und du wirst es bekommen.
Wenn ein verärgerter Kunde Sie das nächste Mal auffordert, die Farbe dieses orangefarbenen Knopfes zu ändern oder den Fehler mit dem fliegenden Fokus endgültig zu beheben, befinden Sie sich in einer erstaunlichen Situation. Es gibt einen Hotfix im Repository, der Container wurde zusammengestellt und nginx verteilt mit Sicherheit die neueste Version, aber der Client ist aus irgendeinem Grund immer noch unglücklich. Oh ja, wir sind jetzt PWA.
- Bitte aktualisieren Sie die Seite. Wie hilft es nicht? Was ist, wenn STRG + R?
Was tun, wenn die hektische Seitenaktualisierung nicht hilft und der Client immer noch die spöttische orangefarbene Schaltfläche sieht?
Es ist wichtig zu bedenken, dass SW versucht, sich wie eine Desktop-Anwendung zu verhalten.
Erinnern wir uns, wie sich die Desktop-Anwendung selbst aktualisiert. Es lädt das neue Installationsprogramm herunter, entfernt die alte Version und installiert sie neu. Erst dann erhält der Benutzer eine neue Version der Anwendung.
SW.
SW : installing, waiting active. Active - , SW. installing waiting SW active. installing SW , . waiting , SW ( ). .
SW, , - . SW , . . , . , .
, , "". , SW : , , , . , SW . , .
SW installing, waiting active. - . , .
, , .
№1: SW
( ) - SW. SW skipWaiting()
, . SW . "" .
: , . , skipWaiting()
, , .
№2: SW
, . navigator.serviceWorker
controllerchange
, SW . installing.
skipWaiting()
, . :
navigator.serviceWorker.addEventListener('controllerchange', () => window.location.reload());
SW , .
, , . , , . .
№3:
, , SW , - - .
controllerchange
, , , .
, SW, ServiceWorkerRegistration
. .register()
, . API . , update()
, SW . , .
(active) SW navigator.serviceWorker.controller
active . (waiting) (installing) SW.
SW postMessage()
, iframe , API. SW . SW.
addEventListener('message', ev => {
if (ev.data === 'skipWaiting') return skipWaiting();
});
Als nächstes müssen wir das Erscheinungsbild der wartenden SW verfolgen. Meiner Meinung nach ist es besser, nicht jedes Mal auf SW mit dem Installationsstatus zu reagieren, wie in einigen Handbüchern beschrieben, sondern zu warten, bis das SW-Registrierungsobjekt im Feld true zurückgibt waiting
. Dies verlangsamt das Update, löst jedoch nicht Ihr Modal aus, wenn die Software zum ersten Mal installiert wird.
Nachdem wir auf die ausstehende Software gewartet haben, rufen wir ein modales Fenster auf, in dem der Benutzer das Update bestätigen kann. Nach der Bestätigung rufen wir skipWaiting()
die Seite wie oben beschrieben an und laden sie zwangsweise neu. Wenn ein Fehler auftritt, wird das Update verschoben. Der Code in meinem Fall sieht folgendermaßen aus:
//
const askUserToUpdate = reg => {
return Modal.confirm({
onOk: async () => {
//
navigator.serviceWorker.addEventListener('controllerchange', () => {
window.location.reload();
});
//
if (reg && reg.waiting) {
reg.waiting.postMessage({ type: 'SKIP_WAITING' });
}
},
onCancel: () => {
Modal.destroyAll();
},
icon: null,
title: ' !