Progressive Web-Apps

Eine progressive Web-App (PWA) ist eine Web-App, die durch progressive Verbesserung installiert werden kann, um Nutzern eine zuverlässigere Nutzung zu bieten. Außerdem werden neue Funktionen für eine stärker integrierte Nutzung genutzt. Und da es sich um eine Web-App handelt, kann sie über eine einzige Codebasis jeden, überall und auf jedem Gerät erreichen. Nach der Installation sieht eine PWA wie jede andere App aus:

  • Sie hat ein Symbol auf dem Startbildschirm, in der App-Übersicht, auf dem Launchpad oder im Startmenü.
  • Sie wird angezeigt, wenn Sie auf dem Gerät nach Apps suchen.
  • Die Datei wird in einem eigenständigen Fenster geöffnet, das vollständig von der Benutzeroberfläche eines Browsers getrennt ist.
  • Es bietet Zugriff auf höhere Integrationsebenen in das Betriebssystem, z. B. URL-Handhabung oder Anpassung der Titelleiste.
  • Funktioniert offline.

Die Webplattform

Das Web ist eine unglaubliche Plattform. Die Kombination aus Universalität für alle Geräte und Betriebssysteme, das nutzungsorientierte Sicherheitsmodell und die Tatsache, dass kein einzelnes Unternehmen seine Spezifikation oder Implementierung kontrolliert, machen es zu einer leistungsstarken Plattform für die Softwarebereitstellung.

In Kombination mit der inhärenten Verlinkung des Webs können Sie im Web suchen und das, was Sie gefunden haben, mit beliebigen Personen überall teilen. Wenn Sie eine Website aufrufen, ist es die neueste Version, die der Publisher bereitgestellt hat. Sie können diese Website so temporär oder dauerhaft nutzen, wie Sie möchten.

Webanwendungen können über eine einzige Codebasis jeden, überall und auf jedem Gerät erreichen. Für Entwickler bietet das Web auch einen transparenten und unkomplizierten Bereitstellungsmechanismus. Es ist keine Verpackung erforderlich, keine zusätzliche Inhaltsüberprüfung oder Verzögerungen bei Updates. Nutzer erhalten immer die aktuelle Version, wenn sie Ihre App aufrufen. Dank neuer Funktionen und Techniken können Sie jetzt mit einer Web-App interagieren oder Inhalte ansehen, auch wenn Sie offline sind. Diese Hürde, die noch vor einigen Jahren nicht gelöst werden konnte, war noch nicht lösbar.

Plattformspezifische Apps

Plattformspezifische Apps, sowohl auf Mobilgeräten als auch auf Computern, sind dafür bekannt, vielfältige und zuverlässige Anwendungen zu bieten. Sie sind immer präsent auf Startbildschirmen, Docks und Taskleisten. Sie funktionieren unabhängig von der Netzwerkverbindung und werden als eigenständig gestartet. Sie können Dateien aus dem lokalen Dateisystem lesen und schreiben, auf Hardware zugreifen, die über USB, seriell oder Bluetooth verbunden ist, und mit Daten interagieren, die auf Ihren Geräten gespeichert sind, z. B. Kontakte und Kalendertermine. In plattformspezifischen Apps können Sie Fotos aufnehmen, Titel abspielen, die auf dem Startbildschirm aufgeführt sind, oder die Medienwiedergabe steuern, während Sie eine andere App verwenden. Diese Apps wirken wie Teil des Geräts, auf dem sie ausgeführt werden.

Eine Herausforderung für plattformspezifische Apps besteht darin, dass sie nicht mit mehreren Plattformen und Geräten kompatibel sind. Daher ist es nicht einfach, wenn überhaupt möglich, eine Android-App zu iOS oder eine iOS-App zu Windows oder ChromeOS zu migrieren, ohne eine neue App von Grund auf zu erstellen.

Das Beste aus beiden Welten

Wenn es bei Plattform- und Webanwendungen um Leistung und Reichweite geht, stellen Plattform-Apps die besten Fähigkeiten dar, während Web-Apps die größte Reichweite darstellen. Progressive Web-Apps sind eine Schnittstelle zwischen den Funktionen von Plattform-Apps und der Reichweite von Web-Apps. Eine progressive Web-App umfasst Funktionen aus beiden Welten.

Web

  • Verknüpfbarkeit
  • Standardmäßig zugänglich
  • Allgegenwärtig
  • Einfache Bereitstellung
  • Einfache Aktualisierung
  • Jeder kann Inhalte veröffentlichen

Plattform-Apps

  • Offline-fähig
  • Hohe Leistung
  • Geräteintegration
  • Eigenständige Umgebung
  • Symbol „Installiert“
  • Reichhaltig und zuverlässig

Akzeptanz hat ihre Vorteile

Hulu, ein Videostreamingdienst in den USA, erstellte eine progressive Web-App-Version seiner App, um seine Desktop-Apps zu ersetzen, die schlechte Bewertungen und Nutzung hatten. Auf der Google I/O 2019 wurde bekannt gegeben, dass ein Entwickler innerhalb von zwei Wochen diese Art der Nutzung über seine bestehende Webanwendung recherchieren und implementieren kann.

Innerhalb von fünf Monaten nutzten 96% der Nutzer ihrer alten App die PWA.Die Anzahl der wiederkehrenden Besuche und Interaktionen stiegen um 27% um 27 %. Da sich PWAs im Launcher und auf der Taskleiste befinden, lassen sie sich leichter wieder aufrufen, als wenn sie nur auf einem Tab existieren würden.

JD.ID, eine E-Commerce-Plattform in Indonesien, die Lieferdienste für viele Produkte anbietet, wollte ihre Onlinepräsenz erweitern, indem sie sich auf Leistung und eine netzwerkunabhängige, stabile Erfahrung für ihre PWA konzentrierte. Dadurch konnte die mobile Conversion-Rate um 53%, die Anzahl der installierten Nutzer um 200% und die Anzahl der täglich aktiven Nutzer um 26 % gesteigert werden.

Clipchamp ist ein Browser für Desktop-Computer, mit dem jeder Geschichten erzählen und so über Videos erzählen kann. Im Vergleich zu den Nutzern der Standard-Desktop-App verzeichnete das Unternehmen mit seiner PWA eine um 9% höhere Nutzerbindung und verzeichnete in den ersten fünf Monaten eine monatliche Steigerung der PWAs um 97 %.

Gravit Designer von Corel Corporation ist ein leistungsstarkes Vektordesigntool auf Desktop-Niveau, das von Zehntausenden aktiven Nutzern pro Tag genutzt wird, um eine hochwertige, kostengünstige und barrierefreie Illustrationssoftware zu erstellen. Seitdem Nutzer eine PWA als Installationsoption verwenden, sind sie 24% aktiver, machen sie 31% mehr wiederkehrende Nutzer und Nutzer von PWAs kaufen Gravit Designer PRO mit 2,5-mal höherer Wahrscheinlichkeit als andere Plattformen und Installationsoptionen.

Das Streaming-Game Changer

Ein gutes Beispiel für die Leistungsfähigkeit von progressiven Web-Apps ist die Branche der Streaming-Plattformen, einschließlich Cloud-Gaming und Remote-Computing. Seit 2021 haben die meisten Anbieter von Cloud-Spielen progressive Web-Apps eingeführt, mit denen Sie Konsolenspiele auf jedem Gerät und nur über einen Browser oder eine PWA-Installation spielen können: iPhone, Android, iPad, Laptops, Macs oder PCs. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now und BlueStacks X bieten Cloud-Gaming-Lösungen über den Browser als PWAs. Dank Webtechnologien wie WebRTC, WebAssembly und GamePad APIs bieten sie eine hervorragende Leistung, die der nativen Leistung auf allen Plattformen ähnelt.

Challenges

Nachdem Sie die Vorteile der Webplattform für die Veröffentlichung von PWAs kennengelernt haben, ist es auch wichtig, sich der Herausforderungen bewusst zu sein, mit denen Sie konfrontiert werden können.

Browserübergreifende Kompatibilität

Apple ist mit iOS, iPadOS, macOS und Safari ein wichtiges Unternehmen für die Multi-Device-Welt geworden. Apple hat den Begriff PWA noch nie in der Öffentlichkeit verwendet, unterstützt die Technologien aber schon seit 2018 in Safari für iPhones und iPads, um eine PWA installierbar und offline zu machen.

Bei der Implementierung der PWA-Spezifikationen durch Apple fehlen jedoch viele Funktionen anderer Browser, insbesondere Browser, die von der Chromium-Engine unterstützt werden.

In der Mitte gibt es auch Firefox und seine Gecko-Engine mit Implementierungen, darunter mehr PWA-Spezifikationen unter Android und weniger Installationsmöglichkeiten auf dem Computer.

Zu den Einschränkungen gehören das Fehlen von Push-Benachrichtigungen, Integrations-APIs (z. B. Web Bluetooth oder WebNFC) und Techniken zur Förderung von Installationen, mit denen Nutzer wissen lassen, dass sie die aktuelle Website installieren können, um eine App-Erfahrung zu erhalten. Darüber hinaus gibt es einige Fehler bei den implementierten Funktionen.

Wie bei jeder Webentwicklung ist das Testen der Nutzererfahrung auf jeder Plattform obligatorisch, wenn Sie Ihre PWA veröffentlichen oder wenn eine neue Hauptversion für Browser oder Betriebssystem veröffentlicht wird. Sie sollten immer Fallback-Lösungen oder alternative Möglichkeiten anbieten, wenn eine Funktion nicht verfügbar ist.

Bekanntheit von PWAs

Als PWA-Entwickler werden Sie wahrscheinlich auf ein Problem mit der Bekanntheit stoßen, sowohl auf Unternehmens- als auch auf Nutzerseite. Einige Geschäftsinhaber wissen von PWAs nichts oder haben falsche Vorstellungen über die Leistungsfähigkeit und die Herausforderungen progressiver Web-Apps.

Die nächste Herausforderung bei der Veröffentlichung einer PWA besteht darin, Nutzer darüber zu informieren, dass die Website installierbar ist, sodass Nutzer sie installieren können.

Auf einigen Plattformen wie iOS und iPadOS ist dies eine größere Herausforderung. Manchmal fügen UX-Designer Bildschirme ein, auf denen Nutzern erklärt wird, wie sie die App installieren.

Kompatibilität

Eine progressive Web-App ist nur eine Web-App. Inhalte und Dienste werden also nach Standardspezifikationen und -protokollen ausgeführt. Daher kann eine PWA technisch überall im Web ausgeführt werden. Die Plattform muss nicht mit PWAs kompatibel sein.

Wenn wir jedoch über PWA und Kompatibilität sprechen, denken wir in der Regel darüber nach, welche Funktionen die Grenzen zwischen Browser und reinem Onlinekontext überwinden können: Symbolinstallation und Offlinesupport.

Neben der Unterstützung für die klassische Webplattform sollten Sie auch die Unterstützung grundlegender App-Funktionen wie Symbolinstallation und Offlinefunktionen prüfen.

    97 %

    Offlinefähige Browser

    88 %

    Webnutzer können eine PWA installieren

Die Daten stammen von StatCounter und Can I Use.

Computer und Laptops

In der Welt der Multi-Faktor-Geräte ist es schwierig, zu wissen, was ein Desktop-Gerät ist. Dennoch sind diese Browser und Stores zumindest aus Sicht des Betriebssystems mit der PWA-Installation und Offlinefunktionen kompatibel:

Windows 10 und 11
Google Chrome (ab Version 73), Microsoft Edge (ab Version 79), Microsoft Store
ChromeOS
Integrierter Chrome-Browser (ab Version 72), Play Store (ab Version 85)
macOS, Linux sowie Windows 7 und 8.x
Google Chrome (ab Version 73), Microsoft Edge

Im folgenden Video installiert der Nutzer eine PWA im Browser auf einem Computer und greift dann wie jede andere App mit ihrem eigenständigen Fenster darauf zu.

Mobilgeräte

Apropos Smartphones und Tablets: Eine progressive Web-App kann über die folgenden Browser und App-Shops mit Offlinefunktionen installiert werden:

iOS und iPadOS
Safari (seit iOS 11.3), AppStore (seit iOS/iPadOS 14, mit einigen Einschränkungen), Konfiguration für Mobilgeräte für die Bereitstellung in Unternehmen
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (ab Version 72 mit Google Chrome installiert oder Browser, die mit TWA kompatibel sind), Galaxy Store, iFrame von Managed Play für Unternehmensverteilung.

Im folgenden Video installiert der Nutzer über das Browserdialogfeld und das Menü Zum Startbildschirm hinzufügen eine PWA im Browser eines Mobilgeräts.

Andere Geräte

Einige andere kleine Geräte unterstützen PWAs, z. B. Spielekonsolen (Xbox mit Microsoft Store) oder XR-Geräte (Microsoft Hololens, Pläne für Oculus von Facebook). Die übrigen Geräte mit einem Browser akzeptieren jedoch normalerweise keine PWAs. Dazu gehören:

  • Spielekonsolen
  • Smart-TVs
  • Smartwatches
  • Autos

Ihre PWA funktioniert mit bestimmten Einschränkungen immer im Browser aller Geräte. Diese Möglichkeit, auf vielen Geräten zu arbeiten, ermöglicht es Ihnen, geräteübergreifende Journeys zu erstellen, bei denen der Nutzer eine Aufgabe auf einem Gerät beginnen und auf einem anderen Gerät erledigen kann. Dabei werden Daten auf allen Geräten mit genau derselben bereitgestellten App synchronisiert.

Ressourcen