Wir bauen eine Progressive Web App (PWA) – Teil 1

Progressive Web Apps könnten herkömmlichen Apps das Wasser abgraben. Wie eine Progressive Web App erstellt und quasi als „App“ bereitgestellt werden kann, zeigt diese Artikelreihe.

Dieser erste Teil wird sich nur um den reinen Sinn und Nutzen von PWAs drehen, konkrete Beispiele und Ausführungen gibt es dann in den folgenden Artikeln.

PWAs sind quasi eine Mischung aus nativer App (aus einem App-Store) und einer Webseite. Progressive Web Apps können auf dem Gerät (Smartphone oder Desktop-Rechner) installiert werden und sollten (im Idealfall) auch ohne Internetverbindung funktionieren.

Webseiten als App

Webseiten dienen traditionell eher dazu, den Besuchern Informationen und Produkte anzubieten. Lange Zeit war das auch so, aber ab dem ersten iPhone begann sich die Welt des Internets zu wandeln. Heute ist es normal, mit dem Smartphone oder Tablet unterwegs zu sein und beliebig jede Webseite aufrufen zu können – vor gar nicht allzulanger Zeit war dafür vornehmlich der normale PC zu gebrauchen.
Webseiten waren auf feste Bildschirmauflösungen konzipiert und daher beliebig zu gestalten. Doch mit den Smartphones mussten auch die Webseiten auf eine völlig andere Darstellung und Bedienung angepasst werden. Gefragt sind also Seiten, die sich dynamisch an jede Displaygröße anpassen und dabei bedienbar bleiben (Responsive Webdesign).

Und auch HTML entwickelte sich weiter zu Version 5. Darin integriert sind diverse Schnittstellen (API), die es unter anderem ermöglichen auf die Hardware des Gerätes zuzugreifen (z.B. GPS, Kamera, Sensoren usw.). Damit erlangen normale Webseiten Fähigkeiten, die bis dato nativen Apps vorbehalten waren. Diese Möglichkeiten werden übrigens ständig erweitert.

Web-Apps und das iPhone

Als Apple 2007 das iPhone präsentierte, war der eigentliche Plan Anwendungen darauf als Web-App laufen zu lassen. Erst einige Zeit nach der Veröffentlichung ruderte Apple zurück und veröffentlichte Entwicklertools, mit denen native Apps programmiert werden konnten – die Idee des App Stores war geboren. War wohl auch durchaus lukrativer.
Die Progressive Web Apps sind also keineswegs neu, denn Apple hatte diese Idee bereits.

Erhöhter Aufwand für alle Plattformen

Jede Plattform hat ihren eigenen Store. Microsoft (Windows Mobile existiert leider nicht mehr), Apple und Google bieten darin Apps an, die auf den entsprechenden Geräten installiert werden können. Das Problem: Jede App muss für jede Plattform in einer anderen Sprache programmiert werden. Das erhöht nicht nur den Arbeitsaufwand und die Aktualisierung, sondern schlägt sich natürlich auch in den Entwicklungskosten nieder.

Webseiten auf dem Smartphone installieren

Als Hybridlösung bietet sich da PhoneGap an. Mit diesem Tool können Webseiten als native App erstellt werden. Der eigentlichen Seite wird dann eine „Browserhülle“ übergezogen. Die App läuft im Browser, der aber ist für den Nutzer unsichtbar.

Progressive Web Apps gehen einen ganz ähnlichen Weg. Durch das „Web App Manifest“ wird die Seite installierbar gemacht und kann auf dem Homescreen installiert werden. Das funktioniert sowohl unter Android und iOS, als auch unter Windows und MacOS.

Was können Progressive Web Apps?

Apps, die auf dem Smartphone laufen haben oft vielfältige Funktionen. Sie können auf die Kamera zugreifen, Meldungen auf dem Homescreen platzieren, externe Eingabegeräte wie Gamepads ansprechen und vieles mehr. Wie oben bereits erwähnt, können auf diese Dinge über APIs von HTML5 auch Webseiten bzw. Progressive Web Apps zugreifen.

Webseiten laufen im Browser und die haben nun einmal (ob auf Smartphone oder Desktop) ein Menü – so sehr die Webseite also nach einer App aussieht, der „Browserrahmen“ wird diese Illusion immer zerstören. Progressive Web Apps allerdings ermöglichen es, den Browser vollständig auszublenden und die Apps im Vollbildmodus auszuführen. Dabei kann sogar die Notification-Leiste am oberen Rand ausgeblendet werden, was für Spiele nicht unpraktisch ist.

Wie fange ich mit meiner Progressive Web App an?

In dieser Reihe geht es nicht darum, ein WordPress-Plugin zu installieren nur um die Seite installierbar zu machen. Das ist zwar doll, aber nur begrenzt zielführend.

Zwingend erforderlich ist Grundlagenwissen in HTML, CSS und JavaScript. Im Beispiel wird das CSS-Framework w3.css verwendet, um ohne Aufwand schnell ein Layout bauen zu können.

Webserver

Zum Entwickeln wird ein Webserver benötigt. Das kann der eigene Webspace sein, aber auch ein lokal installierter Webserver wie XAMPP. Ist dieser gestartet, läuft ein vollwertiger Webserver mit PHP & MySQL auf dem eigenen Rechner, der über die Adresse http://localhost/ erreichbar ist.
PWAs benötigen zwingend eine verschlüsselte SSL-Verbindung um zu funktionieren – bei der Entwicklung auf dem localhost ist das allerdings nicht erforderlich.

Browser und Fallstricke

Auch wenn Google an dieser Stelle nicht oft gut wegkommt, ist Chrome leider der einzige Browser mit dem sich Fehler in PWAs recht problemlos aufspüren lassen. Das geschieht in den Entwicklertools, die mit F12 aufrufbar sind. Firefox kann das auch, dort ist es aber deutlich unkomfortabler.
Da Microsoft Edge mittlerweile auf der Chrome-Engine läuft (Google wurde komplett entfernt) eignet auch dieser sich mittlerweile ebenfalls sehr gut. Empfohlen sei die „Developer-Version“, die hier bezogen werden kann: Edge Downloads.

Firefox ist hier nicht nur unhandlicher, sondern in der Desktop-Variante auch ein besonderer Verweigerer darin, den Installationsbutton für die Progressive Web App zu zeigen. Glücklicherweise ist die mobile Version von Firefox nicht so stur und funktioniert in dieser Hinsicht zuverlässig.

Visual Studio Code

Um den Programmcode in den Computer zu hacken, gibt es haufenweise kostenlose und auch kostenpflichtige Software. Mit Visual Studio Code gibt es seit einigen Jahren einen guten Editor von Microsoft, der auf allen Plattformen läuft und kostenlos zum Download bereit steht.

PWA & Apple

Unter iOS und Co. gibt es zwar verschiedene Browser, Apple erlaubt allerdings nur die Verwendung der Safari-Engine auf dem eigenen Betriebssystem. Also auch wenn Firefox dran steht, ist Apple drin. Willkommen im goldenen Käfig, der Schlüssel wurde soeben im Klo runtergespült.
Kurz: Diese Artikelreihe geht nicht auf die Erstellung einer PWA unter iOS oder MacOS ein, da einfach kein Zugriff auf Safari besteht. Safari unterstützt bislang auch keine Benachrichtigungen über die Push-API.

So geht’s weiter…

Im nächsten Teil richten wir sowohl alle nötigen Arbeitsmittel ein und erstellen den ersten Teil der Progressive Web App: das Web App Manifest.