Progressive Web-Apps

Eine progressive Web-App (PWA) ist eine Web-App, die mithilfe von progressiver Verbesserung eine zuverlässigere Nutzung ermöglicht, neue Funktionen für eine bessere Integration nutzt und installiert werden kann. Da es sich um eine Webanwendung handelt, kann sie mit einer einzigen Codebasis alle Nutzer an allen Orten und auf allen Geräten erreichen. Nach der Installation sieht eine PWA aus wie jede andere App:

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

Die Webanwendung

Das Internet ist eine unglaubliche Plattform. Die Kombination aus Geräte- und Betriebssystemunabhängigkeit, das nutzerorientierte Sicherheitsmodell und die Tatsache, dass die Spezifikation oder Implementierung nicht von einem einzelnen Unternehmen gesteuert wird, machen es zu einer leistungsstarken Plattform für die Bereitstellung von Software.

In Kombination mit der inhärenten Verlinkbarkeit des Webs ist es nun möglich, das Gefundene zu durchsuchen und mit anderen zu teilen, egal wo. Wenn Sie eine Website aufrufen, sehen Sie die neueste Version, die der Verlag oder Webpublisher bereitgestellt hat. Die Nutzung dieser Website kann so vorübergehend oder dauerhaft sein, wie Sie möchten.

Mit einer einzigen Codebasis können Webanwendungen jeden, überall und auf jedem Gerät erreichen. Für Entwickler bietet das Web außerdem einen transparenten und einfachen Bereitstellungsmechanismus. Es ist keine Verpackung erforderlich, es gibt keine zusätzliche Inhaltsüberprüfung und keine Verzögerungen bei Updates. Nutzer erhalten immer die neueste Version, wenn sie Ihre App aufrufen. Mit neuen Funktionen und Techniken können Sie mit einer Web-App jetzt auch offline Inhalte ansehen oder damit interagieren – eine Hürde, die vor einigen Jahren noch nicht zu überwinden war.

Plattformspezifische Apps

Plattformspezifische Apps, sowohl auf Mobilgeräten als auch auf Computern, sind dafür bekannt, vielfältig und zuverlässig zu sein. Sie sind immer präsent, auf Startbildschirmen, Docks und Taskbars. Sie funktionieren unabhängig von einer Netzwerkverbindung und werden in einem eigenen eigenständigen Fenster gestartet. Sie können Dateien aus dem lokalen Dateisystem lesen und schreiben, auf über USB, seriell oder Bluetooth verbundene Hardware zugreifen und mit auf Ihren Geräten gespeicherten Daten wie Kontakten und Kalenderterminen interagieren. Mit plattformspezifischen Apps können Sie Fotos aufnehmen, auf dem Startbildschirm aufgeführte Titel abspielen oder die Medienwiedergabe in einer anderen App steuern. Diese Apps wirken wie ein 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. Es ist also nicht einfach, wenn überhaupt möglich, eine Android-App auf iOS oder eine iOS-App auf Windows oder ChromeOS umzustellen, ohne eine neue App von Grund auf neu zu erstellen.

Das Beste aus zwei Welten

Wenn Sie Plattform-Apps und Web-Apps in Bezug auf Funktionen und Reichweite betrachten, bieten Plattform-Apps die besten Funktionen, während Web-Apps die beste Reichweite bieten. Progressive Web-Apps sind eine Kombination aus den Funktionen von Plattform-Apps und der Reichweite von Web-Apps. Eine progressive Web-App bietet Funktionen aus beiden Welten.

Web

  • Verknüpfbarkeit
  • Standardmäßig barrierefrei
  • Ubiquitär
  • Einfache Implementierung
  • Einfach zu aktualisieren
  • Jeder kann veröffentlichen

Plattform-Apps

  • Offlinefähig
  • Hohe Leistung
  • Geräteintegration
  • Eigenständige Nutzung
  • Symbol „Installiert“
  • Umfangreich und zuverlässig

Vorteile der Übernahme

Hulu, ein Videostreamingdienst in den USA, hat eine progressive Web-App-Version seiner Erfahrung entwickelt, um die Desktop-Apps zu ersetzen, die von Nutzern schlecht bewertet wurden und nur schlecht verwendet wurden. Wie auf der Google I/O 2019 gezeigt, konnte ein Entwickler diese Funktion in zwei Wochen in seiner vorhandenen Webanwendung recherchieren und implementieren.

Innerhalb von fünf Monaten hatten 96% der Nutzer der Legacy-App die PWA verwendet.Die Zahl der wiederkehrenden Besuche stieg um 27% und die Interaktion um 5,5 %. Da sie im Launcher und in der Taskleiste angezeigt werden, können Sie zu PWAs leichter zurückkehren als zu Apps, die nur in einem Tab geöffnet werden.

JD.ID, eine E-Commerce-Plattform in Indonesien, die Lieferservices für viele Produkte anbietet, wollte seine Onlinepräsenz ausbauen. Dazu konzentrierte man sich auf Leistung und eine netzwerkunabhängige, nutzerfreundliche Plattform für die PWA. So konnte das Unternehmen die mobile Conversion-Rate insgesamt um 53 % und bei Nutzern mit installierter App um 200 % steigern. Außerdem stieg die Anzahl der täglich aktiven Nutzer um 26 %.

Clipchamp ist ein browsereigener Online-Video-Editor für Computer, mit dem jeder Geschichten erzählen kann, die sich lohnen, in Videos zu teilen. Das Unternehmen verzeichnete mit der PWA eine um 9% höhere Nutzerbindung als mit der standardmäßigen Desktop-App und die Zahl der PWA-Installationen stieg in den ersten fünf Monaten um 97% pro Monat.

Gravit Designer von Corel Corporation ist ein leistungsstarkes Vektordesigntool für Desktop-Computer, das Zehntausenden von aktiven Nutzern täglich eine umfassende, erschwingliche und barrierefreie Vektorillustrationssoftware bietet. Seit die PWA als Installationsoption für Nutzer hinzugefügt wurde, sind PWA-Nutzer 24 % aktiver, die PWA sorgt für 31 % mehr wiederkehrende Nutzer und PWA-Nutzer kaufen Gravit Designer PRO im Vergleich zu anderen Plattformen und Installationsoptionen 2,5-mal häufiger.

Streaming ganz neu erleben

Ein hervorragendes Beispiel für die Leistungsfähigkeit progressiver Web-Apps ist die Branche der Streaming-Plattformen, einschließlich Cloud-Gaming und Remote-Computing. Seit 2021 haben die meisten Cloud-Gaming-Anbieter Progressive Web Apps eingeführt, mit denen Sie Konsolenspiele von jedem Gerät und nur mit einem Browser oder einer 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 an. Dank Webtechnologien wie WebRTC, WebAssembly und GamePad APIs bieten sie auf allen Plattformen eine hervorragende Leistung, die an die native Leistung heranreicht.

Herausforderungen

Nachdem wir die Vorteile der Webplattform zum Veröffentlichen von PWAs behandelt haben, solltest du dir auch die möglichen Herausforderungen bewusst sein.

Browserübergreifende Kompatibilität

Apple ist ein wichtiges Unternehmen für die Multiscreen-Welt mit iOS, iPadOS, macOS und Safari. Apple hat den Begriff „PWA“ nie öffentlich verwendet, unterstützt aber seit 2018 die Technologien, die es ermöglichen, PWAs in Safari für iPhones und iPads zu installieren und offline zu verwenden.

Die Implementierung der PWA-Spezifikationen von Apple bietet jedoch nicht viele Funktionen, die andere Browser haben, insbesondere Browser, die auf der Chromium-Engine basieren.

In der Mitte stehen auch Firefox und die Gecko-Engine mit Implementierungen, darunter mehr PWA-Spezifikationen unter Android und weniger Installationsmöglichkeiten auf Computern.

Zu den Einschränkungen gehören fehlende Push-Benachrichtigungen, Integrations-APIs (z. B. Web Bluetooth oder WebNFC) und Installationstechniken, die Nutzer darüber informieren, dass sie die aktuelle Website installieren können, um eine App zu nutzen. Außerdem gibt es mehrere Fehler bei implementierten Funktionen.

Wie bei jeder Webentwicklung ist es obligatorisch, die Nutzerfreundlichkeit auf jeder Plattform zu testen, wenn eine PWA veröffentlicht und ein neuer Browser oder eine größere Betriebssystemversion veröffentlicht wird. Sie sollten immer Fallback-Lösungen oder alternative Funktionen bereitstellen, 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. Manche Geschäftsinhaber wissen nichts über PWAs oder haben Missverständnisse bezüglich der Leistungsfähigkeit und Herausforderungen progressiver Web-Apps.

Wenn Sie eine PWA veröffentlichen, besteht Ihre nächste Herausforderung darin, dafür zu sorgen, dass Nutzer verstehen, dass die Website installiert werden kann und dass sie dann wie eine installierte App funktioniert.

Auf einigen Plattformen wie iOS und iPadOS ist die Installationsaufgabe noch wichtiger. Manchmal fügen UX-Designer Bildschirme hinzu, auf denen Nutzern erklärt wird, wie sie die App installieren.

Kompatibilität

Denken Sie daran, dass eine progressive Web-App nur eine Web-App ist. Daher werden Inhalte und Dienste auf Basis der Standardspezifikationen und -protokolle ausgeführt. Daher kann eine PWA praktisch überall dort ausgeführt werden, wo das Web läuft. Die Plattform muss also nicht mit „PWA-Spezifikationen“ kompatibel sein.

Wenn wir jedoch über PWAs und Kompatibilität sprechen, denken wir in der Regel an die Möglichkeiten, die Grenzen des Browsers und nur online verfügbaren Kontexte zu überschreiten: Symbolinstallation und Offlineunterstützung.

Neben der Unterstützung der klassischen Webplattform prüfen wir auch die Unterstützung grundlegender App-Funktionen wie der Symbolinstallation und Offlinefunktionen.

    97 %

    Browser mit Offlinefunktion

    88 %

    Webnutzer können eine PWA installieren

Daten von StatCounter und Can I Use

Computer und Laptops

In einer Welt mit Multi-Faktor-Geräten ist es schwierig zu sagen, was ein Desktop-Gerät ist. Zumindest aus Sicht des Betriebssystems sind diese Browser und Shops jedoch mit der Installation von PWAs 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 und Windows 7 und 8.x
Google Chrome (ab Version 73), Microsoft Edge

Im folgenden Video installiert der Nutzer eine PWA über den Browser auf einem Desktop-Computer und greift dann wie bei jeder anderen App über ein eigenständiges Fenster darauf zu.

Mobilgeräte

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

iOS und iPadOS
Browser von Drittanbietern (seit iOS/iPadOS 16.4), Safari (seit iOS 11.3), App Store (seit iOS/iPadOS 14, mit einigen Einschränkungen), mobile Konfiguration für den Unternehmensvertrieb
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (ab Version 72 mit installiertem Google Chrome oder mit TWA kompatible Browser), Galaxy Store, Managed Play iFrame für Unternehmen.

Im folgenden Video installiert der Nutzer eine PWA über den Browserdialog und das Menü Zum Startbildschirm hinzufügen auf einem Mobilgerät.

Andere Geräte

Einige andere kleine Geräte unterstützen PWAs, z. B. Spielkonsolen (Xbox mit Microsoft Store) oder XR-Geräte (Microsoft Hololens, Pläne für Oculus von Facebook). Auf den restlichen Geräten mit Browser werden PWAs jedoch in der Regel nicht unterstützt, darunter:

  • Spielekonsolen
  • Smart-TVs
  • Smartwatches
  • Autos

Ihre PWA funktioniert immer im Browser aller Geräte mit den jeweiligen Einschränkungen. Dank dieser Fähigkeit, auf vielen Geräten zu arbeiten, können Sie Kaufprozesse auf mehreren Geräten erstellen, bei denen der Nutzer eine Aufgabe auf einem Gerät starten und auf einem anderen Gerät erledigen kann. Die Daten werden dabei in derselben bereitgestellten App synchronisiert.

Ressourcen