wake-up-neo.com

Wie gehe ich mit Routing in Angular 5+ Service Workers um?

In früheren Versionen der Implementierung von Angular service worker war eine der Konfigurationsoptionen "routing". Dies ist in dieser nbeantworteten SO frage zu sehen, auf die in dieser Angular CLI issue verwiesen wurde, und die beste verbleibende Dokumentation scheint die zu sein Blogeintrag von Stephen Fluin (im Angular Team), sowie das I/O-Gespräch von Alex Rickabaugh (von Google) .

Mit Angular 5 wurde das ServiceWorkerModule gut ausgearbeitet, und der größte Teil der Konfiguration kann jetzt mit dem ngsw-config.json Datei. Es wird jedoch nicht mehr erwähnt, wie die Umleitung für Routen an einer beliebigen Stelle im angle.io guide oder in der documentation gehandhabt wird. Daher habe ich folgendes Problem: Wenn ich meine App besucht habe und offline gehe, kann ich auch dann auf die App zugreifen, wenn ich sie direkt besuche: https://jackkoppa.github.io/cityaq-sw-issue . Beim Laden leitet die App jedoch auf die Route search um, und die meisten Benutzer würden versuchen, von einer URL wie https://jackkoppa.github.io/cityaq-sw-issue/search) zu laden ? cities = Shanghai (Der Einfachheit halber spreche ich hier nur von Chrome Desktop & Mobile vorerst und wenn möglich in Inkognito).

Wenn Sie versuchen, diese URL offline aufzurufen, wird sofort ein 504 - Gateway Timeout angezeigt. Dies geschieht, weil der Service-Worker nur den Index zwischengespeichert hat und nicht weiß, dass andere Routen zum Index umgeleitet werden sollten, damit er geladen werden kann. Ich bin zuversichtlich, dass frühere Iterationen der Angular= Service Worker-Implementierung dieses Szenario hätten bewältigen können, indem für bestimmte Routen Weiterleitungen zum Index eingerichtet wurden. Ist da? eine Möglichkeit, diese Umleitung in der aktuellen zu behandeln, Angular 5+ ngsw-config.json oder im generierten ngsw.json Datei? Ansonsten, wie soll eine Problemumgehung in einer separaten Service Worker JS-Datei behandelt werden?

angularangular-cliangular-routingservice-workerangular-service-worker
29
Jack Koppa

TL; DR: Ich habe mindestens zwei Probleme identifiziert, die in meinem Fall einen Bruch verursachen. Sie können dieses Erstellungsskript jetzt verwenden, um mein Update zu testen, und sehen, dass die App offline funktioniert hier . Weitere Test- und Pull-Anfragen sind erforderlich.

Obwohl ich keine dokumentierte Antwort finden konnte, konnte ich bisher Folgendes feststellen, indem ich in der Datei ngsw-worker.js Schrittweise vorging und den Commit-Verlauf @angular/service-worker Las.

Der neue ServiceWorkerModule Ansatz für "Routing" besteht darin, eine "Navigations" -Anforderung (dh eine Nicht-Index-Route für dieselbe Domain) anzunehmen und die handleFetch -Methode erneut auszuführen, aber jetzt darauf hinzuweisen auf die Anfrage index.html ( source ). Dies sollte funktionieren, da ein SPA in der Lage sein sollte, zur URL umzuleiten, sobald es seine zwischengespeicherten Dateien für den Index abgerufen hat.

Die Probleme, die dazu führen, dass meine Website im Offlinemodus ausfällt, müssen also nicht direkt mit dem Routing zusammenhängen, und ich habe bisher 2 gefunden. Das Korrigieren dieser Probleme mit einer Problemumgehung hat es mir ermöglicht, meine App größtenteils wie erwartet zum Laufen zu bringen. Mit den Repro-Schritten in der ursprünglichen Frage funktioniert jetzt cityaq , während ich die ursprüngliche, fehlgeschlagene Site unter cityaq-sw-issue reproduziert habe.

Die Probleme:

  1. Gehostete Versionen einer Angular= App, bei der das --base-href - Flag in der CLI gesetzt ist, listen absolute URLs für ihre Service-Worker-Ressourcen auf. Beim Vergleich von Anforderungen mit diesen Ressourcen wird ngsw-worker.js Erwartet relative URLs

    • Quelle
    • Ich bin ziemlich zuversichtlich, dass dieses Problem behoben werden muss, und ich arbeite an einer Pull-Anfrage, um es zu beheben. Es kommt vor, dass baseHref in die Ressourcen-URLs aufgenommen wird, wenn ngsw.json Generiert wird ( source )

  2. Von den 3 verfügbaren "Zuständen", in denen sich der ngsw-worker.js Befinden kann, scheint nach meiner Erfahrung EXISTING_CLIENTS_ONLY Falsch gesetzt zu sein.

    • Quelle 1 , Quelle 2
    • Ich bin bezüglich dieser Änderung weniger zuversichtlich, da ich nicht in der Lage war, ständig zu sehen, was was diesen Zustand verursacht. Wenn & jedoch der Servicemitarbeiter in diesen Status wechselt, versucht ngsw-worker.js Nicht mehr, zwischengespeicherte Ressourcen ( Quelle ) abzurufen, und dies in meinen Tests unter scheinbar "richtigen" Umständen wechselt die App auch dann noch in diesen Status, wenn lediglich eine Internetverbindung getrennt wird

Während ich einen PR für Ausgabe Nr. 1 zusammenstelle und auf Hilfe beim Verständnis von Ausgabe Nr. 2 warte, verwende ich ein Umgehungserstellungsskript, um ngsw-worker.js Zu ändern, nachdem es generiert wurde. Warnung: Es ist hässlich und ändert definitiv das beabsichtigte "sichere" Verhalten der Einstellung EXISTING_CLIENTS_ONLY. Für meine App ist jedoch eine korrekte Offline-Leistung sowohl bei lokaler Ausführung (http-server) Als auch bei der Bereitstellung auf einer Live-URL (in meinem Fall GitHub-Seiten) möglich.

So verwenden Sie die Problemumgehung: (Angular 5, getestet mit Angular 5.2.1)

  1. npm install replace-in-file --save-dev
  2. Fügen Sie dieses Skript in Ihre App ein, z. um build/fix-sw.js
  3. In Ihrem package.json:
"scripts": {
   ...
   "sw-build": "ng build --prod && node build/fix-sw",
   "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
   ...
}
  1. Lokal laufen
npm run sw-build 
 cd dist 
 http-server -p 8080
  1. Und um einen Build für Ihre Live-URL vorzubereiten, bevor Sie ihn an einen Server senden (z. B. mit angle-cli-ghpages )
npm run sw-build-live
8
Jack Koppa