Dank Smartphones sind wir heute gewohnt, die Welt durch Apps zu erleben, also kleine Programme, welche für einen bestimmten Zweck programmiert wurden. Die Möglichkeit der technischen Umsetzung verändert sich aber genau so rasant wie die Erwartungen und Gewohnheiten der Benutzer. An dieser Stelle kommen PWAs – Progressive Web Apps – ins Spiel, welche die Grenzen zwischen installierten Apps aus dem App Store und Webseiten verschwimmen lassen.
Eine PWA – oder ausgeschrieben: Progressive Web App – ist die Umsetzung eines App-ähnlichen Erlebnisses im Browser. Diese verhalten und fühlen sich wie eine heruntergeladene App an, sind aber eigentlich herkömmliche Internetseiten.
Die Idee, den Browser als Plattform für Applikationen zu benutzen, ist im Grunde so alt wie das Internet selbst. Webanwendungen nutzen dabei den Browser als Plattform zur Eingabe und Ausgabe von Daten. Die Verarbeitung findet dann auf dem Server statt.
Für was steht «Progressive»?
Der Ausdruck «progressive» im Namen steht dafür, dass sie von jedem Benutzer verwendet werden können, unabhängig welches Betriebssystem oder welcher Browser gerade benutzt wird.
Auch wenn der Begriff «App» etwas anderes suggerieren mag – nämlich ein Programm zum Herunterladen und Installieren – kann man sich eine PWA am besten als eine Art Werkzeugkasten mit modernsten Webtechnologien vorstellen. Er erlaubt es Entwicklern Webseiten zu bauen, die schnell geladen werden und sich ähnlich wie eine App bedienen lassen.
Was macht eine PWA aus?
Hier die wichtigsten Eigenschaften zusammengefasst:
- Läuft im Browser, Icon kann auf Startbildschirm abgelegt werden
- Anpassungsfähig und Plattform-unabhängig
- Läuft auch ohne Online-Verbindung
- Anwender benutzt immer aktuellste Version
- Gesichert über HTTPS-Verbindung
- SEO-tauglich
- Sharing als Link
Technischer Hintergrund
HTTPS – Sicherheit ist wichtig!
Für die Datenübertragung zwischen dem Server und dem Browser, in dem die PWA läuft, kommt zwingend das HTTPS-Protokoll zum Einsatz. Durch Verschlüsselung und gegenseitige Authentifizierung werden die Daten vor unerlaubtem Zugriff geschützt.
Web App Manifest – die Spielregeln werden festgelegt
Das Web App Manifest, oder zu Deutsch, das Anwendungsmanifest, ist eine Datei auf dem Webserver, die ein paar grundlegende Spielregeln für die jeweilige Progressive Web App festlegt. Hier wird zum Beispiel das Icon definiert, welches verwendet wird, wenn man als Anwender die PWA zum Homescreen hinzufügen will. Ebenfalls wird hier vom Entwickler festgelegt, ob die klassischen Browser-Elemente, wie die Adresszeile, ausgeblendet werden sollen. Läuft die PWA im Vollbild-Modus, erfährt der Anwender das gleiche visuelle Benutzererlebnis, wie bei der Benutzung einer installierten App.
Service Worker – Brückenelemente zu nativen Features
Ein Service Worker ist sozusagen ein Dienstleister im Hintergrund einer Progressive Web App. Zu einem großen Teil ermöglicht dieser die “app-ähnliche” Benutzererfahrung, denn er fungiert unter anderem als Zwischenspeicher (Cache) für die Kommunikation mit dem Webserver. Damit wird sichergestellt, dass die PWA schnell geladen werden kann, wenn sie aufgerufen wird.
Ein Service Worker ist aber auch dafür verantwortlich, die Progressive Web App weiterhin benutzbar zu machen, wenn man keine Netzwerkverbindung oder nur sehr schlechten Empfang hat.
Auch das Versenden von Benachrichtigungen (Pushes) wird über diesen abgewickelt. Service Worker bestehen aus einer JavaScript-Datei und laufen im Browser, aber sind dabei getrennt vom Rest der Webseite, beziehungsweise der PWA.
Browser Kompatibilität für PWA
Zuvor habe ich die Eigenschaft von PWAs, plattformunabhängig im Browser zu laufen, als eines der wichtigsten Merkmale hervorgehoben. Das setzt allerdings voraus, dass jeder Browser die für PWA eingesetzten Technologien unterstützt. In der Praxis gibt es dabei natürlich Unterschiede, die nach aktuellem Stand ungefähr so aussehen:
Auf dem Desktop-Rechner – also Windows oder Mac – gibt es große Unterschiede zwischen den einzelnen Browsern. Grob sieht die Verteilung folgendermaßen aus:
Eine genaue Analyse aller plattformabhängigen Webfeatures findet man auf https://whatwebcando.today/
Gelungene PWA Beispiele
Wenn man nach Beispielen für PWA googelt, stößt man schnell auf große Namen: Social Networks wie Facebook oder Instagram haben ihre mobile Webseite als PWA umgesetzt, ebenso wie Twitter. Viele bekannte Unternehmen aus den unterschiedlichsten Bereichen setzen unterdessen auf PWAs, um ihre native mobile App komplett zu ersetzen. Dazu gehören z.B. Alibaba und die Financial Times.
Am besten, du öffnest die Links im Text auf deinem Smartphone. Damit stellst du sicher, dass du wirklich auf der für Mobilgeräte entwickelten PWA-Seite des jeweiligen Anbieters landest. Und es gibt dir gleich etwas Anwender-Erfahrung aus erster Hand.
Beispiele:
Fazit – jeder hat seine Stärken
Aus dem Phänomen der «App-Müdigkeit» sollte man nicht ableiten, dass den Progressive Web Apps die Zukunft alleine gehört. Es kommt immer auf das Anwendungsszenario an, ob eine PWA oder eine native App die beste Lösung ist, denn PWAs sind Webseiten mit «app-ähnlicher» Funktionalität. Damit unterscheiden sie sich rein technisch gesehen sehr stark von nativen Apps und das macht sie – je nach Anwendungsszenario – zur Alternative oder zur Ergänzung. Genauso gut kann es sein, dass für ein Projekt, eine native App die beste Entscheidung ist, da Funktionen benötigt werden, die mit einer PWA nicht umzusetzen sind. Es gibt also kein klares Ja oder Nein. Der individuelle Anwendungsfall entscheidet.
Bis dahin! Ich hoffe, ich konnte einen kleinen Einblick geben und wünsche weiterhin viel Spaß im Cyberweb.
Rico Scherf
