13 Dez´2018

PWA – Progressive Web Apps

Toni
Antonia - SEO & Online Marketing
11 min Lesezeit

Als Progressive Web Apps (PWA) vor vier bis fünf Jahren ins Gespräch kamen, fanden sie schnell großen Anklang. In den vergangenen Jahren zeigte sich, dass Websites nicht länger hauptsächlich auf Desktop-Browsern aufgerufen werden, sondern sich der Trend immer weiter in Richtung mobiler Endgeräte bewegt. Dies erfordert eine optimale Anpassung, welche sich nicht nur auf unterschiedliche Displaygrößen, sondern auch verschiedenen technischen Funktionsumfang je Endgerät bezieht. Eine dieser Lösung bot bis dato das Responsive Webdesign (RWD), welches über HTML5 realisierbar ist. Eine weitere Lösung stellen native Apps dar. Da diese jedoch eine Installation erfordern und gleichzeitig Ressourcen des Endgeräts binden, bieten diese keine adäquate Lösung. PWA vereinen die Vorteile beider Lösungen und reagieren auf die zunehmende Nutzung von Mobilgeräten.

INHALT

  1. Was sind  Progressive Web Apps?
  2. PWA Frontend für bessere Kundenerlebnisse
  3. Magento Storefront
  4. Shopware Storefront
  5. FAZIT

Was sind Progressive Web Apps?

Onlineshop-Entwickler hatten vor der Einführung von Progressive Web Apps den doppelten Umsetzungsaufwand, um dem „Mobile First Prinzip“ gerecht zu werden. Neben der Website Entwicklung musste gleichzeitig an einer mobilen Version für Smartphones und Tablets getüftelt werden. Mit der neuen Technologie der PWA ergab sich die Möglichkeit die Merkmale einer responsiven Website mit denen einer nativen App zu verknüpfen. Dies ermöglicht die Fertigstellung eines, auf allen Endgeräten kompatiblen, Shops in nur einem Entwicklungsvorgang.

PWA sind offline fähig, benötigen jedoch keinen Download auf das Endgerät. Dies bedeutet, dass wenn eine Landingpage besucht wird im Hintergrund bereits weitere Inhalte geladen werden, um diese auch bei unterbrochener Internetverbindung aufrufen zu können. Zudem ist es möglich, die verwendete Website als Icon auf den Startbildschirm des Endgeräts abzulegen, jederzeit darauf zuzugreifen oder wieder zu entfernen. 

Progressive Web Apps entwirren die komplexen Verschachtelungen des XML-Codes und geben Entwicklern die Möglichkeit alle Kanäle mit einer Codebasis zu managen. Und noch weitere Vorteile ergeben sich mit dem neuen Vorgehen:

  • Schnelle Performance auf mobilen Geräten
  • Vergleichbarkeit zu nativen Apps, jedoch kein Download nötig
  • Automatische Aktualisierung bei jedem Aufruf
  • Offline Verfügbarkeit von geladenen Funktionen, welche nicht zwingend eine Onlineverbindung benötigen (z.B. der Checkout)
  • Unabhängigkeit von Betriebssystemen

PWA Frontend für bessere Kundenerlebnisse 

Das PWA Frontend macht blitzschnelles Browsen auch ohne Internetverbindung möglich, da nach dem Laden der aufgerufenen Seite die Offline-Ansicht weiterhin besteht. Zudem ermöglicht eine erweitere Form des Caching (Edge Caching) verbesserte Seitenladegeschwindigkeiten. Daten werden dabei nicht über die Netzwerkverbindung geladen, sondern über das Endgerät selbst abgerufen. Ladezeiten werden auf Millisekunden reduziert, selbst unterwegs und auf Reisen bei schlechtem Netz. Das leistungsstarke Caching kann den Warenkorb auch bei schlechter Verbindung halten, bis Netzverbindung wiederhergestellt ist. 

PWA Frontend Funktionsweise

Ein kleines Beispiel: Während der Kunde auf seiner Bahnfahrt ein Produkt anschaut, werden bereits im Hintergrund weitere Inhalte von Produkten geladen, um einen flüssigen Ablauf und ein positives Erlebnis zu schaffen. Sollte die Internetverbindung unterbrochen werden, da der Zug durch einen Tunnel fährt, bleibt der Webshop trotzdem stabil und der Kunde kann sich problemlos weiter durch die Produktwelt bewegen, da diese im Hintergrund bereits geladen wurde. Dies wird durch moderne Softwaretechnologie möglich, die sogenannten Service-Worker. Endkunden profitiert daher unmittelbar von den PWA, da Onlinekäufe immer häufiger auf Smartphones und von unterwegs stattfinden. 

Ein weiterer Vorteil bietet sich für B2B Kunden. Durch den Zugriff auf Gerätesensoren kann der Shop direkt mit dem Lagerregal verknüpft werden. Über das Hardware-Zubehör, bspw. eine Handykamera, wird der Prozess der Nachbestellung vereinfacht, indem anhand eines gescannten Barcodes Produkte direkt zum Warenkorb hinzugefügt werden – Listen schreiben adé! Viele kennen das Barcodesystem bereits von Amazon. Jedoch unterscheidet sich die Progressive Web App insoweit davon, dass sie ganz ohne App auskommt und nur über den Browser läuft. 

Magento Storefront

Magento 2 ist mit Dependency Injection, Testabdeckung und APIs eine der stärksten E-Commerce-Plattformen in Sachen Backend-Entwicklung. Etwas anders sah es allerdings im Frontend Bereich aus. Magento 2 bietet viele Vorteile, allerdings vermissten Entwickler an einigen Stellen eine aktuellere und weniger komplexe Technologie. Mit Progressive Web Apps (PWA) sollte sich ihr Wunsch im Sommer 2018 schlussendlich erfüllen.

Während das vorherige Layout-System von Magento 2 wenig Flexibilität und viel Komplexität, insbesondere bei Anpassungen oder beim Debuggen, viel Zeitaufwand mit sich brachte, hat die Verwendung von PWAs einen entscheidenden Vorteil gebracht: Die Entkoppelung von Frontend und Backend. 

Magento Storefront Entkoppeln

Die sogenannten Headless Shops verwenden zwar das Magento Backend, jedoch nicht mehr das Frontend. Magento selbst gab in einer Pressemitteilung bekannt, in Zusammenarbeit mit Google die nötigen Tools für Online Stores mit „app-like experiences“ bereitzustellen. Somit setzt auch Magento mit seiner Storefront die Priorität auf mobile Commerce.

„We see PWAs as a natural evolution of the mobile web.“

Mark Lavelle, ehemaliger CEO von Magento.

Shopware Storefront

Shopware kündigte an, zukünftig stärker auf PWAs zu setzen und somit dem Trend der Fontend-Anwendungen zu folgen. Die, im Juni 2020 vorgestellte, Progressive Web App für Shopware wurde in Zusammenarbeit mit Vue Storefront entwickelt, um ein innovatives sowie flexibles Frontend zu schaffen, welches das Potenzial von Shopware 6 bestmöglich nutzt. Es ist mit zahlreichen Features der neuen Shopware Generation kompatibel und ermöglicht damit eine einfache Integration. Zudem bietet das Stand-alone-Frontend die Möglichkeit individuelle Designs und Funktionen einzubinden. Somit wird eine barrierefreie Implementierung bestehender, unternehmensspezifischer Corporate Identity (CI) möglich. Bei gewünschtem Redesign der Shopware Storefront können Templates einfacher umgesetzt werden. Dies ermöglicht die Datenabfrage über API (Programmierschnittstelle), welche den Aufwand der Entwickler im Backend reduziert. 

PWA Shopware
Abbildung: Shopware 6

Die Frontend-Entwicklung läuft über das JavaScript-Webframework Vue.js und profitiert damit von neusten Technologien. Sie ist vor allem an Agenturen und Händler mit technischem Vorwissen gerichtet, um komplexe Enterprise-Projekte umsetzen zu können.

Fazit

Experten gehen davon aus, dass PWA auf lange Sicht native Apps und RWD ablösen werden. Begründet liegt dies vor allem in der Präferenz des mobilen Shoppings. Zudem bieten Progressive Web Apps zahlreiche technische Vorteile. Auf Konsumentenseite ist kein Download aus dem App-Store und keine damit verbundene Bereitstellung von Speicherplatz erforderlich. Auf Entwicklerseite sind die Vorteile der PWA-Technologie mehr als deutlich: Es muss lediglich eine Anwendung programmiert werden, welche sowohl als Website wie auch als App fungiert und somit auf allen Endgeräten optimal performt. Mit Progressive Web Apps (PWA) kann der Mobile First Ansatz künftig konsequent Einzug erhalten und steht ganz im Zeichen der mobilen Nutzer. Erstklassige online Einkaufserlebnisse, Engagement- sowie Konversion-Steigerungen stehen fortan im Fokus. 

Beispiele für eine gelungene PWA Umsetzung findest du bei pwa.bar.

PWA - Progressive Web Apps 1

Benötigst du Hilfe bei der Umsetzung von PWAs? Wir helfen dir.

QUELLEN

ShopwareSplendidt3nt3nnetz98integer-netMagentoMagento Github