Verschiedene Begrifflichkeiten

Viele Features

von Tobias Hartmann

 

“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 das, was sie gerade vorgeschlagen haben, auch das Richtige meint.

Progressive Web Apps are just websites that took all the right vitamins. Alex Russel

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.

In Zeiten, in denen 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 u.a. 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.

Storefront Story

Progressive Web Apps (PWA)

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.

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 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

Features von PWA

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.

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.
  • Netzwerkunabhä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.

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.

 

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.

Storefront Story

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 dar. Im Grunde kann jede Software, die eine dafür nutzbare API bietet, Headless betrieben werden.
Wer eine technisch genauere Beschreibung möchte, dem sei dieser Link empfohlen.

Auch Contentful, ein Headless-CMS, hat sehr aussagekräftige Informationen zum Thema Headless-CMS veröffentlicht. Infos gibt es hier und hier.

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.

 

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.

 

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.

Storefront Story

Mehr
Tipps