Möchten Sie Ihre Angular-App installierbar machen? Warte nicht mehr!
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.
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>
-Tagtheme-color
zuindex.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:
![Aufforderung zur Installation einer progressiven Web-App](https://web.dev/static/articles/creating-pwa-with-angular-cli/image/a-progressive-web-app-ins-a07db96e452df.png?authuser=6&hl=de)
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:
![Symbol für eine progressive Web-App-Verknüpfung](https://web.dev/static/articles/creating-pwa-with-angular-cli/image/a-progressive-web-app-sho-f72ad569b7211.png?authuser=6&hl=de)
Passen Sie die Eigenschaften und Symbole des Manifests an, bevor Sie die PWA für die Produktion bereitstellen.
Fazit
So erstellen Sie eine installierbare Angular-App:
- Fügen Sie Ihrem Projekt über die Angular CLI
@angular/pwa
hinzu. - Passen Sie die Optionen in der Datei
manifest.webmanifest
an Ihr Projekt an. - Passen Sie die Symbole im Verzeichnis
src/assets/icons
an Ihr Projekt an. - Optional können Sie die
theme-color
inindex.html
bearbeiten.