Progressive Web-App mit der Angular CLI erstellen

Sie möchten Ihre Angular-App installierbar machen? Dann legen Sie los!

Minko Gechev

In diesem Beitrag erfahren Sie, wie Sie mit der Angular-Befehlszeilenschnittstelle (Command Line Interface, CLI) eine Progressive Web-App (PWA) erstellen.

Das Codebeispiel aus dieser Anleitung finden Sie auf GitHub.

Hinweis: In diesem Beitrag wird davon ausgegangen, dass Sie bereits mit PWAs und ihren Vorteilen vertraut sind. Falls Sie Ihr Wissen auffrischen möchten, sehen Sie sich die Sammlung Installierbare Apps an.

Installierbare PWA erstellen

Wenn Sie Ihre Angular-Anwendung zu einer PWA machen möchten, müssen Sie nur einen einzigen Befehl ausführen:

ng add @angular/pwa

Der Befehl hat diese Auswirkungen:

• Er erstellt einen Service Worker mit einer Standard-Caching-Konfiguration.
• Er erstellt eine Manifestdatei, in der der Browser erfährt, wie sich Ihre App verhalten soll, wenn sie auf dem Gerät des Nutzers installiert wird.
• Er fügt in index.html einen Link zur Manifestdatei hinzu.
• Fügen Sie das theme-color <meta> Tag zu index.html hinzu.
• Er erstellt App-Symbole im Verzeichnis src/assets.

Standardmäßig sollte Ihr Service Worker innerhalb weniger Sekunden nach dem ersten Seitenaufbau registriert werden. Wenn das nicht der Fall ist, sollten Sie die registrationStrategy ändern.

PWA anpassen

Im Beitrag Vorab-Caching mit dem Angular-Service-Worker wird erläutert, wie Sie den Angular-Service-Worker konfigurieren. Dort erfahren Sie, wie Sie angeben, welche Ressourcen der Service Worker im Cache speichern soll und welche Strategie er dafür verwenden soll.

In der Manifestdatei Ihrer App können Sie den Namen, den Kurznamen, die Symbole, die Designfarbe und andere Details Ihrer App angeben. Eine vollständige Liste der Eigenschaften, die Sie festlegen können, finden Sie im Beitrag Web-App-Manifest hinzufügen.

Sehen Sie sich die Manifestdatei an, die von der Angular-CLI generiert wurde:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Sie können jede dieser Eigenschaften anpassen, indem Sie den entsprechenden Wert in manifest.webmanifest ändern.

Eine PWA verweist mit einem link-Element in index.html auf ihre Manifestdatei. Sobald der Browser den Verweis findet, wird die Aufforderung Zum Startbildschirm hinzufügen angezeigt:

Da die ng-add-Schemata alles hinzufügen, was erforderlich ist, um Ihre App installierbar zu machen, werden einige Verknüpfungssymbole generiert, die angezeigt werden, sobald der Nutzer die App seinem Desktop hinzufügt:

Passen Sie die Manifesteigenschaften und -symbole an, bevor Sie Ihre PWA in der Produktion bereitstellen.

Hinweis: Wenn Sie Ihre PWA wieder in eine Standard-Web-App ändern möchten, entfernen Sie einfach den Verweis auf manifest.webmanifest aus index.html.

Fazit

So erstellen Sie eine installierbare Angular-App:

1. Fügen Sie Ihrem Projekt mit der Angular-CLI @angular/pwa hinzu.
2. Bearbeiten Sie die Optionen in der Datei manifest.webmanifest entsprechend Ihrem Projekt.
3. Aktualisieren Sie die Symbole im Verzeichnis src/assets/icons entsprechend Ihrem Projekt.
4. Optional können Sie die theme-color in index.html bearbeiten.