Angular 2
Servicemitarbeiter

Einführung

Füge Service Worker unserer App hinzu

Erst wenn Sie mobile.angular.io konsultieren, funktioniert die Flagge --mobile nicht mehr.

Um zu beginnen, können wir ein normales Projekt mit Winkelcli erstellen.

ng new serviceWorking-example
cd serviceWorking-example

Nun das Wichtigste, um zu sagen, dass wir Service-Mitarbeiter einsetzen wollen, müssen wir Folgendes tun:

ng set apps.0.serviceWorker = true

Wenn Sie aus irgendeinem Grund nicht @ eckig / Service-Worker installiert haben, wird eine Meldung angezeigt:

Ihr Projekt ist mit serviceWorker = true konfiguriert, aber @ angle / Service-Worker ist nicht installiert. Führen Sie npm install --save-dev @angular/service-worker und versuchen Sie es erneut, oder führen Sie ng set apps.0.serviceWorker=false in Ihrer .angular-cli.json aus.

Überprüfen Sie die .angular-cli.json und Sie sollten jetzt Folgendes sehen: "serviceWorker": true

Wenn dieses Flag aktiviert ist, werden Produktions-Builds mit einem Service-Mitarbeiter eingerichtet.

Es wird eine Datei ngsw-manifest.json generiert (oder erweitert, falls im Stammverzeichnis des Projekts eine Datei ngsw-manifest.json erstellt wird. Normalerweise wird dies zur Festlegung des Routings verwendet. In Zukunft wird dies wahrscheinlich automatisch erfolgen.) in dist / root, und das Service-Worker-Skript wird dort kopiert. Zu index.html wird ein kurzes Skript hinzugefügt, um den Service Worker zu registrieren.

Wenn wir die App jetzt im Produktionsmodus erstellen, erstellen Sie - prod

Und überprüfen Sie dist / Ordner.

Dort sehen Sie drei neue Dateien:

• worker-basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

Außerdem enthält index.html jetzt dieses sw-register-Skript, das einen Angular Service Worker (ASW) für uns registriert.

Aktualisieren Sie die Seite in Ihrem Browser (wird vom Webserver für Chrome bereitgestellt).

Öffnen Sie die Entwicklertools. Gehen Sie zur Anwendung -> Servicemitarbeiter

Gut, jetzt ist der Service Worker in Betrieb!

Jetzt sollte unsere Anwendung schneller geladen werden und wir sollten die App offline verwenden können.

Wenn Sie nun den Offline-Modus in der Chrome-Konsole aktivieren, sollten Sie feststellen, dass unsere App in http: // localhost: 4200 / index.html ohne Internetverbindung funktioniert.

In http: // localhost: 4200 / haben wir jedoch ein Problem und werden nicht geladen. Dies liegt daran, dass der statische Inhaltscache nur die im Manifest aufgelisteten Dateien bedient.

Wenn das Manifest beispielsweise eine URL von /index.html deklariert, werden Anforderungen an /index.html vom Cache beantwortet, eine Anforderung an / oder / some / route jedoch an das Netzwerk.

Hier kommt das Plug-In für die Routenumleitung zum Einsatz. Es liest eine Routing-Konfiguration aus dem Manifest und leitet konfigurierte Routen an eine angegebene Indexroute weiter.

Derzeit muss dieser Konfigurationsabschnitt von Hand geschrieben werden (19-7-2017). Eventuell wird es aus der in der Anwendungsquelle vorhandenen Routenkonfiguration generiert.

Wenn wir nun also ngsw-manifest.json im Stammverzeichnis des Projekts erstellen

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

Und wir bauen unsere App erneut. Wenn wir nun zu http: // localhost: 4200 / gehen , sollten wir zu http: // localhost: 4200 / index.html umgeleitet werden.

Weitere Informationen zum Routing finden Sie in der offiziellen Dokumentation

Hier finden Sie weitere Unterlagen zu Servicemitarbeitern:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

Und hier sehen Sie einen alternativen Weg, um den Dienst zu implementieren, der mit der SW-Precache-Bibliothek arbeitet:

https://coryrylan.com/blog/fast-offline-angular-apps-mit-service-workers