spinner
loading ...
Zweiblog-Artikel

The Power Of PWA

Tech Trends Web-Applikation

The Power Of PWA

Progressive Web Apps, kurz PWA sind in aller Munde. Weshalb? PWA überbrücken den Unterschied zwischen Web und Mobile, und bieten den Benutzern eine überlegene und nativ-ähnliche Leistung in einem Webbrowser. Vereinfacht ausgedrückt handelt es sich um eine Art mobile Anwendung, die über das Web bereitgestellt wird. Mehr dazu in diesem Artikel.

Kurze Einführung

Der Begriff Progressive Web App wurde erstmals 2015 von Google eingeführt. Progressive Webanwendungen sind immer noch Websites. Dank moderner Web-Technologie sehen sie einfach wie eine App aus, und fühlen sich auch so an. Dies bedeutet, dass Benutzer Progressive Web Apps in ihrem Browser (samt URL) durchsuchen können, genau wie auf jeder anderen Website. Sobald sie jedoch auf der PWA gelandet sind, fühlt sie sich an wie ein „App“, direkt im Browser, ohne dass ein Herunterladen und Installieren erforderlich sind.

Eine „App“ zu sein bedeutet nicht, dass PWA auf Mobilgeräte beschränkt sind. Sie können auch auf dem Desktop genutzt werden. Wahrscheinlich haben Sie PWA schon oft besucht, ohne dass Sie das überhaupt bemerkt haben. Wenn Sie jemals Instagram, Pinterest oder Tinder auf Ihrem Laptop besucht haben, dann haben sie einige der erfolgreichsten Anwendungen von PWA im Web angetroffen. Hier ein paar Fakten, die diesen Erfolg untermauern: Trivago beobachtete einen Anstieg des Benutzerengagements um 150% bei Usern, die ihre PWA auf dem Startbildschirm hinzugefügt haben. Forbes' PWA lädt auf Mobiltelefonen mehr als doppelt so schnell wie die vorherige Website. Twitter Lite verzeichnete einen Anstieg der Seiten pro Sitzung um 65 %, 75 % bei Tweets und einen Rückgang der Absprungrate um 20 %.

Woher weiss ich, ob eine Website eine PWA ist?

Wenn Sie kein Entwickler sind und sich nicht mit dem Quellcode der Website befassen, können Sie nicht genau feststellen, ob eine Website auf der PWA-Technologie basiert. Davon abgesehen gibt es einige Tricks, die zwar kein genaues Ergebnis garantieren, Ihnen jedoch Anzeichen dafür geben können, dass eine bestimmte Website eine PWA ist.

Einseitige Website

Dies ist der einfachste Weg, zu sagen, ob eine Website sein kann, ein PWA. Es basiert auf der Natur von PWA: Progressive Web Apps sind technisch gesehen eine einseitige Website. Dies bedeutet nicht, dass eine auf PWA basierende Website nur eine einzige Seite hat. Dies bedeutet, dass das Ereignis "Seitenaufruf" nur einmal auftritt, wenn ein Benutzer die Website zum ersten Mal lädt. Anschliessend werden alle Seitenladevorgänge von Javascript ausgeführt. Dies unterscheidet sich von normalen Websites, bei denen jede Seitenänderung ein erneutes Laden der Seite zusammen mit der gesamten HTML-Quelle verursacht.

Wie funktioniert das? Ganz einfach: Sehen Sie sich die aktive Registerkarte in Ihrem Browser an. Wenn es sich bei der Site um eine PWA handelt, wird die Site beim Wechseln der Seiten nicht neu geladen. Dies bedeutet, dass auf der Browser-Registerkarte keine Animation zum Laden vorhanden ist. Deshalb werden PWA-Seiten so schnell und reibungslos geladen. Alle Seiten werden beim ersten Besuch der Website vorinstalliert und anschliessend an Sie geliefert. Sie hängen nicht von Ihrer Netzwerkgeschwindigkeit ab und können sogar offline arbeiten.

Service Workers

Nein, das sind keine menschlichen Arbeiter. Service Workers ist der Name der Technologie hinter einer Progressive Web App, die ihre Offline-Funktionen, Push-Benachrichtigungen und das Zwischenspeichern von Ressourcen unterstützt. Laut Google bilden Service Workers den Kern der PWA-Techniken. Wenn wir also herausfinden können, ob eine Website die Service Workers-Technologie verwendet, können wir feststellen, ob es sich bei der Website möglicherweise um eine PWA handelt. Wenn Sie Chrome-basierte Browser verwenden, können Sie dies mithilfe des Inspector-Tools einfach überprüfen.

Auch dieser Trick gibt Ihnen nur einen Hinweis auf die Möglichkeit, dass eine bestimmte Website eine PWA ist. Obwohl Service Workers ein zentraler Bestandteil von PWA ist, ist er nicht exklusiv für PWA. Nicht-PWA-Websites können auch Service Workers nutzen, um ihre Funktionalität zu verbessern.

HTTPS sicherer Ursprung

Sie können jedoch anhand der URL genau feststellen, ob eine Website keine PWA ist. Wenn die URL einer Website mit http: // anstelle von https: // beginnt, handelt es sich nicht um eine PWA. Dies liegt daran, dass PWA nur auf Websites funktionieren kann, die auf einer sicheren Domäne ausgeführt werden, bei der es sich um HTTPS handelt.

Weshalb sind Progressive Web App die Zukunft?

Nach aktuellem Stand der Dinge kann eine PWA bereits die meisten Dinge tun, die bisher nur für native Apps verfügbar waren. Dazu gehört der Zugriff auf Funktionen auf Geräteebene wie Kamera und Mikrofon, GPS, Offline-Modus, Dateizugriff und vieles mehr.

Progressive Web Apps ist die Technologie, die den Wettbewerb fast überall antreibt - von der Windows-Plattform bis zu wichtigen App-Marktplätzen wie dem Google Play Store. Das ist alles verständlich, wenn man bedenkt, dass PWA der nächste natürliche Schritt in der Evolution der Web-Technologie darstellt.

Warum also PWA? Ein Tabellendiagramm kann dies übersichtlich zusammenfassen:

PWA Vergünstigungsvergleich

Lassen Sie uns die Vorteile gegenüber einer normalen Website noch etwas vertiefen:

Geschwindigkeit: Bei gleichem Inhalt wird PWA dank der Service Workers-Technologie schneller als normale Websites geladen. Es ist beim ersten Laden schnell und beim zweiten Laden sogar noch schneller, da alle Inhalte vorab zwischengespeichert und bei Bedarf bereitgestellt werden.

Offline-Modus: Die Offline-Verfügbarkeit wird ebenfalls mit der Service Workers-Technologie ermöglicht. Wenn die Servicemitarbeiter ordnungsgemäss integriert sind, werden alle Inhalte beim ersten Besuch der PWA vorinstalliert und anschliessend mit JavaScript bereitgestellt. Damit ist PWA ein Muss für alle Angebote, die ohne Unterbrechung permanent verfügbar sein müssen.

Zum Startbildschirm hinzufügen: Diese Funktion fordert mobile Benutzer auf, die PWA zu „installieren“. Nachdem der Benutzer die Eingabeaufforderung akzeptiert hat, wird die PWA zu seinem mobilen Startbildschirm hinzugefügt und wie jede andere installierte App ausgeführt.

Hinzu kommen weitere Vorteile:

Plattformübergreifend: Sobald die PWA erstellt wurde, kann über alle mobilen Plattformen wie Android, iOS oder Windows darauf zugegriffen werden, da PWA browserbasiert und nicht betriebssystembasiert ist.

Aktualität: Änderungen an PWA werden sofort wirksam, sobald Benutzer die Seite aktualisieren.

Indexierbarkeit: Da PWA technisch gesehen immer noch Websites sind, kann der Inhalt indiziert und in Suchmaschinen wie Google entdeckt werden. Dies eröffnet Möglichkeiten für SEO-Praktiken (Search Engine Optimization), mit denen PWA im Vergleich zu nativen Apps eine grössere Nutzerbasis erreichen kann.

Keine Notwendigkeit zur Veröffentlichung: Bei nativen Apps kann der Veröffentlichungsprozess im App Store manchmal sehr schmerzhaft sein. Stellen Sie sich vor, Sie senden Ihre App an App Stores und warten aufgeregt 5 Tage, um dann eine Ablehnung mit einem Grund zurückzuerhalten, bei dem Sie zehnmal neu lesen müssen und immer noch nicht wissen, worum es geht. In einigen Fällen wird Ihre App möglicherweise nie akzeptiert. Handkehrum ist es möglich, PWA im Apple Appstore, bei Google Play und im Microsoft Store zu veröffentlichen.

Niedrige Entwicklungskosten: Da PWA einmal entwickelt werden kann, und dann für alle mobilen Plattformen und Browser verfügbar ist, die sie unterstützen, sind die Entwicklungskosten für PWA im Vergleich zu nativen Apps relativ gering. Ein weiterer Grund ist, dass für PWA Programmiersprachen und -technologien verwendet werden, die allgemein bekannt sind, und eine viel grössere Entwicklerbasis haben.

Okay, wo liegt der Haken?

Offensichtlich klingt das alles zu gut, um wahr zu sein; und wenn etwas zu gut scheint, um wahr zu sein, ist es oft so. PWA hat trotz seiner branchenbestimmenden Eigenschaften immer noch seine Nachteile:

Browser-Unterstützung: Während fast alle aktuellen modernen Browser PWA unterstützen (z. B. Chrome, Firefox, Opera und Samsungs Android-Browser usw.), gibt es noch einige Browser, die sich hartnäckig weigern, PWA zu unterstützen; zum Beispiel Safari. Dies liegt an der Tatsache, dass die Unterstützung der Progressive Web App die Unterstützung einer Zukunft aller PWA-Dinge bedeuten würde, und dies ist ein grosses No-Go für native anwendungsorientierte Unternehmen wie Apple.

Kompatibilität: Da die Technologie stark auf HTML5-fähigen Browsern basiert, funktioniert sie in keinem Browser, der dies nicht unterstützt.

Erreichbarkeit: Da die Technologie noch neu ist, gibt es keinen aktuellen App-Marktplatz für PWA, was wiederum die Möglichkeit verringert, ein breiteres Publikum auf diese Art und Weise zu erreichen.

Kommunikation mit anderen installierten Apps: Da PWA im Grunde immer noch eine App-ähnliche Webseite ist, kann sie in vielerlei Hinsicht eingeschränkt sein. Die grösste Einschränkung besteht in der anwendungsübergreifenden Kommunikationsfähigkeit, was für Entwickler ein Problem darstellt.

Fazit

Progressive Web Apps sind die Technologie der Zukunft. Aber werden sie native Apps ersetzen? Kaum. Ab dem vierten Quartal 2019 gibt es fast 3 Millionen Apps bei Google Play und über 2 Millionen Apps im Apple App Store (Statista, 2019). Diese Zahl wächst immer noch und es sieht nicht so aus, als würden all diese Apps bald ersetzt. Benutzergewohnheiten sind eine Sache und nicht leicht zu ändern.

Trotzdem haben Progressive Web Apps ein grosses Potenzial. Mit ihrer Geschwindigkeit, Layoutflexibilität und Funktionsfähigkeit können PWA Desktop-Sites, mobile Sites, native mobile Apps und sogar native Windows-Anwendungen ersetzen. Vor allem im E-Commerce-Welt ist Progressive Web App derzeit die erste Adresse für Webshopbetreiber, die eine leichte, reaktionsschnelle und ansprechende Erfahrung für Online-Käufer wünschen.