Voraussetzungen für eine Progressive Web App Die eigene Website als PWA anbieten

Progressive Web Apps sind eine praktische Möglichkeit, Inhalte ganz ohne App-Store dauerhaft auf Smartphones anzubieten. Viele gängige Content-Management-Systeme wie Wordpress lassen sich hierfür recht einfach nachrüsten.

Wer ein erfolgreiches Blog, eine News-Seite oder einen Online-Shop betreibt, dürfte hin und wieder davon träumen, seine Inhalte auch direkt per App anbieten zu können. Das stärkt die Kundenbindung, hat aber einen erheblichen Nachteil: Die Entwicklung einer nativen App, die über die App-Stores von Google, Amazon und Apple verteilt wird, ist nicht nur sehr aufwändig, sondern auch mit einer Reihe von technischen und rechtlichen Stolperfallen verbunden.

Obendrein muss eine solche App regelmäßig aktualisiert werden. Deutlich einfacher und günstiger geht es hingegen mit einer sogenannten Progressive Web App. Diese lässt sich direkt und ohne Umwege über den App-Store von der Website aus als App auf dem Smartphone installieren, ist funktional aber in vielfältiger Weise mit einer echten App vergleichbar. Allerdings ist der Aufwand für die Bereitstellung deutlich geringer.

PWA wird von den meisten Browsern unterstützt

Die Idee hinter einer Progressive Web App ist, dass ein Webangebot direkt als App auf dem Home-Screen eines Smartphones oder Tablets ausgeführt werden kann, ganz ohne Umweg über die App-Stores mit ihren Freigabeprozessen. Installiert werden solche Web-Apps stattdessen durch den Browser: Opera, Chrome und Edge besitzen diese Funktion bereits, auch Apples Safari unter iOS und iPadOS beherrscht die PWA-Technik.

PWA bietet sich überall dort an, wo einfach Informationen als App bereitgestellt werden sollen oder als zusätzliches Angebot zu einer ohnehin bestehenden Mobilseite. Anders als normale Browser-Favoriten können PWAs nämlich Daten offline speichern und vor allem die Push-Funktionen eines Smartphones, Tablets oder PCs verwenden.

Welche Websites eignen sich als PWA?

Grundsätzlich kann jede Website um eine PWA-Funktion erweitert werden, da es sich nicht um eine API oder eine herstellerspezifische Technologie handelt; Progressive Web Apps sind eine Ergänzung, die auf den normalen Web-Technologien HTML, CSS und JavaScript basieren und daher sozusagen die Kirsche auf der Sahnetorte eines bestehenden Web-Projekts darstellen. Dadurch ist PWA vergleichsweise unabhängig von Drittanbietern.

Als „Ausgangsmaterial“ wird eine reguläre moderne Website benötigt. Diese sollte responsive Design aufweisen, per HTTPS sicher ausgeliefert werden und natürlich Inhalte besitzen. Um eine solche Website nun als Progressive Web App anzubieten, ist allerdings noch ein sogenannter Service Worker notwendig: Ein JavaScript-Skript, das der Browser im Hintergrund ausführt, um die Kernfunktionen der Web-App wie Caching oder Push zu gewährleisten. Hinzu kommt ein sogenanntes App-Manifest: Dieses legt den „Look“ der App sowie das Icon fest.

Website in eine Progressive Web App verwandeln

Grundsätzlich besteht eine Progressive Web App aus der Website plus den für PWA notwendigen Funktionen Service Worker und App Manifest. Beides kann auf jeder beliebigen Website nachgerüstet werden. Webentwickler können hierfür zunächst die notwendige Datei-Hierarchie anlegen. Diese besteht neben der Index.html der normalen Website aus einem App-Ordner, in dem sich die Icons sowie eine „manifest.json“ und ein Service-Worker „sw.js“ befinden.

Ein gutes Beispiel für eine grundlegende Service-Worker-Datei gibt es zum Beispiel auf Github. Die App-Manifest-Datei muss ebenfalls mit Inhalten gefüllt werden: Hier können einfache Angaben wie der Name der App, die Icon-Dateien in verschiedenen Größen und die sogenannte Start-URL – in diesem Fall die Index.html – definiert werden.

Zu guter Letzt muss der Browser natürlich noch darüber informiert werden, dass die Website als Progressive Web App verfügbar ist. Dazu muss die Manifest-Datei im Head der HTML-Seite eingebunden und der Service-Worker per Skript eingebunden werden. Das war es auch schon: Die Website ist PWA-Ready und kann aus dem Browser heraus als Web-App installiert werden. Der Online-Dienstleister Wiredelta hat ein interessantes How-To verfasst, das sich mit dieser Vorgehensweise befasst.

PWA in Wordpress & Co nachrüsten

Leider hat diese Vorgehensweise zur PWA-Erstellung einen kleinen Haken: Sie verlangt gewisse Fähigkeiten beim Webdesign und ist nicht optimal für dynamisch generierte Websites geeignet. Deshalb gibt es für bestehende Installationen gängiger Content-Management-Systeme – zuvorderst Wordpress, aber auch Joomla, Drupal oder Typo3 – bereits vorgefertigte Lösungen.

Am einfachsten ist die Integration dabei in Wordpress. Hier gibt es eine Vielzahl von Plugins, die die PWA-Erstellung deutlich vereinfachen. Eine umfassende kostenpflichtige Lösung ist zum Beispiel SuperPWA, die das Generieren der PWA zu einem Kinderspiel machen soll.

Mit ein wenig mehr Hintergrundwissen ist aber auch eine einfachere, kostenfreie Variante möglich: PWA für Wordpress enthält die notwendigen Dateien Web App Manifest und Service-Worker. Diese müssen dann nur noch an die eigenen Bedürfnisse angepasst und im Theme eingebunden werden. Übrigens ist diese Funktion auch für Theme-Entwickler nützlich, die ihren Kunden eine PWA-Funktion „out of the box“ mitgeben möchten.

Typo3, Joomla und Drupal können ebenfalls PWA

Nach einem ähnlichen Prinzip funktionieren auch die PWA-Plugins für die ebenfalls sehr beliebten Content-Management-Systeme Drupal, Joomla und Typo3: Auch hier gibt es Projekte, die sich mit der Umsetzung von PWA im jeweiligen CMS befassen und den Einbau der entsprechenden Funktionen deutlich erleichtern. So stellt die PWA-Initiative für Typo3 alle notwendigen Code-Schnipsel zur Verfügung, um eine vorhandene Typo3-Website um PWA-Funktionen zu ergänzen.

Nach einem ähnlichen Gedanken verfährt auch das PWA-Projekt für Drupal. Für Joomla gibt es, ähnlich wie für Wordpress, nicht nur eine Basis-PWA-Funktion per Plug-in, sondern auch kostenpflichtige All-in-One-Lösungen wie etwa miTT PWA.

PWA vs. native App: Warum beides wichtig ist

Insgesamt ist die Umsetzung einer bestehenden Website als Progressive Web App mit erstaunlich geringem Aufwand verbunden. Anschließend liegt es nur noch am Website-Betreiber, diese Web-App auch entsprechend zu bewerben.

Zwar weisen Chrome und Edge auf eventuell vorhandene PWAs hin, allerdings ist die Technik noch nicht in den Köpfen der meisten Nutzer angekommen: Apps kommen für sie immer aus dem App- oder Play-Store, weshalb es umso wichtiger ist, das Vorhandensein einer PWA sowie ihre Verwendung hinreichend zu kommunizieren.

Wer sein Web-Business hauptsächlich per App anbieten möchte, sollte deshalb heutzutage noch zweigleisig fahren und eine eigene native Version für die klassischen App-Stores entwickeln lassen. Website-Betreiber hingegen, die einfach einen zusätzlichen Vertriebskanal suchen, sind mit einer PWA gut aufgehoben – vor allem, wenn sie diese sowohl online, als auch per Newsletter bewerben und erklären.

(ID:47070631)