Ihr Guide für Progressive Web Apps (PWAs)

In der Entwicklung des E-Commerce gibt es einige Schlüsselmomente: der Start des Teleshoppings in den 70er-Jahren, ein Rentner, der in den 80er-Jahren zum ersten Homeshopper der Welt wurde, und die Erfindung des World Wide Web in den 90er-Jahren. In den letzten Jahren haben wir den Aufstieg des mobilen Handels, des Social Commerce und von Amazon erlebt.

All diese Entwicklungen gehen Hand in Hand mit dem Fortschritt der globalen Technologie und insbesondere des Internets. Da immer mehr Menschen online sind, Smartphones kaufen oder Zugang zu schnellen Internetverbindungen haben, beschleunigt sich die Entwicklung des E-Commerce.

Und hier treffen wir auf Progressive Web Apps (PWAs).

Seit Google den Begriff im Jahr 2015 geprägt hat, haben PWAs begonnen, die App-Entwicklung neu zu definieren. Ihre Nutzung nimmt ebenfalls zu: Daten zeigen, dass die Installationen von Desktop-PWAs in nur einem Jahr um 270 % gestiegen sind, und Experten sagen voraus, dass ihr Marktwert bis 2027 10 Milliarden Euro übersteigen wird.

Data image for PWA article

Trotz dieses Wachstums zeigen Daten, dass etwa ein Viertel der E-Commerce-Unternehmen immer noch unsicher sind, was PWAs sind und wie sie effektiv genutzt werden können. In diesem Artikel geben wir Ihnen einen tiefen Einblick in PWAs und beantworten die folgenden Fragen: Was sind PWAs? Wie können Sie PWAs entwickeln? Welche Vorteile bieten Ihnen PWAs?

Was sind Progressive Web Apps?

Eine PWA ist eine Art von Web App, die über das Internet bereitgestellt wird. Man kann sie sich als eine Art Website vorstellen, die sich ähnlich verhält wie native Apps (die für die Verwendung auf einer bestimmten Plattform oder einem bestimmten Gerät entwickelt werden). PWAs nutzen Webtechnologien oder die Tools und Sprachen, die Geräte zur Kommunikation untereinander verwenden, um zu funktionieren. Auf diese Weise können PWAs für jedes Gerät optimiert werden. Zudem funktionieren sie auf allen gängigen Browsern und sogar offline. Wer PWAs nutzt, greift über einen Browser darauf zu. Benutzer müssen dafür weder einen App-Store besuchen noch eine zusätzliche Software herunterladen.

Damit eine App als PWA anerkannt wird, sollte sie die folgenden Charaktereigenschaften besitzen:

Progressiv: Da PWAs auf progressiver Erweiterung beruhen, funktionieren sie auf jedem Gerät und nutzen dabei die vorhandenen Funktionen des Geräts und des Browsers des Nutzers.

Auffindbar: Sie können die App über Suchmaschinen finden.

Installierbar: Sie können sie auf dem Startbildschirm eines Geräts oder im App Launcher installieren.

Verlinkbar: Sie können sie nur mit einer URL weitergeben.

Unabhängig von der Konnektivität: PWAs funktionieren sowohl komplett offline als auch mit einer schlechten Internetverbindung.

Wiedereinschaltbar: PWAs können zum Senden von Push-Benachrichtigungen verwendet werden.

Responsive: PWAs können auf jedem Gerät mit einem Bildschirm und einem Browser verwendet werden.

Vorteile von PWAs

Die Vorteile von PWAs sind:

Immer verlässlich

PWAs werden sofort geladen, unabhängig davon, ob Sie eine starke Internetverbindung haben. Dadurch können PWAs ein schnelles und zuverlässiges Benutzererlebnis bieten. Außerdem benötigen sie weniger Speicherplatz als native Anwendungen.

Ganz ohne Installation

Benutzer müssen eine PWA nicht über einen App-Store installieren. Stattdessen können sie eine PWA direkt über eine URL öffnen oder sie auf ihrem Startbildschirm speichern, um sofort darauf zugreifen zu können. Dies verringert die Reibung, macht den Start einfach und erhöht die Verweildauer.

Home page image for PWA article

Schnelle Ladezeiten

Durch den Einsatz von Webtechnologien wie Daten-Caches bieten PWAs schnelle Seitenladezeiten. Dies verbessert die Nutzererfahrung und erhöht die Verweildauer. Sie funktionieren außerdem auch offline oder mit einer schlechten Internetverbindung.

Auf jedem Gerät voll funktionsfähig

PWAs sind so konzipiert, dass sie für jeden Benutzer funktionieren, unabhängig vom Gerät. Sie passen sich jeder Bildschirmgröße an und bieten den Nutzern das gleiche Erlebnis, auch wenn sie auf verschiedenen Geräten verwendet werden.

Das Beste aus Web und App – in der Kombination

Durch die Kombination der besten Web- und App-Funktionen bieten PWAs ein besseres Erlebnis für Nutzer und Unternehmen. Sie können die Funktionen des Browsers und des Geräts, auf dem sie verwendet werden, nutzen, einschließlich Push-Benachrichtigungen, Kameras und GPS. PWAs werden von Suchmaschinen gefunden, was sich auch positiv auf die Suchmaschinenoptimierung auswirkt.

SEO image for PWA article

Günstige und schnelle Entwicklung

Eine native App muss sowohl für Android als auch für Apple iOS entwickelt werden. Mit PWAs müssen Unternehmen jedoch nur eine App entwickeln, die auf allen Geräten funktioniert. So lassen sich Kosten und Zeitaufwand für die Entwicklung einer App für alle Plattformen reduzieren.

Automatische Aktualisierungen

Im Gegensatz zu nativen Apps können PWAs automatisch aktualisiert werden. Die Benutzer müssen nicht benachrichtigt werden oder einer Aktualisierung zustimmen, bevor sie durchgeführt wird. So wird sichergestellt, dass sie immer die aktuellste Version verwenden.

Push-Benachrichtigungen

PWAs ermöglichen es dem Betreiber, Push-Benachrichtigungen an die Nutzer zu senden. Dies kann Unternehmen bei Marketing-Aktivitäten helfen oder wichtige Aktualisierungen direkt an ihre meistgenutzten Geräte senden.

Push notification image for PWA article

Erhöhte Sicherheit

PWAs verwenden Hypertext Transfer Protocol Secure (HTTPS), um Daten sicher zu speichern, wodurch das Risiko von Sicherheitsverletzungen und anderen illegalen Aktivitäten ausgeschlossen wird.

Beispiele von Progressiven Web Apps

Viele globale Marken haben seit der Einführung von PWAs signifikante Ergebnisse erzielt, darunter Twitter, Clipchamp, Pinterest und Forbes. Einige andere bemerkenswerte PWA-Beispiele sind:

Roeckl

Die deutsche Luxus-Accessoires-Marke Roeckl wurde 1839 gegründet. Das Unternehmen nutzte traditionelle Point-of-Sale-Methoden für den Verkauf, erkannte aber, dass es sich an die veränderten Bedürfnisse der Verbraucher anpassen musste, die sich online bewegen. Durch die Entwicklung einer Magento 2 PWA konnten die Bestellungen um fast 200 % gesteigert, die Nutzerzahlen um 150 % erhöht und die Absprungrate um 35 % gesenkt werden.

Roeckl image for PWA article

Flipkart

Indiens größte E-Commerce-Website steigerte die Conversion-Rate um 70 %, nachdem sie ihre Webpräsenz und ihre native App in einer PWA kombiniert hat. Außerdem konnte die durchschnittliche Verweildauer der Nutzer auf der Website mehr als verdreifacht werden. Die Wiedereinstiegsrate stieg zudem um 40 %.

Lancôme

Die Luxuskosmetikmarke Lancôme nutzte PWAs, um ein schnelles, App-ähnliches Erlebnis auf mobilen Geräten zu schaffen und so die Besucherzahlen und die Wiederbeteiligung zu steigern. Auf diese Weise konnte das Unternehmen die Conversion-Rate um 17 % steigern, die Zahl der mobilen Sitzungen auf iOS um 53 % erhöhen und die Conversion für wiederhergestellte Warenkörbe über Push-Benachrichtigungen um 8 % steigern.

Entwicklung von PWAs

Die Entwicklung von PWA-Anwendungen erfolgt mit einem Website-Toolkit, in der Regel HTML5, CSS, JavaScript oder WebAssembly. Diese Technologien sind auf fast allen Plattformen verfügbar, was bedeutet, dass der Code einmal geschrieben werden kann und auf mehreren Geräten und Softwareumgebungen funktioniert.

Dies ist ein unkomplizierterer Prozess als die Entwicklung nativer Apps, die in der Regel von Entwicklern in ökosystemspezifischen Programmiersprachen (wie Kotlin für Android oder Objective-C für iOS) geschrieben werden müssen.

PWAs im E-Commerce

PWAs sind ein hervorragendes Werkzeug für jedes E-Commerce-Unternehmen: Sie bieten jedem, der über eine Internetverbindung verfügt, ein bemerkenswertes Nutzererlebnis, hohe Bindungsraten und alle Funktionen einer nativen App. Außerdem sind sie in der Regel billiger, schneller und einfacher zu entwickeln als native mobile Apps, benötigen also keine unterschiedlichen Tech-Stacks für Ihre mobilen und Desktop-Sites. Ganz im Gegenteil: Mit PWAs haben Sie eine einzige Codebasis für alle Ihre Kanäle.

Benefits image for PWA article

Durch die Verwendung einer PWA wird die Bindung zwischen den Nutzern und Ihrer Marke grundsätzlich stärker – vor allem, wenn sie Ihre App auf ihrem Startbildschirm haben. Gleichzeitig können Sie Push-Benachrichtigungen für Marketing und Updates verwenden und PWAs für einen nahtlosen Checkout nutzen. Für die Zukunft des E-Commerce, werden PWAs jetzt schon als wichtige Komponente in Bezug auf Kundenerlebenisse betrachtet, die hängen bleiben – und das Wachstum Ihrer Marke nachweislich vorantreiben.

Mühelose PWA-Zahlungen mit Mollie

Möchten Sie Ihren Kunden ein nahtloses Checkout-Erlebnis und alle benötigten Zahlungsmethoden bieten? Oder möchten Sie Zahlungen in die PWA (oder zukünftige App) Ihres Shops integrieren? Wir von Mollie bieten Ihnen eine einfache Zahlungslösung, mit der Sie mehrere Zahlungsmethoden akzeptieren, Ihren Kunden einen auf Ihre Conversion optimierten Checkout bieten und auf eine Reihe von Funktionen und anderen Vorteilen zugreifen können. Wir vereinfachen Ihre Zahlungen und fördern das Wachstum Ihres Unternehmens.

Mit unserem API-first-Ansatz können Sie Mollie-Zahlungen ganz einfach in Ihre PWAs implementieren. Wir bieten ein Plugin für Magento 2 PWAs, unabhängig von der Technologie, die Sie zur Entwicklung Ihrer App verwenden. Außerdem führen wir auch ein Plugin für Shopware 6 ein und bieten bereits Integrationen mit ScandiPWA (ein Frontend für Magento 2) und commercetools. Integrationen für weitere Frameworks, einschließlich Vue Storefront und Shopware PWA, werden in Kürze folgen.

Sie möchten Ihr Unternehmen mit mühelosen Zahlungen erweitern? Erfahren Sie jetzt mehr über Zahlungen mit Mollie, oder melden Sie sich an, um unser Produkt kennenzulernen – ganz ohne Vertragsbindung und festen Startgebühren.

Erhalten Sie jetzt bessere Zahlungen.