Du hast deine E-Commerce-, Digitalisierungs- und OPENAI-Experten gefunden.
Die Zukunft des mobilen Internets?
Alles was du über PWAs wissen musst –
und warum sie herkömmliche Apps und Websites alt aussehen lassen!
Lediglich eine Website auf Speed oder die Zukunft des mobilen Internets?
Progressive Web Apps (PWA): Von Google zum Leben erweckt, von Microsoft verehrt und von Apple argwöhnisch beäugt, sind der neue Stern am digitalen Himmelszelt. Obwohl noch kaum der Kinderstube entwachsen, sorgen Sie schon für einigen Aufruhr in der E-Commerce-Welt. Ganz, wie es sich für einen waschechten Teenager gehört.
Dass Ihnen – zumindest für eine gewisse Zeit – die Zukunft gehören wird, zeigt sich daran, dass Branchengrössen wie Pinterest, Aliexpress, Trivago oder Forbes sie bereits für Ihre Webauftritte übernommen haben. Und mit jeder Website, welche eine PWA integriert, wird ein Stück klarer, welches Potential in der Technologie steckt.
Progressive Web Apps are websites that took all the right vitamins. – Progressive Web Apps sind nichts anderes als Webseiten, die immer brav ihre Vitamine genommen haben.
Definition
PWA ist zuerst einmal die Abkürzung von Progressive Web App. Soweit schon erwähnt, soweit so gut. Doch für was steht das progressiv, welches eine “gewöhnliche” Web App von einer PWA unterscheiden soll, nun eigentlich.
Offizielle Definition gibt es diesbezüglich noch keine – Nein, auch nicht von seiner Hochwohlgeboren Google selbst. Lediglich die etwas schwammige Angabe, dass für das Erfüllen der Vorgabe alle Punkte der diesbezüglichen PWA-Checkliste zu erfüllen sind. Diese wurde allerdings selbstverständlich vom Internet-Behemoth höchstpersönlich zusammengestellt. Während die komplette Liste etwas umfangreicher ist, lässt sie sich in der Quintessenz auf vier Voraussetzungen reduzieren. Diese drei muss eine PWA auf jeden Fall erfüllen, um ihrem progressiven Ruf gerecht zu werden. Auf Englisch FIRE (Fast, Installable, Reliable and Engaging), ist die deutsche Entsprechung am ehesten mit SIZA (Schnell, Installierbar, Zuverlässig und Ansprechend) zu beschreiben. Doch für was stehen die 4 Buchstaben bzw. Adjektive im Detail:
Google liefert anzunehmenderweise absichtlich keine klare Definition des Begriffs Progressive Web App. Könnte die Idee eines offenen World Wide Webs doch im Widerspruch zu einem fix vorgegebenen Standard stehen, der von einem zentralen Akteur auf dem Markt definiert wird.
Es erscheint somit sicherer, eine allgemeine Richtung oder – besser gesagt – eine allgemeine Philosophie für den Aufbau von Online-Touchpoints aufzuzeigen, als eine bestimmte Methode zu erzwingen, um sie zu erstellen.
Aus diesem Grund hat Google “lediglich” den PWA-Standard eingeführt und zusätzlich Lighthouse bereitgestellt: Ein automatisiertes Open-Source-Tool, mit dem Entwickler eine Web App auf PWA-Funktionen prüfen können, um deren Qualität zu verbessern. Lighthouse macht einen Grossteil der bisher erforderlichen manuellen Tests überflüssig.
Mit dem Tool kannst du deine E-Commerce-Lösung auf PWA-Konformität, Leistung, Barrierefreiheit und Best Practices prüfen. Der Grundgedanke ist dabei, dass eine Progressive Web App die Erwartungen der mobilen Nutzer erfüllt, die eine einfache Nutzung der Anwendung unabhängig von den jeweiligen Rahmenbedingungen fordern. Um sich als PWA zu qualifizieren, muss eine Anwendung die meisten Punkte der PWA-Checkliste erfüllen (75% Übereinstimmung ist erforderlich).
Erklärung
Mit dem Aufkommen von Smartphones wurden Websites einem (noch) breiteren Publikum zugänglich gemacht. Der wachsende Besucheransturm stellte die Softwareentwickler bald vor immer neue Herausforderungen, um ein stetig optimales Benutzererlebnis sowohl für das Web als auch für Mobilgeräte zu gewährleisten. Es wurden verschiedene Tools und Frameworks ausprobiert, mit denen die Ziele jedoch nur bis zu einem gewissen Grad erreicht werden konnten.
Mit der Entwicklung von Progressiven Web Apps hat sich dieses Szenario jedoch deutlich geändert. Es steht nun endlich eine Lösung zur Verfügung, die ein gleichbleibend grossartiges Nutzererlebnis auf verschiedensten Endgeräten garantiert.
Die Progressive Web Apps zugrundeliegende Idee ist recht einfach erklärt. Es handelt sich um Apps, die in Webtechnologien (JavaScript, Css, HTML) geschrieben sind, dabei wie normale Webseiten aussehen – und sich auch wie solche verhalten.
Sie sind demzufolge in den Suchergebnissen auffindbar und verlinkbar, bieten dabei jedoch ähnliche Funktionen wie native mobile Apps: Sie funktionieren auch offline, können Push-Benachrichtigungen senden und machen sich die Hardware der Endgeräte auf die gleiche Art und Weise zu Nutze wie native Apps.
PWAs sind also so aufgebaut, dass sie die Vorteile der nativen Funktionen von Mobilgeräten nutzen, ohne dass der Endnutzer einen App-Store besuchen oder eine Software herunterladen muss. Stattdessen kann eine PWA über eine Suchanfrage gefunden und direkt über den Browser aufgerufen werden. Oder nach der 1-Klick-Installation direkt über den Desktop oder Startbildschirm.
PWAs ersparen es zudem, eigene Apps für verschiedene mobile Betriebssysteme zu entwickeln. Ähnlich wie YouTube-Videos werden PWA-Inhalte schrittweise heruntergeladen, was dem Endanwender ein besseres Nutzererlebnis bietet als eine herkömmliche Website, die lediglich ein responsives Design verwendet.
Zusammenfassend
PWAs sind moderne Websites, welche die enorme Reichweite des Internets optimal mit den benutzerfreundlichen Funktionen von Android-, iOS- oder Desktop-Apps kombinieren. Sie nutzen eine Reihe von Best Practices und modernen Web-APIs, die je nach den besonderen Ansprüchen und Prioritäten deines Unternehmens ganz einfach unabhängig voneinander eingesetzt werden können.
Der Begriff „Progressive Web App“ wurde 2015 von der Designerin Frances Berriman und dem Softwareentwickler Alex Russell geprägt. Die beiden sind übrigens nicht nur beruflich eng verbunden, sondern auch privat ein (Ehe)paar.
Das Ziel von PWAs ist es, den Übergang zwischen nativen Apps und dem mobilen Web zu verwischen, indem die meisten Vorteile nativer mobiler Apps in die mobilen Browser übernommen werden. Sie verwenden dabei standardmässig sichere Technologien: So werden sie in einem gut abgesicherten, jedoch gleichzeitig für jeden im Web zugänglichen, Container ausgeführt.
Ausserdem können Sie, wie bereits erwähnt, Push-Benachrichtigungen senden, offline arbeiten und sind vom Startbildschirm aus zugänglich – genau wie eine mobile App aus dem App-Store. Übrigens: 85% der Smartphone-Nutzer erachten mobile Benachrichtigungen für nützlich.
Zusätzlich können sich PWAs die Vorteile von APIs und Browser-Plugins zu Nutze machen, um sicherzustellen, dass die Bereitstellung und Pflege einer Website so einfach wie möglich gestaltet wird.
Ein weiterer Vorteil, den sie unter diesem Gesichtspunkt von klassischen Webseiten geerbt haben, ist die Verwendung von URIs (Uniform Resource Identifier / ein Internetprotokoll) zur Darstellung des aktuellen Status. Dadurch kann die Anwendung ihren Status entweder beibehalten oder aber auch neu laden, sobald der Nutzer ein Lesezeichen setzt oder die URL teilt.
Eine PWA wird zudem jedes Mal, wenn ein Benutzer sie aufruft, im Hintergrund aktualisiert. Und das, ohne dass dieser explizit eine Aktualisierung ausführen müsste. Im gleichen Zug werden auch die freien Kapazitäten seines Geräts überprüft, um je nach Bedarf und Möglichkeit im Hintergrund weitere Daten zu laden. Dabei werden Szenarien für zukünftige Nutzerinteraktionen entwickelt, wodurch die Anwendung noch leistungsfähiger (weil reaktionsschneller) erscheint.
Per Definition muss eine Progressive Web App auf jedem Gerät gleich gut funktionieren und sich dabei ausserdem schrittweise verbessern, indem sie alle auf dem Gerät und im Browser des Benutzers verfügbaren Funktionen ausnutzt.
Da PWAs auf dem Konzept „offline-first“ basieren, eignen sie sich hervorragend für aufstrebende Märkte oder auch ländliche Gegenden, in denen die Internetverbindungen weniger zuverlässig sind. Sie eignen sich auch hervorragend für Menschen, die unterwegs sind und deren Verbindung im Laufe des Tages immer wieder unterbrochen wird.
Während PWAs zwar mit Geolokalisierung arbeiten können, bleiben viele erweiterte Funktionen von Mobilgeräten ausserhalb ihrer Reichweite. So unterstützen sie in der Regel keine Abstands- und Berührungssensoren, erweiterten Kamerasteuerungen, Audio- und Videoaufnahmen, Fingerabdruck-Scans, NFC oder auch Bluetooth.
Vorteil
Daten aus der Praxis zeigen, dass eine App im Durchschnitt 20% der potentiellen Nutzer (Leads) verliert, für jeden Schritt, den diese vom ersten Kontakt mit der Anwendung bis zur endgültigen Nutzung von dieser durchführen müssen. Sprich, falls sie diese
Bevor sie loslegen können, verlierst Du zumindest 60% der Interessenten auf diesem langen und beschwerlichen Weg. Ein Wert, welcher sich mit einer Progressiven Web App deutlich verbessern lässt.
Während bei einer Android-App-Installation mindestens drei Schritte erforderlich sind (Weiterleitung zum Play Store, Herunterladen der App, Starten der App), erfolgt die PWA-Installation nahtlos mit einem Klick. Der Nutzer muss dafür nicht einmal den aktuellen Konversionstrichter verlassen – ein nicht unwesentlicher Vorteil.
Ist eine solche einmal installiert, können Nutzer sie mit einem Klick über das Symbol auf ihrem Startbildschirm starten, sie in ihrer App-Leiste sehen, wenn sie zwischen Apps wechseln, oder sie über ein App-Suchergebnis finden. Dies wird als dynamischer Discover-Launch-Switch bezeichnet.
Nutzer, die deine PWA installieren, gehören mit grosser Wahrscheinlichkeit zu deinen engagiertesten. Sie weisen demzufolge auch bessere Kennzahlen einschliesslich mehr wiederholter Besuche, längerer Verweildauer und höherer Konversionsraten auf. Hinsichtlich der Konversionsrate liegt diejenige von PWAs bis zu 36% über der von nativen Anwendungen.
Die Installation ist des Weiteren eine grossartige Möglichkeit, um Besucher deiner Website zur Rückkehr zu bewegen und dadurch die Kundenbindung zu verbessern. Du kannst zudem darüber nachdenken, das Erlebnis für Premium-Nutzer noch weiter zu personalisieren.
Falls Du eine plattformspezifische, native App anbietest, kann es vorkommen, dass die Nutzer das Gefühl haben, diese nicht installieren zu wollen oder zu müssen. Für diese semi-engagierten Nutzer kann eine PWA genau das Richtige sein, da sie nicht nur als leichter (bezüglich des benötigten Speicherplatzes) wahrgenommen wird, sondern ebenso als weniger verbindlich angesehen wird.
Untersuchungen zur User Experience zeigen, dass Internetnutzer zwar gerne auf native Apps zurückgreifen, weil sie (im Vergleich zu Websites) ein sauberes und reibungsloses Erlebnis bieten. Sie jedoch mobile Websites bevorzugen, um tiefer in ein Thema einzutauchen, gezielt nach Informationen zu suchen oder einzukaufen.
Ein weiterer Faktor, der die Affinität der mobilen Internetnutzer zu nativen Apps bedingt, ist die Tatsache, dass diese explizit für mobile Endgeräte entwickelt werden. Denn Mobile-first ist zwar seit einigen Jahren theoretisch in aller Munde, wird praktisch aber bei weitem nicht so konsequent umgesetzt. Native Apps bieten somit, was mobile Websites nicht erfüllen – oder auch, was diese rein technisch gar nicht können.
So kam die Branche zusammen (Apple zähneknirschend), um einen Weg zu finden, die Unmittelbarkeit und niedrige Einstiegshürde des Webs mit der Form und Funktionalität nativer Anwendungen zu verbinden. Das „Wieso“ von PWAs entstand. Die wichtigsten Gründe für deren Entwicklung lassen sich wie folgt zusammenfassen:
Die insign GmbH: Der perfekte Partner für die PWA-Entwicklung.
Der Prozentsatz der Einkäufe im E-Commerce, welche über Mobilgeräte getätigt werden, wächst rasant. Es wird erwartet, dass deren Anteil bis zum Jahr 2025 annähernd 50% des gesamten E-Commerce-Umsatzes ausmachen wird.
Demzufolge stehen Progressive Web Apps auf der Agenda vieler Unternehmen, um ihre Websites zu modernisieren und an die steigenden Erwartungen der mobilen Internetnutzer anzupassen. PWAs sind für die Verbesserung des Online-Einkaufserlebnisses von entscheidender Bedeutung, da sie ein noch schnelleres, angenehmeres und bequemeres Benutzererlebnis bieten. Im Folgenden haben wir Ihnen einige Beispiele aufgeführt, wie diese das Shopping-Erlebnis im E-Commerce im Detail verbessern.
Erreichen ein breiteres Publikum
Da sie direkter zugänglich sind und leicht über einen Link geteilt werden können, nehmen mehr Menschen sie an, als sich die Zeit nehmen würden, eine App herunterzuladen.
Barrierefreiheit
PWAs sind so konzipiert, dass sie für jeden Nutzer funktionieren, unabhängig davon, welchen Browser oder welches Endgerät er benutzt. Sie sind responsiv und passen sich automatisch an unterschiedliche Bildschirmgrössen an – von Smartphones über Tablets bis hin zu Desktops – indem sie den Inhalt neu formatieren, damit er im Ansichtsfenster korrekt angezeigt wird.
Optimierte Ladezeiten
Laut Google verlassen fast die Hälfte aller mobilen Internetnutzer eine Website, falls diese länger als 3 Sekunden benötigt, um zu laden (Schon einmal die Ladezeit von Deiner überprüft?). Hier liegt normalerweise ein normales Potential zur Verbesserung von fast allen wichtigen E-Commerce-Kennzahlen – von Absprung- bis hin zur Konvertierungsrate – verborgen. Höchstwahrscheinlich auch in deinem Online-Shop.
Die Ladezeit von PWAs ist in der Regel sehr schnell, da sie moderne Technologien (wie beispielsweise Komprimierung, Zwischenspeicherung, Codesplitting und progressives Rendering) sowie Frameworks verwenden. Noch besser ist, dass sie auch offline oder bei schlechter Internetverbindung funktionieren.
Stets aktuell
Im Gegensatz zu nativen Apps, die ständig aktualisiert werden müssen, um Sicherheit und reibungslose Leistung zu gewährleisten, sind PWAs stets auf dem neuesten Stand. Und das ganz ohne explizite Updates. Da es sich bei Progressiven Web Apps um Websites handelt, wird eine PWA immer frisch und aktualisiert geladen, wenn du sie ausführst.
Offline-Modus
Progressive Webanwendungen sind für ihre grossartigen Caching-Funktionen bekannt, die es Ihnen ermöglichen, eine (beinahe) lückenlose Offline-Zugänglichkeit zu bieten. Da alle relevanten Inhalte automatisch zwischengespeichert werden, können die Nutzer beim nächsten Besuch problemlos auf diese zugreifen – auch, falls sie nicht mit dem Internet verbunden sind. Sprich: Auch offline stehen deinen Shopbesuchern Produktsuche und Warenkorb zur Verfügung.
Lückenlose Kunden-(Neu)ansprache
In einem jeden Tag noch stärker gesättigten Markt sind die Erwartungen der Verbraucher höher denn je. E-Commerce-Websites müssen ein grossartiges Kundenerlebnis bieten, wenn sie Kunden an sich binden wollen. Und PWAs tragen stark dazu bei, die Kundenbindung zu erhöhen (und zwar um bis zu 50%). So bieten sie dir beispielsweise ganz einfach die Möglichkeit, Push-Benachrichtigungen über Preisnachlässe und Sonderangebote an deine Kunden zu senden.
Erhöhte Sicherheit
Das Vertrauen der Kunden zu gewinnen (und zu behalten), ist ein essentieller Bestandteil einer erfolgreichen E-Commerce-Strategie. Falls einem Besucher dein Online-Shop nicht vertrauenswürdig vorkommt, dann wird er in diesem nichts bestellen. Mit einer PWA besteht die Möglichkeit, das Frontend von der Backend-Datenbank zu entkoppeln. Dadurch wird die Menge der Daten, auf die zugegriffen werden kann, stark eingeschränkt.
Auffindbar
Wie Websites können auch Progressive Web Apps in den Suchergebnissen gefunden werden. Mit gezielter Suchmaschinenoptimierung kannst du also aktiv an der Auffindbarkeit sowie der Neukundengewinnung arbeiten.
Zusätzlich sind PWAs nicht nur im Web verfügbar und für Suchmaschinen sichtbar, sondern können darüber hinaus auch in App-Stores veröffentlicht werden. Google, Microsoft und sogar Samsung sind auf den Zug aufgesprungen, um die Akzeptanz von PWAs zu fördern, indem sie diese in ihre App-Stores aufnehmen. Microsoft geht sogar noch einen Schritt weiter und plant, seinen Store automatisch mit hochwertigen PWAs zu füllen, die von den hauseigenen Bing-Crawlern indexiert werden.
Suchmaschinenfreundlich
Nicht nur Suchmaschinen wie Google bevorzugen schnelle und mobilfreundliche Websites, sondern vor allem auch deren Nutzer. PWAs tragen also positiv zur Suchmaschinenoptimierung bei und ziehen somit organisch, auf ganz natürliche Art und Weise mehr und mehr Besucher an. Und mehr Besucher bedeuten mehr Umsatz, mehr Einnahmen und als Folge noch einmal bessere Suchmaschinenpositionen.
Kosteneffektiv
Die Programmierung nativer Apps ist oft mit hohen Kosten verbunden, insbesondere wenn sowohl Android- als auch iOS-Versionen entwickelt werden sollen. Mit PWAs besteht keine Notwendigkeit, separate native mobile Anwendungen zu entwickeln. Ein zusätzlicher Faktor, welcher sich positiv auf deren Entwicklungskosten auswirkt, ist, dass Standard-Webtechnologien wie HTML, Css und JavaScript verwendet werden.Wie Websites können auch Progressive Web Apps in den Suchergebnissen gefunden werden. Mit gezielter Suchmaschinenoptimierung kannst du also aktiv an der Auffindbarkeit sowie der Neukundengewinnung arbeiten.
Zusätzlich sind PWAs nicht nur im Web verfügbar und für Suchmaschinen sichtbar, sondern können darüber hinaus auch in App-Stores veröffentlicht werden. Google, Microsoft und sogar Samsung sind auf den Zug aufgesprungen, um die Akzeptanz von PWAs zu fördern, indem sie diese in ihre App-Stores aufnehmen. Microsoft geht sogar noch einen Schritt weiter und plant, seinen Store automatisch mit hochwertigen PWAs zu füllen, die von den hauseigenen Bing-Crawlern indexiert werden.
Die insign GmbH: Der perfekte Partner für die PWA-Entwicklung.
Wie wir gerade besprochen haben, bringen Progressive Web-Apps theoretisch eine Vielzahl von Vorteilen für Unternehmen mit sich. Nun wollen wir uns praktische Beispiele ansehen, welche die (oftmals graue) Theorie bestätigen:
AliExpress: 84%ige-Steigerung der Conversions auf iOS
Der chinesische E-Commerce-Marktplatz AliExpress verzeichnet eine schnell wachsende Zahl mobiler Nutzer. Die native App des Unternehmens hatte jedoch Mühe, mehr Downloads zu generieren, und das User-Engagement war teuer.
Das Unternehmen entwickelte deshalb eine PWA mit verschiedenen Features für Mobilgeräte, welchen den Zugang für die Nutzer erleichterten. Infolgedessen konnte das Unternehmen die Zahl der neuen Nutzer um 104% sowie die iOS-Konversionsrate um 84% steigern.
Tinder: Verringerung der Ladezeit um mehr als 50%
Die bekannte Online-Dating-App Tinder hat es geschafft, mit seiner neuen PWA die durchschnittlichen Ladezeiten von 11,91 Sekunden auf 4,69 Sekunden zu reduzieren. Das gelang vor allem dadurch, dass diese um 90% kompakter als die native Android-App ist. Zusätzlich ist mit der Einführung der PWA-Version das Nutzerengagement deutlich gestiegen..
Starbucks: Verdoppelung der täglichen Nutzer
Die Bestellungen über mobile Browser liegen ausserdem gleichauf mit denen, welche auf dem Desktop getätigt werden.
Hier findest du noch viele weitere gleichermassen interessante wie beeindruckende PWA-Statistiken.
Im Folgenden erfährst du mehr über den Unterschied zwischen PWAs, responsiven Webseiten und nativen sowie hybriden Anwendungen. Sowie alles über die Unterschiede in Architektur, deren Vorteile und wann du welche Art von Anwendung einsetzen solltest.
Progressive Web App vs Responsive Website
Eine responsive Website ist so konzipiert, dass sie auf jedem Gerät ansprechend dargestellt wird. Das bedeutet, dass sie auf jeder Bildschirmgrösse gut funktioniert, sei es auf einem grossen Desktop-Bildschirm oder auf dem kleinen eines Smartphones.
Das hauptsächliche Ziel einer responsiven Website ist es demzufolge, ein nahtloses Benutzererlebnis zu bieten – unabhängig davon, welches Endgerät verwendet wird. Dazu verwendet eine solche ein flexibles Layout. Das bedeutet, dass sich der Inhalt mit der Änderung der Bildschirmgrösse mitbewegt.
Progressive Web Apps und responsive Webseiten weisen zwar einerseits einige Gemeinsamkeiten auf, unterscheiden sich jedoch andererseits in einigen wichtigen Aspekten. Werfen wir einen Blick auf die wichtigsten Punkte, welche die beiden Lösungen voneinander unterscheiden.
Native Nutzung
PWA und responsive Websites werden zwar beide in einem Browser ausgeführt. Dennoch kann Erstere über die reine Browser-Darstellung hinausgehen und dem Anwender ein beinahe natives Nutzererlebnis bieten. Eine PWA kann beispielsweise so konfiguriert werden, dass sie die Hardware – wie die Kamera, das Mikrofon usw. eines mobilen Geräts nutzt. Dies ermöglicht den Einsatz neuer innovativer Funktionen.
Nutzererfahrung (User Experience)
PWAs bieten ein besseres Benutzererlebnis. Das hat wiederum direkte Auswirkungen auf die Positionierung in den Suchergebnissen. Suchmaschinen schenken der Benutzerfreundlichkeit immer mehr Aufmerksamkeit als Rankingfaktor, was Websites mit einer überdurchschnittlichen UX in den SERPs aufsteigen lässt.
Entwicklungszeit
In Bezug auf den Zeitaufwand für die Entwicklung einer responsiven Website und einer PWA gibt es keine signifikanten Unterschiede. Vor allem, falls du lediglich eine PWA-Storefront zu einem bestehenden Shop hinzufügen möchtest.
Schnellere Prozesse
PWAs speichern alle benötigten Informationen und Website-Inhalte im Zwischenspeicher (Cache) und verkürzen so die Zeit, bis eine Seite interaktiv ist. Indem sie die Wartezeit für die Nutzer verkürzen, reduzieren sie automatisch auch die Absprungrate. Und das deutlich.
Offline arbeiten
Responsive Websites benötigen für den Betrieb zwingend eine aktive Internetverbindung. Progressive Web-Apps haben hier einen grossen Schritt nach vorne gemacht, indem sie auch offline verfügbar sind.
Fazit: PWA vs responsive Website
Eine Progressive Web App bietet im Vergleich zu einer responsiven Website ein stark verbessertes Nutzererlebnis. Sie ist schnell, einfach und jederzeit abrufbar, bietet Funktionen, die zuvor nativen Apps vorbehalten waren – sowie zusätzlich rasch und günstig zu entwickeln.
Einfach ausgedrückt ist eine Web-App eine Website, die so gestaltet ist, dass ihr Inhalt auf allen Bildschirmtypen und -formaten angezeigt werden kann, unabhängig vom verwendeten Gerät. Eine Webanwendung wird mit einer Kombination von Front-End-Technologien wie HTML, Css, JavaScript und Back-End-Technologien wie Ruby, PHP, Python erstellt. Zum Funktionieren benötigen sie zwingend einen Webbrowser.
Dabei handelt es sich auch um eine der Schwachstellen dieser Art von Anwendungen: Sie können zwar alle Funktionen des Geräts nutzen, mit dem sie aufgerufen werden, sind dabei jedoch vom jeweils verwendeten Webbrowser abhängig. Das bedeutet, dass die Gerätefunktionen im Chrome-Browser zum Beispiel funktionieren können, nicht jedoch in Mozilla Firefox usw. Zu den beliebtesten Web-Apps gehören Google Sheets, Quora, Codepen.io oder Evernote.
Im Folgenden haben wir Dir die weiteren Unterschiede zwischen Progressiven Web Apps und Web-Apps übersichtlich zusammengefasst.
Möglichkeit zur Installation
Ein grosser Unterschied zwischen einer PWA und einer Web-App ist die Möglichkeit zur Installation. Eine PWA wird auf dem Gerät des Nutzers installiert, sei es nun ein Desktop oder ein Mobilgerät. Eine Web-App ist jedoch für die Ausführung in einem Webbrowser konzipiert und kann demzufolge nicht installiert werden.
Native Nutzung
Obwohl eine Progressive Web App ähnliche Technologien wie eine Web-App verwendet, bietet sie das Benutzererlebnis einer nativen App. Ausserdem kann eine PWA im Gegensatz zu Webanwendungen die meisten Gerätefunktionen wie Push-Benachrichtigungen nutzen – und das unabhängig vom verwendeten Webbrowser.
Sie bietet dabei eine so umfassende Nutzererfahrung, dass die Unterscheidung zwischen einer PWA und einer nativen App oftmals schwierig ist. Zumindest für das ungeübte Auge.
Einfacher Zugang
PWAs sind kompakt, da sie im Vergleich zu ihren nativen Pendants nur sehr wenig Speicherplatz (in der Regel einige wenige kB) benötigen. Wie bereits erwähnt, kann eine Webanwendung dagegen nicht installiert, sondern nur über einen Webbrowser abgerufen werden.
Nach der Installation einer PWA können die Nutzer diese ganz einfach über den Startbildschirm oder die Taskleiste aufrufen, wo das App-Symbol genau wie bei nativen Apps angezeigt wird. Ausserdem kann eine solche über einen Link weitergegeben werden, damit Freunde und Bekannte diese ebenso installieren können. So werden die Schritte zur Installation reduziert, was wiederum die Nutzerakzeptanz deutlich erhöht.
Höhere Geschwindigkeit
Progressive Webanwendungen sind in der Lage, Daten im Cache zwischenzuspeichern, sodass Nutzer bereits Bilder, Texte und andere Inhalte angezeigt bekommen, noch bevor die Anwendung vollständig geladen ist. Dies verkürzt die Wartezeit für diese und verbessert dadurch deren Verweildauer sowie Engagement. Durch dieses verbesserte Benutzererlebnis im Vergleich zu Web-Apps (und sogar nativen Apps), kann sich dein Unternehmen deutlich von der Konkurrenz abheben.
Stärkere Nutzerbindung
Einer der Hauptvorteile von PWAs ist, dass sie mit Funktionen wie Push-Benachrichtigungen arbeiten können, welche die Nutzerbindung verstärken. Mit Hilfe von solchen kannst du deine Kunden über Angebote und neue Dienstleistungen informieren, um sie noch stärker an deine Marke zu binden.
Fazit: PWA vs Web-App
Im Vergleich zwischen Progressiven Web Apps und Web Apps liegen die Vorteile klar bei Ersteren. Schnell, benutzerfreundlich und offline verfügbar: Diese Kombination kommt bei den Nutzern hervorragend an, wodurch natürlich Nutzerengagement und -bindung steigen.
Werden PWAs native Apps ersetzen?
Obwohl PWAs sich in vielen Belangen von nativen mobilen Apps abheben, sind sie nicht unbedingt in allen Bereichen praktischer oder benutzerfreundlicher. Eine native App ist beispielsweise flexibler, da die Benutzeroberfläche frei gestaltbar ist. Bei einer Progressiven Web App gibt es hingegen keine Möglichkeit, sie über einfache Änderungen wie Farben und Schriftarten hinaus anzupassen.
Weder PWAs noch native Apps sind der einzige Weg, um ein reibungsloses plattformübergreifendes Nutzererlebnis zu schaffen. Mit Tools wie React Native, Native Scripts, Flutter oder Ionic gibt es einen dritten Weg: hybride Apps.
Diese Frameworks ermöglichen die Entwicklung von Apps, die eine nahezu native Leistung auf verschiedenen Betriebssystemen (Android, iOS, Windows usw.) bieten, ohne dass dafür verschiedene Codebasen geschrieben werden müssen. Der plattformübergreifende Ansatz ist nicht nur weniger zeitaufwändig, gleichzeitig sind die Entwicklungskosten deutlich niedriger.
Eine ordentlich programmierte – sowie in weiterer Folge ebenso ordentlich optimierte – Cross-Plattform-Applikation unterscheidet sich prinzipiell nicht allzu deutlich von einer nativen Anwendung. Bei komplexeren Anwendungen, wie Spielen oder umfangreichen Programmen, kann sie jedoch merkbar langsamer sein oder sogar unter einer erheblichen Verzögerung leiden. Ausserdem ist es schwierig, Android- oder iOS-spezifische Funktionalitäten mit hybriden Anwendungen zu unterstützen.
PWAs verwenden wie hybride Apps nur eine einzige Codebasis für alle Plattformen, sind jedoch im Gegensatz zu diesen bei weitem schneller. Doch das ist noch lange nicht der einzige Unterschied. Werfen wir gemeinsam einen Blick auf die wichtigsten Unterscheidungsmerkmale zwischen einer Progressiven Web App und einer Hybrid-App.
Bereitstellung
Hybride Anwendungen werden über App-Stores vertrieben. Dadurch ergeben sich die bereits bei den nativen Apps angesprochenen Nachteile gegenüber PWAs.
Individualisierung
Dies ist einer der Hauptunterschiede zwischen einer PWA und einer hybriden Anwendung. PWAs lassen viel Raum für individuelle Anpassungen. Es können problemlos Änderungen an der Codebasis vorgenommen und direkt auf die laufende Anwendung übertragen werden.
Hybride Anwendungen hingegen bieten nur begrenzte Anpassungsmöglichkeiten. Da sie auf allen Betriebssystemen funktionieren müssen, können Sie nicht die gesamte Funktionspalette eines jeden von diesen nutzen, da ein anderes möglicherweise nicht die gleichen Funktionen unterstützt. Sprich: Eine hybride App muss hinsichtlich ihrer Funktionalität auf den grössten gemeinsamen Nenner reduziert werden.
Entwicklungskosten
In den meisten Fällen sind die Entwicklungskosten einer hybriden App höher als die einer progressiven Webanwendung. Ausserdem kann die PWA-Funktionalität einfach zu einer bereits bestehenden Website hinzugefügt werden, was zusätzlich die Entwicklungszeit erheblich verkürzt – und dadurch die Entwicklungskosten auch noch einmal.
Performance
PWAs sind für ihre Leistungsfähigkeit bekannt. Durch das Zwischenspeichern von Informationen sorgen sie für eine erhöhte Ladegeschwindigkeit. Hybride Anwendungen können da nicht mithalten. Im Gegenteil: Diese sind dafür bekannt, eine Menge an zusätzlichen Optimierungen zu erfordern, um eine ansprechende Geschwindigkeit auf allen Geräten und Betriebssystemen zu erreichen.
Offline-Modus
Mobiles Einkaufen mit hybriden E-Commerce-Anwendungen benötigt im Gegensatz zu einer PWA eine aktive Internetverbindung, um Produkte anzuzeigen oder Artikel in den Warenkorb zu legen. Wird die Internetverbindung unterbrochen – oder auch nur instabil – wird das Einkaufserlebnis schnell getrübt. Als Ergebnis schnellt die Abbruchrate in die Höhe.
Fazit: PWA vs hybride App
Es besteht kein Zweifel, dass PWAs den Vergleich gewinnen. Sie bieten ein besseres Benutzererlebnis, eine schnellere Entwicklungszeit und die Möglichkeit im Offline-Modus zu interagieren.
Hier findest Du noch einmal den Überblick über den Vergleich von Progressiven Web Apps sowohl mit einer responsiven Website als auch hybriden genauso wie nativen Apps. Die nachstehende Tabelle soll ausserdem dabei helfen, die grössten Stärken und Schwächen der einzelnen Lösungen auf einen Blick zu verstehen.
| Funktion | PWA | Responsive Website | Hybride App | Native App |
| Multiplattformkompatibel | + | + | + | – |
| Verlinkbar | + | + | – | – |
| Indexierbar | + | + | – | – |
| Offline-Modus | + | – | – (nicht für E-Commerce) | – (nicht für E-Commerce) |
| Installierbar | + | – | + | + |
| Behind-the-Scene-Updates | + | + | – | – |
| Push-Benachrichtigungen | + | – | + | + |
| Zeit- und kosteneffiziente Entwicklung | + | +/-(Nicht effizient, falls du auch eine App entwickeln musst) | – | – |
| Verbreitung | Web | Web | App-Store | App-Store |
| Mobile-First-Design | + | – | + | + |
| Geringer Speicherplatz | + | + | – | – |
| Hardwarelastig | – | – | + | + |
| App-Store-Beschränkungen | – | – | + | + |
| Inhalte teilbar | + | + | – | – |
Welche ist die beste Lösung für das E-Commerce?
Wenn es um den Einsatz im elektronischen Handel geht, bieten PWAs weitaus bessere Funktionen als alle anderen Alternativen. Benutzererfahrung nahe an native, gute Auffindbarkeit und der Offline-Modus sind nur ein paar der Gründe, warum innovative Online-Shops PWAs wählen sollten, um noch näher am mobilen Kunden zu sein.
Wann empfiehlt sich die Entwicklung einer progressiven Webanwendung?
Native Lösungen werden in der Regel für Anwendungen empfohlen, von denen man annimmt, dass die Benutzer regelmässig zu ihnen zurückkehren. Bei einer Progressiven Web App ist das nicht anders. Flipkart nutzt beispielsweise eine PWA für seine beliebte E-Commerce-Plattform Flipkart Lite. Und die SBB verwendet eine solche für ihren Online-Check-in-Prozess, der es ermöglicht, Tickets ohne Internetverbindung abzurufen.
Bei der Entscheidung, ob deine nächste Anwendung eine progressive Webanwendung, eine responsive Website oder eine native mobile Anwendung sein soll, solltest du demzufolge zunächst die wichtigsten Nutzergruppen und deren häufigsten Aktionen identifizieren
Add: PWA vs React Native?
Das React-Framework wurde von Facebook und Reactjs eingeführt und stellt die Open-Source-Programmiersprache für JavaScript dar. Es eignet sich hervorragend für die Entwicklung von hybriden Anwendung, welche auf verschiedenen Plattformen zum Einsatz kommen sollen. Einige der bekannten Marken, die React Native verwenden, sind Facebook, Instagram, Coinbase oder Shopify.
PWAs stützen sich auf Webtechnologien, um ihren Nutzern app-ähnliche Erlebnisse zu bieten. Eine React-Native-App ist hingegen in der Lage, dank der Verwendung nativer Komponenten ein echtes natives Erlebnis zu bieten. Dazu gehören plattformspezifische Komponenten wie <DatePickerIOS> und <ProgressViewIOS> für iOS oder <ViewPagerAndroid> und <ToastAndroid> für Android.
Aufgrund der besseren Integration mit dem verwendeten Gerät ist eine React-Native-Anwendung nicht nur sicherer und weniger anfällig für Schwachstellen. Gleichzeitig hat sie einen viel breiteren Zugriff auf native Schnittstellen (APIs).
Das bedeutet, dass sogar der Low-Level-Zugriff auf die Hardware des Geräts (z. B. auf NFC, Kontaktliste usw.) sowie auf das Betriebssystem (z. B. auf Systemeinstellungen, Protokolle usw.) möglich ist. Ein Umstand, der nicht unwesentlich zur Verbesserung der Benutzererfahrung beiträgt.
Da eine PWA für den Hardwarezugriff auf Web-APIs angewiesen ist, ist die Nutzung der Systemressourcen naturgemäss stärker eingeschränkt. Im besten Fall – d. h. wenn der verwendete Browser alle aktuellen Hardware-Zugriffs-APIs unterstützt – kann eine PWA auf verschiedene Hardware-Funktionen zugreifen, die zuvor ausschliesslich nativen Anwendungen vorbehalten waren. Darunter gehören beispielsweise Geolokalisierung, Zugriff auf Kamera und Mikrofon oder Augmented Reality (mit WebXR Device API).
Was die Entwicklungskosten angeht, so sind React-Native-Projekte aufgrund der hohen Komplexität bei weitem teurer als ein einfaches PWA-Projekt. Im Vergleich zu anderen nativen App-Frameworks bleibt React Native jedoch dank seiner plattformunabhängigen Architektur eine kostengünstige Lösung. Mit einer einzigen Codebasis kann eine App sowohl im Google Play Store als auch im Apple App Store veröffentlicht werden. Das senkt die Entwicklungskosten erheblich, ohne dass dafür die Benutzererfahrung leiden muss.
Fazit: PWA vs React Native
React Native ist dann zu bevorzugen, wenn die Ausrichtung auf iOS- und Android-Geräte über den App-Store das Hauptziel ist. Falls jedoch die Ausweitung der allgemeinen Reichweite der Anwendung (Nutzer und Geräte) angepeilt wird, dann ist eine PWA die bessere Wahl. Vor allem, da diese zusätzlich auch schneller und kostengünstiger zu entwickeln ist.
Zum Abschluss wollen wir noch in ein paar (kurzen) Kapiteln auf Beispiele für PWAs eingehen, die bereits speziell für die beiden E-Commerce-Lösungen Shopify und Magento entwickelt wurden. Sowie ausserdem, wie du deine WordPress-Webseite in eine moderne PWA-Lösung verwandeln kannst. Viele weitere Beispiele für Progressive Web Apps unterteilt nach Kategorien und Entwicklern gibt es übrigens auf findPWA zu entdecken.
Software so individuell wie dein E-Commerce-Projekt.
Shopware-PWA
Shopware, gegründet im Jahr 2000, ist eine deutsche Open-Source-Plattform, die speziell für den digitalen Handel entwickelt wurde. Mehr als 20 Jahre konstanter Entwicklung und 80.000 Kunden später, ist Shopware eines der bedeutendsten E-Commerce-Ökosysteme der Welt.
Die Shopware-PWA ist eine der neuesten Entwicklungen der E-Commerce-Plattform, die speziell für Shopware 6 entwickelt wurde. Der Hauptfokus der Lösung liegt auf der vollständigen Nutzung des Headless-Commerce-Ansatzes von Shopware 6. Sie ist vollständig unabhängig und kann daher jederzeit implementiert sowie aktualisiert werden.
Sprechen wir ein bisschen über die Technik. Shopware hat lange Zeit damit verbracht, seine PWA von Grund auf neu zu gestalten. Die Absicht dahinter war, die aktuellsten Ansätze von Vue und JavaScript zu integrieren.
Das Shopware-PWA-Projekt ist nämlich eine Kooperation zwischen Shopware und Vue Storefront. Vue Storefront kümmert sich in diesem um den Faktor Geschwindigkeit und stellt sicher, dass die PWA effizient und vor allem schnell arbeiten kann. Shopware hingegen ist für die Bereitstellung einer reibungslos funktionierenden Schnittstelle (API) verantwortlich.
Ein Shopware-PWA-Stack umfasst:
Magento-PWA
Magento (Adobe Commerce) ist eine der führenden E-Commerce-Plattformen weltweit. Über 150.000 Websites (zwischen 2 und 3% der globalen Online-Shops) nutzen Magento. Magento-Benutzer haben Zugang zu Hunderten von einzigartigen Funktionen, die sie dabei unterstützen, Kunden zu gewinnen und ihre Produkte zu verkaufen. Die E-Commerce-Lösung wurde übrigens mit einem speziellen Augenmerk auf die Anforderungen der Entwickler entworfen.
Magento: Wir waren von Anfang mit dabei.
Die Integration von Progressive Web Apps in Magento erweckte grosses Interesse, insbesondere mit der Veröffentlichung des Magento 2 PWA Studio. Neben dem PWA Studio bestehen noch zwei weitere Möglichkeiten, um einen Magento-Shop in eine Progressive Web App zu verwandeln:
Im Folgenden wollen wir dir deshalb 3 der bekanntesten PWA-Erweiterungen und – Themes für Magento vorstellen
SimiCart PWA ist die kostengünstigste (und eventuell auch die einfachste – bezüglich der angebotenen Funktionen) Lösung, um eine Progressive Web App für Magento zu erstellen. Basierend auf dem Magento PWA Studio, umfasst es sowohl eine Desktop- als auch eine mobile Version.
Sie hilft deiner Website, besser bei Google zu ranken, indem sie die Ladegeschwindigkeit um bis zum Dreifachen erhöht. Ausserdem trägt SimiCart zur Kundenbindung bei, indem es Funktionen wie das Hinzufügen zum Startbildschirm und Push-Benachrichtigungen bereitstellt.
GraphCommerce ist ein Headless-Storefront-Ersatz für Magento 2, der ein schnelleres und besseres Benutzererlebnis bietet. Vollständig anpassbar (React, Next.js) und Open-Source. Es wird mit vielen TypeScript-Definitionen ausgeliefert, um die Textverarbeitung zu verbessern. Und es kommt zusätzlich mit Material UI. Ausserdem ist der Name natürlich von GraphQL abgeleitet.
ScandiPWA ist das erste vollständige PWA-Theme für Magento 2, entwickelt von Scandiweb. Es ist eine schnelle, offline-taugliche progressive Weblösung. Das Theme basiert auf React sowie Redux und nutzt Technologien wie GraphQL, Varnish und Redis, um die Performance deiner Website zu verbessern.
Der Einsatz dieser Technologien erlaubt es unter anderem, dass der Shop nur einmal vollständig im Browser geladen werden muss. Anschliessend wird lediglich das nachgeladen, was gerade gebraucht wird. Ohne nervige Ladezeit macht das Durchstöbern eines Online-Shops nicht nur viel mehr Spass, es treibt auch die Konversionsrate nachweislich nach oben.
Deine ScandiPWA-Shopfront in nur 3-5 Tagen.
WordPress-PWA
Die Umwandlung deiner WordPress-Website in eine PWA bietet deinen Besuchern ein Erlebnis, das mit dem einer Web-App vergleichbar ist. Falls du bereits eine WordPress-Website besitzt, kannst du diese in einigen wenigen Schritten in eine ansprechend gestaltete und hochfunktionale Progressive Web App umwandeln. Grundsätzlich stehen dir dafür zwei Möglichkeiten zur Verfügung: Du kannst sie manuell erstellen oder ein WordPress-Plugin verwenden.
Falls Du auf ein Plugin setzen möchtest, um dir die Arbeit zu erleichtern, dann stehen dir inzwischen eine Vielzahl von Optionen zur Verfügung. Beispielhaft wollen wir an dieser Stelle drei davon auflisten, es gibt allerdings noch viele mehr:
Falls du es vorziehst, den gesamten Prozess selbst zu verwalten, kannst du bei der Gestaltung deiner WordPress-PWA verschiedene Wege einschlagen. Es gibt nicht den einen Standard oder das eine Framework, dem du folgen musst.
Du kannst eine WP-PWA beispielsweise mit AngularJS, React oder Vue entwerfen. Jede Methode hat ihre Vor- und Nachteile, je nachdem, wo der Schwerpunkt deiner Anwendung liegen soll. Bei der Auswahl des Frameworks bist du also recht frei, deine WP-Website muss lediglich die folgenden drei Grundvoraussetzungen erfüllen.
Wie du in weiterer Folge genau vorgehen musst, um eine PWA zu erstellen, das haben wir dir im folgenden (dem abschliessenden) Kapitel unseres Beitrag noch einmal kurz zusammengefasst.
Lass uns nun gemeinsam kurz die 3 wichtigsten Schritte zur Umwandlung deiner Website in eine progressive Webanwendung durchgehen.
Schritt 1: Verwende das HTTPS-Protokoll
Daran führt kein Weg vorbei, denn bei einer PWA muss der gesamte Datenaustausch über eine sichere Domain erfolgen. Sprich über eine HTTPS-Verbindung.
Schritt 2: Erstelle ein Web-App-Manifest
Dabei handelt es sich um eine JSON-Textdatei, die alle Metadaten der PWA enthält: Beschreibung, Umfang, start_url, Name, Bilder, Anzeige, short_name usw. Diese Informationen teilen den Browsern mit, wie die App angezeigt werden soll, sobald sie als Icon auf dem Startbildschirm gespeichert ist. Das natürlich erst, nachdem du:
Das Manifest sollte ausserdem mittels einem der beiden folgenden Codes bereitgestellt werden:
Schritt 3: Richte einen Service Worker ein (in diesem liegt das wahre Potential einer PWA)
Ein Service Worker ist eine JavaScript-Datei, die im Stammverzeichnis der App platziert wird und die Rolle eines “Vermittlers” zwischen dem Browser und dem Host einnimmt. Sobald dieser in den unterstützten Browsern installiert ist, fängt er die Netzwerkanfragen ab und beantwortet sie auf unterschiedliche Art und Weise.
Hinweis: In den meisten Fällen verwenden wir den Service Worker, um alle statischen Dateien zwischenzuspeichern, damit unsere PWAs auch offline funktionieren.
Als Erstes muss der Service Worker registriert werden, dadurch dass der folgende Code in der JS-Datei der Website ausgeführt wird: if (‘serviceWorker’ in navigator) { // register service worker navigator.serviceWorker.register(‘/service-worker.js’); }
Konkret prüft dieser dann, ob der jeweilige Browser einen Service Worker unterstützt. Und falls ja, registriert er die Service-Worker-Datei. Um diese wiederum zu erstellen, muss zuerst der folgende Befehl im Terminal ausgeführt werden: $ npm install –global sw-precache. Und anschliessend der folgende im Website-Verzeichnis: $ sw-precache.
Und voilà! Wir haben eine service-worker.js mit dem Inhalt des Service Workers erzeugt.
Zum Abschluss: Überprüfe, ob alles läuft wie es soll
Dafür sind zwei weitere Schritte erforderlich.
Der erste Schritt wird wie folgt ausgeführt:
Überprüfe dann, ob der Service Worker ordnungsgemäss aktiviert wurde und normal läuft, indem du das Kontrollkästchen “Offline” anklickst und danach versuchst, die Seite neu zu laden. Wird der Inhalt deiner Progressiven Web App auch dann angezeigt, wenn keine Internetverbindung besteht? Kommen wir nun zum zweiten Schritt: Die Überprüfung der Funktionalität mit dem Lighthouse-Tool:
Starte mit uns dein Projekt für deine PWA-Lösung
Damit sind wir am Ende unseres (zugegebenerweise recht ausführlichen) Ratgebers zum Thema “Was ist eine Progressive Web App (PWA)?” angelangt. Wir von der Webagentur insign hoffen, dass die von uns zusammengestellten Informationen hilfreich für dich gewesen sind. Sollte doch noch die eine oder andere Frage offen sein, dann stell uns diese einfach in den Kommentaren. Wir freuen uns auf deine Nachricht!
Du hast deine E-Commerce-, Digitalisierungs- und OPENAI-Experten gefunden.
