Progressive Web-App mit der Angular CLI erstellen

Möchten Sie Ihre Angular-App installierbar machen? Warte nicht mehr!

Minko Gechev

In diesem Beitrag erfahren Sie, wie Sie mithilfe der Angular-Befehlszeile eine progressive Web-App (PWA) erstellen.

Das Codebeispiel aus diesem Leitfaden finden Sie auf GitHub.

Hinweis : In diesem Beitrag wird davon ausgegangen, dass Sie bereits mit PWAs und ihren Vorteilen vertraut sind. Wenn Sie Ihr Wissen auffrischen möchten, sehen Sie sich die Sammlung Installable (Installierbar) an.

Installierbare PWA erstellen

Um Ihre Angular-Anwendung zu einer PWA zu machen, müssen Sie lediglich einen Befehl ausführen:

ng add @angular/pwa

Dadurch geschieht Folgendes:

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

Standardmäßig sollte Ihr Service Worker innerhalb weniger Sekunden nach dem Laden der ersten Seite registriert werden. Ist dies nicht der Fall, sollten Sie registrationStrategy ändern.

PWA anpassen

Im Beitrag Precaching with the Angular Service Worker wird erläutert, wie der Angular-Service-Worker konfiguriert wird. Dort finden Sie Informationen dazu, wie Sie angeben, welche Ressourcen der Service Worker im Cache speichern soll und mit welcher Strategie er dies tun soll.

In der Manifestdatei Ihrer App können Sie den Namen, den Kurznamen, die Symbole, die Designfarbe und andere Details Ihrer App angeben. Weitere Informationen zu den vollständigen 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 diese Eigenschaften anpassen, indem Sie den entsprechenden Wert in manifest.webmanifest ändern.

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

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

Passen Sie die Eigenschaften und Symbole des Manifests an, bevor Sie die PWA für die Produktion bereitstellen.

Hinweis : Wenn Sie Ihre PWA wieder in eine Standard-Web-App umwandeln 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 über die Angular CLI @angular/pwa hinzu.
2. Passen Sie die Optionen in der Datei manifest.webmanifest an Ihr Projekt an.
3. Passen Sie die Symbole im Verzeichnis src/assets/icons an Ihr Projekt an.
4. Optional können Sie die theme-color in index.html bearbeiten.