Storefront, Webfront, PWA und Headless
In diesem Post geht es um die korrekte Unterscheidung zwischen den Begriffen Storefront, Webfront und PWA. Es ist wichtig diese zu kennen und entsprechend zu kommunizieren.
“Der Kunde hätte gern eine PWA”
“Die PWA kostet Betrag X”
“Wir machen das als PWA”
Oft wird der Begriff “PWA” als synonym für eine Web- oder Storefront anhand der Guidelines für progressive Web Apps genutzt. Während Entwickler nicht pauschal über “PWA” sprechen, ist es für Marketing oder andere Bereiche ein großartiges Buzzword, wenn es darum geht die “neuen” Technologien zu beschreiben. Nur zu oft, wissen aber die Beteiligten gar nicht, was sich dahinter verbirgt oder ob dass, was sie gerade vorgeschlagen haben, auch das Richtige meint.
Versteht mich nicht falsch, ich habe natürlich nichts dagegen wenn mit Hilfe eines zusammenfassenden Wortes etwas beschrieben wird. Es sollten jedoch alle wissen, was gemeint ist. Gerade beim Thema PWA gibt es enorme Leistungs- und Kostenunterschiede, weswegen eine klare Kommunikation notwendig ist.
Storefront und Webfront
Diese Begriffe gab es schon lange bevor Headless en vogue war. Sie beschreiben die Fassade der Website oder des Webshops. Sozusagen verbirgt sich hinter diesen Begriffen, zumindest zum Teil, das Theme. Etwas salopp formuliert: Alles was ein Nutzer im Browser sieht. Auf Deutsch würde es wohl mit dem Begriff Benutzeroberfläche übersetzt werden können. Oftmals ist auch vom Frontend die Rede.
Heutzutage, wo mehr und mehr Leute sogenannte Headless-Lösungen nutzen, wird die Bedeutung der Web- oder Storefront noch deutlicher. Ohne sie würde der Benutzer nur Rohdaten sehen, welche über ein API angezeigt werden. Allerdings wurde im selben Zuge die Bedeutung der Web- und Storefronts wesentlich umfangreicher.
Meist sprechen wir bei Store- oder Webfronts von React, Vue, oder Angular Anwendungen. Diese ziehen ihre Daten auch nicht direkt aus der Headless-Anwendung, sondern nur noch aus einem Middlelayer, welcher im Grunde ebenfalls zur Store- oder Webfront gehört. Weiterhin, da nur Rohdaten an den Middlelayer geliefert werden, muss die Store- oder Webfront auch in der Lage sein diese zu interpretieren. Die Frontend-Applikation muss also wissen, wie die Daten auszugeben sind. So sind in dem ein oder anderen Fall nicht nur Template und Gestaltung nötig, sondern auch Logik.
Ein herausragender Aspekt des Middlelayers ist, dass die Headless-Anwendung, die hinter einer Web- oder Storefront betrieben wird, bedingt austauschbar ist. Wichtig ist sozusagen nur, dass der Middlelayer die Daten in der Form bekommt, in der er sie erwartet. Woher diese Daten kommen ist nicht relevant. Dies ermöglicht es unter anderem mehrere Headless-Anwendungen unter einer Store- oder Webfront arbeiten zu lassen. Der Middlelayer zieht sich dabei die Daten von beiden Systemen und gibt sie an das Frontend weiter.
Diese Web- und Storefronts können durch die Abkopplung zum Backend-System also aufwendiger werden, als es den Anschein hat. Im gleichen Zuge kann man aber auch sagen, dass die Komplexität in manchen Bereichen, z. B. im Bereich der Implementierung des Layouts, sinkt und dadurch der Aufwand reduziert werden kann. Weiterhin unterscheidet sich der Aufwand darin, ob nur eine statische Website, mit minimalen JavaScript-Funktionen, benötigt wird oder eine komplette JavaScript-Applikation.
Ein herausragendes Beispiel einer Storefront ist die vuestorefront, ein Community und Open-Source-Projekt, welches durch Divante ins Leben gerufen wurde.
PWA
Oder auch progressive Web App genannt. Der Begriff PWA wurde durch Alex Russell und Frances Berriman geprägt. Hinter dem Begriff verbergen sich allerdings ganz verschiedene Aspekte. “Die PWA” gibt es nicht. Es handelt sich dabei weder um ein spezielles Framework noch eine bestimmte Technologie. Korrekt müsste man somit über die PWA Guideline sprechen. Diese enthalten Anhaltspunkte, durch die bestimmt werden kann, ob es sich bei einer Website/Webapplikation um eine PWA handelt oder nicht. Auch der Begriff App ist eigentlich etwas verwirrend, denn jede Website und jeder Webshop kann eine PWA sein.
Progressive Web Apps are just websites that took all the right vitamins.
— Alex Russell
Mittlerweile hat sich unter dem Begriff PWA eine JavaScript-Applikation, welche die PWA Guidelines einhält, etabliert. Meist wird hier auch von Frameworks wie react oder vue gesprochen. Kurz gesagt, eine Website/Webapplikation, welche weitestgehend komplett über JavaScript ausgegeben und ausgeführt wird. Diese wird meist in einer appähnlichen Nutzeroberfläche dargestellt. JavaScript-Applikation hört sich jetzt schon ziemlich umfassend und vage an, allerdings sind Teile der Guideline für PWA schon mit ganz einfachen technologischen Mitteln umsetzbar. Es benötigt nicht mal eine JavaScript-Applikation, auch eine statische Website, kann eine PWA sein.
PWAs are not created with a single technology. They represent a new philosophy for building web apps, involving some specific patterns, APIs, and other features.
— MDN
Mit dem Web-App-Manifest fängt es an. Es handelt sich hierbei um eine Konfigurationsdatei, welche Parameter enthält um die Website als Anwendung zu deklarieren. Das Web-App-Manifest ermöglicht es zudem, die Website oder jetzt Anwendung, wie eine App, auf dem Homescreen eines Smartphones abzulegen. Schon kann die Website wie eine App gestartet werden. Selbst die URL-Leiste des Browsers wird nicht mehr angezeigt, wenn die Website über das Icon auf dem Homescreen gestartet wird.
Auf den folgenden Seiten könnt ihr mehr über das Web-App-Manifest erfahren:
- https://w3c.github.io/manifest/
- https://developers.google.com/web/fundamentals/web-app-manifest/
- https://developer.mozilla.org/de/docs/Web/Manifest
Google beschreibt es auf der Website über PWA wie folgt: Progressive-Web-Apps sind zuverlässig, schnell und machen Spaß, also genau wie native Apps. Damit ist gemeint, dass PWA direkt und schnell Laden, egal in welchem Netzwerk, Offline-Meldungen vermieden werden, Animationen und Interaktionen flüssig sind und durch den App-Like Charakter eine herausragende Nutzererfahrung bieten.
Dahinter steckt natürlich aber viel mehr. Im Einzelnen beschreibt die Guideline für PWA die folgenden Themen (hier stark verkürzt):
- Installierbar
Hier ist maßgeblich das Manifest gemeint, über das ich weiter oben schon geschrieben habe. - Progressive
Eine PWA sollte auch geräteunabhänig sein, sprich sowohl auf alten als auch neuen Devices funktionieren. Weiterhin sollte eine PWA fortlaufend nutzbar bleiben, auch wenn kurzfristig kein Netzzugriff besteht. - Responsive
Wie bei jeder guten Website, muss auch die PWA unabhängig von der Größe des Screens sein. - Netzwerk unabhängig
Bedeutet, dass eine PWA keine Offline-Meldungen anzeigen sollte. Mittels JavaScript (Service Worker) kann mit der PWA offline interagiert werden und Inhalte können offline gelesen werden. - Sicher
Wie bei jeder Website ist auch bei der PWA eine sichere Verbindung über HTTPS Pflicht. - Verlinkbar
Es soll die Möglichkeit bestehen, Inhalte aus der PWA oder die gesamte PWA einfach per Link weiterzugeben, wie bei einer Website. - Engaging
Eine PWA kann z.B. auch Push-Notifications senden und mit dem Browser interagieren. So kann, wie bei einer nativen App, z. B. auf Daten zu Lichtverhältnissen, in denen sich der Nutzer befindet oder auf den Ladestand des Devices zugegriffen werden.
Auf der MDN Website über PWA lässt sich das prima nachlesen. Zudem gibt es von Google eine Checkliste zum Thema PWA.
Wer sich nicht nur auf Checklisten und Co verlassen möchte, greift am besten gleich zu Google Lighthouse. Mit einem Lighthouse-Audit lassen sich nicht nur PWA Themen prüfen sondern auch Performance, SEO und weiteres. Eben alles was dazugehört, um eine moderne Website aufzubauen. Leider ist ein Lighthouse Audit nur in Googles Chrome Browser oder über eine Konsole möglich.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
Es empfiehlt sich, das Web-App-Manifest auf jeden Fall zu hinterlegen. Der Aufwand dafür ist gering und der Mehrwert hoch. Es ist auch relativ einfach statische Seiten offline zur Verfügung zu stellen. Über HTTPS müssen wir im Grunde gar nicht mehr sprechen, denn das ist ohnehin Pflicht und hat ebenfalls keine hohe Komplexität. Zudem erfüllt eine Website meistens schon einige PWA Features von allein. Der Aufwand, um hier etwas zu bewirken fällt also relativ gering aus. Wenn es natürlich zu Notifications oder erweiterten Offline-Funktionen kommt, schnellt der Aufwand in die Höhe.
Headless
Headless beschreibt eine Software, die ohne Web- oder Storefront auskommt. Die Software beinhaltet meist eine Admininstrationsoberfläche, stellt aber die Daten für Endanwender nur über eine API da. Im Grunde kann jede Software, die eine dafür nutzbare API bietet, Headless betrieben werden.
Wer eine technisch genauere Beschreibung möchte, dem empfehle ich diesen Link über Headless-CMS:
Auch Contentful, ein Headless-CMS, hat sehr aussagekräftige Informationen zum Thema Headless-CMS veröffentlicht:
Und zu guter Letzt ein Artikel auf mediawave, warum Headless Commerce die Zukunft ist:
Sollte ich in diese Technologien investieren?
Kurz gesagt: Ja, denn PWA bringt enorm viele Vorteile. Zudem arbeiten mittlerweile viele Anbieter daran PWA in ihre App-Stores aufzunehmen, u.a. Microsoft, die es möglich gemacht haben PWA auch als Desktop-Applikationen zu installieren.
Einen sehr umfassenden Artikel hat Addy Osmani über die Pinterest-PWA geschrieben: A Pinterest Progressive Web App Performance Case Study.
Time spent is up by 40% compared to the old mobile web experience, user-generated ad revenue is up 44% and core engagements are up 60%
— Addy Osmani about the pinterest PWA
PWA symbolisiert alles was zu einer modernen Web-Applikation gehören sollte und das nicht nur aus technischer Sicht. Stellen Sie sich vor in einem Onlineshop auch bei Netzabrissen weiter einzukaufen. Sobald das Netz wieder da ist, wird ihre Aktivität wieder synchronisiert. Und das ist nur ein kleines Beispiel dafür, wie die Nutzererfahrung durch die Einhaltung der PWA Guidelines verbessert werden kann.
Wer ein Freund von Zahlen ist, wird auf der Seite PWA-Stats fündig. Dort werden Statistiken über aktuelle PWA dargestellt, welche direkt mit den dazugehörigen Case-Studies verlinkt sind.
So zum Beispiel Trivago:
Trivago saw an increase of 150%for people who add its PWA to the home screen. Increased engagement led to a 97% increase in clickouts to hotel offers. Users who go offline while browsing can continue to access the site and 67% continue to browse the site when they come back online.
Ein aktuell großer Nachteil der PWA ist, dass sie auf den Browser angewiesen ist. Vereinfacht gesagt: Die Features des Browsers bestimmen darüber wie gut die PWA ist bzw. was sie alles kann. Weiterhin wird nicht wie bei nativen Apps, einmal nach allen Berechtigungen gefragt, sondern für jedes Feature einzeln, so z. B. die Standortabfrage und Push-Notifications. Den Zugriff auf diese Features muss der Nutzer dann in einem Pop-Up bestätigen, bevor es in der PWA genutzt werden kann.
Zusammenfassung
Wer eine PWA haben möchte, eine vorhandene Website als PWA umbauen oder gar eine Storefront oder Webfront betreiben will, sollte sich also genau darüber im Klaren sein, um welche Features es dabei geht. Denn hier kann es zu hohen Aufwands- und Preisunterschieden kommen. Zudem ist nicht immer alles, für jeden, gleich notwendig und sinnvoll.
Fakt ist allerdings: Die Guideline für PWA gehört einfach heutzutage zu einer modernen und stabilen Website/Web-Applikation dazu und sollte zumindest zu großen Teilen eingehalten werden. Weitere Informationen zur PWA-Guideline zu erfahren und welches PWA-Framework für Ihr Unternehmen das Richtige ist erfahren Sie
Über Sitewards
Sitewards ist ein führendes Dienstleistungsunternehmen für die Konzeption und Umsetzung innovativer E-Commerce-Plattformen und marktbezogener Digitalisierungsaktivitäten. Das Portfolio umfasst die Bereiche Strategieberatung, User Experience Design sowie Softwareentwicklung und -betrieb.
1997 gegründet verfügt Sitewards über umfangreiche Erfahrungen aus über 200 Kundenprojekten. An den Standorten Frankfurt am Main, Leipzig und Karlsruhe verfolgen erfahrene Teams aus Beratern, UX Designern und Entwicklern täglich das Ziel, den digitalen Wandel unserer Kunden zu beschleunigen und langfristige Partnerschaften aufzubauen.
Sitewards ist offizieller Vue Storefront Partner
Weitere Details zu Sitewards und Referenzprojekte finden Sie auf www.sitewards.com.
