Wie Sie Ihre erste PWA mit Angular in weniger als 1 Stunde erstellen

Angesichts der zunehmenden Nutzung von Mobiltelefonen und der ständigen Aktualisierungen ist es einfach und intelligent, denselben Code für Web und Mobiltelefon zu verwenden. Die lästige Installation und Aktualisierung von Apps kann entfallen, wenn es nicht wirklich notwendig ist, eine mobile native Funktion zu haben. Außerdem können die heutigen Browser viel mehr (abgesehen vom Versenden von SMS, der Verwaltung von Kontakten, die zu sehr von mobilen Dingen abhängen, bis hin zur Kommunikation zwischen Apps und einigem mehr), was jede Anwendung voll ausnutzen kann. Diese Art von Anwendungen werden als Progressive Web Applications, kurz PWA, bezeichnet. Sie verbrauchen wenig Speicherplatz und bieten Offline-Funktionen. PWAs können auch ein reichhaltiges Erlebnis wie eine native App bieten.

Eine PWA ist eine Web-App, die moderne Web-Funktionen nutzt, um Nutzern ein app-ähnliches Erlebnis zu bieten. Diese Apps können auf Servern bereitgestellt werden, sind über URLs zugänglich und werden von Suchmaschinen indiziert. Progressive Websites verhalten sich wie native mobile Apps. Sie können sie auch an den Startbildschirm des Mobiltelefons anheften, ohne dass sie "installiert" werden müssen.

Der nahtlose Übergang vom Web zur App wird für den Benutzer leicht gemacht. Progressive Web-Apps umfassen auch Funktionen wie Push-Benachrichtigungen. PWA-Push-Benachrichtigungen funktionieren genauso wie Push-Benachrichtigungen für native Apps.

Warum PWA?

Freundlich für Entwickler

Ganz einfach: Entwickler müssen die App nicht für mehrere Plattformen entwickeln, denn eine einzige progressive App kann sowohl auf Android als auch auf iOS gut funktionieren und für verschiedene Geräte geeignet sein, während sie gleichzeitig das Web bedient.

Reduzierte Installationsschritte

Dies ist eines der Hauptmerkmale von PWAs, das ihre Beliebtheit und Wettbewerbsfähigkeit gegenüber nativen Apps erhöht. Da PWAs nicht auf einem Gerät oder im Apple Store installiert werden, sind ihre Kunden einige Schritte näher dran, sie zu starten. Heutzutage können wir auf PWAs auch über den Play Store zugreifen. PWA-Benutzer können nicht nur den App-Store und die Installation überspringen, sondern müssen die App auch nicht jedes Mal aktualisieren, wenn der Entwickler eine neue Version veröffentlicht. Die Benutzer haben immer Zugang zu aktuellen Lösungen.

Hohe Benutzerbindung

Mobile Benutzer verschieben Apps absichtlich auf den Startbildschirm. Die Möglichkeit, zum Startbildschirm hinzugefügt zu werden, macht PWAs also wettbewerbsfähiger gegenüber Web-Apps. Die Chancen für eine bessere Verbreitung sind für PWAs höher. Push-Benachrichtigungen machen auch das Interesse der Nutzer an der App wett.

Offline-Funktionalität

Die PWA speichert HTML, CSS, JS-Dateien und Bilder im Browser-Cache und die Entwickler können den Netzwerkaufruf vollständig kontrollieren. All dies wird durch Service Worker erreicht. Mehr dazu erfahren Sie in dem Video in diesem Artikel.

Die folgenden Komponenten/Technologien werden für die Entwicklung einer PWA benötigt.

• Servicekräfte
• Manifest-Datei
• HTTPS

Servicemitarbeiter:

Der Service Worker wurde entwickelt, um die Nutzung einer Anwendung über eine langsame oder unzuverlässige Netzwerkverbindung für den Endbenutzer zu optimieren und gleichzeitig die Risiken zu minimieren, die mit der Bereitstellung veralteter Inhalte verbunden sind. Das Verhalten des Angular Service Workers folgt diesem Designziel:

• Das Caching einer Anwendung ist wie die Installation einer nativen Anwendung. Die Anwendung wird als eine Einheit zwischengespeichert und alle Dateien werden gemeinsam aktualisiert.
• Eine laufende Anwendung wird weiterhin mit der gleichen Version aller Dateien ausgeführt. Sie empfängt nicht plötzlich zwischengespeicherte Dateien aus einer neueren Version, die wahrscheinlich nicht kompatibel sind.
• Wenn Benutzer die Anwendung aktualisieren, sehen sie die letzte vollständig zwischengespeicherte Version. Neue Registerkarten laden den neuesten gecachten Code.
• Aktualisierungen erfolgen im Hintergrund, relativ schnell nach der Veröffentlichung von Änderungen. Die vorherige Version der Anwendung wird so lange bereitgestellt, bis ein Update installiert und bereit ist.
• Der Service Worker spart nach Möglichkeit Bandbreite. Ressourcen werden nur heruntergeladen, wenn sie sich geändert haben.

Um diese Verhaltensweisen zu unterstützen, lädt Angular Service Worker eine Konfigurationsdatei vom Server. Die Konfigurationsdatei beschreibt die Ressourcen, die zwischengespeichert werden sollen, und enthält Hashes der einzelnen Dateiinhalte. Wenn ein Update der Anwendung bereitgestellt wird, ändert sich der Inhalt der Config-Datei und teilt dem Service Worker mit, dass eine neue Version der Anwendung heruntergeladen und zwischengespeichert werden soll. Diese Konfigurationsdatei wird aus einer CLI-generierten Konfigurationsdatei namens ngsw-config.json erzeugt.

Nachfolgend sehen Sie, wie der Inhalt der Datei ngsw-config.json aussieht.

Siehe die URL: Angular - Service Worker Konfiguration für weitere Informationen über die ngsw-config.json

Manifest:

Die Manifestdatei ist eine JSON-Datei, die die Informationen zu Ihrer Anwendung enthält, wie z.B. das Symbol, das auf dem Startbildschirm angezeigt wird, wenn sie für verschiedene Auflösungen installiert wird, den Kurznamen der Anwendung, die Hintergrundfarbe und das Thema.

Nachfolgend sehen Sie den Inhalt der Datei manifest.webmanifest

HTTPS:

Service Worker haben die Möglichkeit, die Netzwerkaufrufe abzufangen und die Antwort zu ändern. Service Worker führen alle Aktionen auf der Client-Seite aus. Daher ist für PWA das sichere Protokoll HTTPS erforderlich.
Damit Service Worker registriert werden können, muss der Zugriff auf die App über HTTPS und nicht über HTTP erfolgen. Browser ignorieren Service Worker auf Seiten, die über eine unsichere Verbindung bereitgestellt werden.

PWA Unterstützende Funktionen:

Hier ist ein Referenzvideo, um Ihre erste PWA mit Angular in weniger als 1 Stunde zu erstellen:

Es gibt zwar gute Seiten an PWA, aber es gibt auch einige Einschränkungen, die Sie beachten sollten. Im Folgenden finden Sie einige davon:

Eingeschränkte Funktionalität und höherer Akkuverbrauch im Vergleich zu nativen Apps

Ohne Zugriff auf die Gerätehardware können PWAs einige der Funktionen nativer Apps nicht unterstützen, z. B.

• Fingerabdruck-Scannen,
• NFC, Bluetooth und
• erweiterte Kamerasteuerung.

Die Freigabe einer App über eine URL ist zwar bequemer, erfordert aber eine Netzwerkverbindung, die den Akku des Geräts im Vergleich zu einer nativen App schneller entleert.

Keine SEO-Optimierung in App Stores

Wenn Sie eine PWA-App im App Store haben, entfallen mehrere Schritte, die die Benutzer vor dem Ausführen einer App unternehmen, was die Installationsschritte reduziert. Da PWAs nicht Teil des App Stores sind, verringert sich die SEO-Optimierung.

Die Unterstützung durch verschiedene mobile Betriebssysteme ist noch nicht einheitlich. Während Android die meisten Aspekte unterstützt, wird auch iOS zunehmend unterstützt. Es muss jedoch noch geprüft werden, ob bestimmte Funktionen unterstützt werden, um sicherzustellen, dass beide gängigen Betriebssysteme gleich gut funktionieren.