Angular PWA: Einmal entwickeln, überall beeindrucken

Einleitung

Progressive Web Apps (PWAs) sind Anwendungen, die im Web laufen, sich aber auch installieren und vollständig offline nutzen lassen. Somit muss nur einmal Software entwickelt werden, welche anschließend unter sämtlichen Betriebssystemen läuft. Wegen diesem und vieler weiterer Vorteile gegenüber der klassischen Softwareentwicklung erfreuen sich PWAs zunehmender Beliebtheit.

In diesem Artikel soll es darum gehen, wie wir bei Service-Soft mit Angular PWAs für unsere Kunden entwickeln, damit diese von den vielen Vorteilen profitieren können.

Technische Umsetzung

Projektinitialisierung mit Angular CLI:

Zunächst erstellen wir ein ganz normales Angular Projekt über die Konsole:

ng new PwaProjekt

Wenn bereits eine Angular Anwendung existiert, die zu einer Progressive Web App konvertiert werden soll, kann dieser Schritt übersprungen werden.

Hinzufügen von @angular/pwa

Die eigentliche PWA-Funktionalität wird von der library @angular/pwa bereitgestellt. Diese lässt sich über den Befehl

ng add @angular/pwa

in das bestehende Projekt integrieren. Der Befehl installiert nicht nur das benötigte Paket sondern ändert und erstellt einige neue Dateien:

• ngsw-config.json:
  Die Konfiguration des Service-Workers. Hier lässt sich definieren, was und wie gecached werden soll, damit Daten offline zur Verfügung stehen
• manifest.webmanifest:
  Die Manifest-Datei definiert das Erscheinungsbild der PWA auf verschiedenen Plattformen. Dies umfasst bspw. den Namen oder Icons für unterschiedliche Bildschirmgrößen. Beispiel-Icons wurden praktischerweise auch schon direkt erstellt.
• app.module.ts:
  Hier wird der Service-Worker initialisiert. Im einer Entwicklungsumgebung ist dies standardmäßig deaktiviert.

Konfiguration des Manifests

Die Beispiel-Icons ersetzen wir durch das jeweilige Logo der Software und passen die Namen an.
Die vielen Abmessungen sind notwendig, da die PWA auf jedem Gerät läuft. Angefangen bei Smartphones bis hin zu größeren Bildschirmen oder sogar Fernseher.

Konfiguration des Service-Workers:

Die wahrscheinlich wichtigste Konfiguration ist die des Service-Workers. Wir definieren zur Standardkonfiguration noch die URLs, von denen Daten offline gespeichert werden sollen:

"dataGroups": [
  {
    "name": "api",
    "urls": [
      "https://api.test.de/**"
    ],
    "cacheConfig": {
      "maxSize": 10,
      "maxAge": "1d",
      "timeout": "5s",
      "strategy": "freshness"
    }
  }
]

In diesem Beispiel werden alle Anfragen die an api.test.de gehen gespeichert.
Durch „strategy“: „freshness“ definieren wir, dass bei einer stabilen Internetverbindung immer die neuesten Daten von der Api bezogen werden sollen. Nur wenn es länger als 5 Sekunden dauert bis Daten zurückkommen, werden die Offline-Daten des Service-Workers verwendet.

Befehl für das Lokale Testen anlegen

Der Service-Worker wird in der app.module.ts nur registriert, wenn die Anwendung außerhalb einer Entwicklungsumgebung gestartet wird. Um die PWA also lokal testen zu können, werden noch ein paar Schritte benötigt.

npm Befehl

PWA-Befehl unter der „scripts“-Sektion in der package.json:

"pwa": "ng build --configuration pwa && http-server -p 4200 -c-1 dist/pwa-projekt"

Um einen „echten“ Server zu haben nutzen wir das npm Paket http-server.

PWA-Konfiguration

In der angular.json unter configurations:

"pwa": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.pwa.ts"
    }
  ]
},

In der environment.pwa.ts ist es wichtig, dass production auf true gesetzt wird.

Anpassen der Bedingung für das Registrieren vom Service-Worker

In der app.module.ts muss enabled noch von !isDevMode() auf environment.production geändert werden:

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  registrationStrategy: 'registerWhenStable:30000'
}),

Anschließend kann die Anwendung mit dem Befehl „npm run pwa“ als PWA gestartet werden.

Viele weitere Features mit ngx-pwa

Mit Angular lassen sich noch viele weitere Dinge abbilden, wie bspw. native Benachrichtigungen, oder ein Hinweis, dass man momentan offline ist. Das meiste dieser Funktionalität stellen wir in einer selbst entwickelten Open-Source Library namens ngx-pwa kostenlos zur Verfügung.

Mit dieser lassen sich auch POST, PATCH und DELETE Anfragen lokal speichern und wieder synchronisieren, sobald eine Internetverbindung besteht.