Von Anfang an sollte mein WordProgressor auch als App auf meinem Telefon funktionieren. Oder dem Desktop. Oder wo auch immer. Und seit ich PWAs kenne, weiß ich, dass dies in Kombination mit Angular durchaus möglich ist. Also habe ich erst meinen MVP erstellt und es dann zu einer PWA gemacht. In nur einem git Commit.
Recherche
Das meiste, was benötigt wird, um eine gewöhnliche Angular-Anwendung zur PWA zu machen wird im Artikel „Step by step guide“ von Angular University (englisch, Dezember 2021) beschrieben. Ich musste lediglich ein paar Anpassungen vornehmen und der im Artikel beschriebene http-server hat für mich nicht funktioniert, aber abgesehen davon steht in dem Artikel alles, was das Herz begehrt.
Die meiste Magie passiert durch den Befehl hier drunter, mit dem PWA-Unterstützung für ein bestehendes Projekt ergänzt wird.
ng add @angular/pwa --project <name of project as in angular.json>Service Worker
Eine PWA oder Progressive Web App ist eine Webanwendung (mit html, css und js), aus der eine native App erstellt wird. Alles was im Browser funktioniert kann auch als PWA genutzt werden.
PWAs funktionieren dank so genannter Service Worker. Die oben verlinkte Seite erklärt das ganz wunderbar im Detail. Ganz kurz gesagt ist der Service Worker ein Baustein, der zwischen Anwendung und Betriebssystem, Internet, APIs und so weiter sitzt. Es ermöglicht die Nutzung nativer Funktionalitäten oder Datenbank-Anfragen.
Service Worker funktionieren allerdings nicht, wenn die Angular App wie gewohnt mit ng serve gestartet wird. Stattdessen bracht es einen Http-Server. Als Alternative zu dem im obigen Artikel genannten kann http-server-spa ausprobiert werden, falls sich Probleme auftun. Ob alles funktioniert kann in den Chrome Entwickler-Werkzeugen überprüft werden.
Das Programmieren
Alle Änderungen um PWA-Unterstützung zu ermöglichen, passen in einen Commit. Ich bin von der Anleitung abgewichen, indem ich den anderen Server genutzt habe, sowie die neue Datei manifest.webmanifest genannt habe.
Ab jetzt ist es auch wichtig, dass man ein schönes Icon hat, das als App-Icon auf dem Telefon angezeigt wird.
Außerdem sind hier die Änderungen, die sich in dem Artikel und meinem Commit finden:
- ngsw-config.js anlegen
- manifest.webmanifest anlegen
- mit SwUpdate in der AppComponent den Nutzer über verfügbare Updates informieren
- das ServiceWorkerModule in AppModule registrieren
- einen „PWA installieren“ Button anzeigen, wo es passend erscheint (dieser wird nur angezeigt, wenn das verwendete Gerät PWAs unterstützt)
- Metadata zur index.html hinzufügen
Chrome Analyse Werkzeuge
Unter „Application“ > „Service Workers“ werden die laufenden Service Worker aufgelistet.
Mit dem „Lighthouse“-Tab kann darüber hinaus ein Bericht erstellt werden, wie gut die App abschneidet. Im Bezug auf Performanz, Lesbarkeit, Schnelligkeit, etc. Das Internet ist voll mit Tips, wie man hier bessere Punkte in den verschiedenen Kategorien erhalten kann.
PWA
Abgesehen von „weil ich es kann“, warum solle man aus seiner Webanwendung eine PWA machen?
- Man erhält eine App, die keinen Store benötigt (App- oder Play-Store), für welche Anmeldegebühren und Abgaben anfallen, die außerdem immer einige Zeit benötigen, um eine neue Version freizuschalten.
- PWAs sind großartig für Offline-Funktionalitäten. Bei anderen Cross-Plattform Sprachen ist so etwas kniffelig und wird hier vom Service Worker übernommen.
- Wie bei Cross-Plattform üblich bedient eine Code-Basis alle Betriebssysteme. Eine fertige Webanwendung kann mit wenig Aufwand auf dem Bildschirm verlinkt werden.
Weitere Vorteile von PWAs sind die Unterstützung von Versionierung, Benachrichtigungen und Zugriff auf native Funktionalitäten. Alles dank der Service Worker. Einiges davon wird Inhalt nachfolgender Blogbeiträge sein.
Wenn man mich fragt, dann ist das Icon meiner Webseite auf meinem Telefon nochmal ein ganz besonderes Achievement.