Ideen für Progressive Web Apps

Seit einigen Wochen beschäftige ich mich mit Progressive Web Apps. In Google Chrome und Mozilla Firefox kann man damit Web-Seiten in Apps verwandeln.

Die technischen Randbedingungen sind sehr übersichtlich:

  • Die Seite muss per https ausgeliefert werden.
  • Die Seite muss über ein manifest.json verfügen.
  • Und es muss ein Service Worker existieren, der u.a. festlegt, welche Dateien offline verfügbar gemacht werden.

Dann kann man diese Seite z.B. auf einem Smartphone als Lesezeichen direkt auf seinem Startbildschirm hinterlegen. Dort fungiert es einerseits als Lesezeichen zu dieser Seite – zusammen mit dem Serviceworker kann es aber auch unabhängig von einer Internetverbindung noch Inhalte anzeigen.

Darüber hinaus kann sich eine PWA auch persistent Nutzerdaten merken. So kann ein Nutzer in der PWA z.B. dauerhaft eingeloggt sein – wie in einer regulären App auf seinem Smartphone.

Dazu kommt die Fähigkeit des Service workers, auch bei geschlossenem Browser im Hintergrund Dinge auszuführen. Besonders interessant ist dabei die Möglichkeit, dem Nutzer auf seinem Telefon (nach Freigabe durch den Nutzer) Push-Nachrichten zuzustellen, die wie ganz normale Nachrichten z.B. auf dem Sperrbildschirm des Telefons dargestellt werden.

Damit haben normale Webseiten auf einmal Mittel an der Hand, mit der sie eine Light-Version einer richtigen App produzieren können.

Warum Progressive Web Apps?

Ein Beispiel:

Jedes mal, wenn ich ins Kino gehe, werde ich gebeten, mir ihre tolle App zu installieren. Eigentlich habe ich aber gar keine Lust dazu, denn der Installationsprozess ist umständlich, und außerdem besuche ich das Kino nur dann und wann.

Aber kurz vor dem Kinobesuch werde ich auf jeden Fall die Internetseite aufsuchen, um mich über die Filme und Termine zu informieren und ggf. Tickets zu kaufen.

Wenn mich nun die Internetseite fragen würde, ob ich sie nicht als Lesezeichen abspeichern möchte, wäre ich viel eher geneigt, das zu tun. Verbunden mit dem Versprechen, auch auf dem Weg zum Kino mir die Informationen über meinen Film noch anzeigen zu können, selbst wenn ich in der U-Bahn keine Internetverbindung mehr habe, halte ich das für eine überwindbare Hürde.

Ergo: Die Progressive Web App eignet sich sehr gut für Angebote, die man nur sporadisch nutzt, und deren Komplexität überschaubar ist – dort dann aber auch deutlich eher als eine echte App.

Ideen

Da es schon sehr viele mobile Internetseiten mit entsprechenden Diensten gibt, sind folgende Ideen man mit einer Progressive Web App erstaunlich einfach umsetzen:

  • Aus dem Webmailer kann ganz einfach ein Mail-Programm werden. Dabei kann die PWA sich dauerhaft die Anmeldedaten merken, es entfällt die für machen Leute zu komplizierte Übernahme von IMAP- und SMTP-Daten, und über die Push-Funktionalität des Service-Workers kann man über neue E-Mail informiert werden. Das selbe gilt für Messenger.
  • Die Fahrplansuche des ÖPNV könnte gerade für Leute mit wenig mobilem Internet die zuletzt abgerufenen Fahrpläne offline verfügbar machen. Darüber hinaus könnte sie elektronische Tickets speichern und auch offline anzeigen.
  • Die oben beschrieben Kino-Seite kann offline Informationen und Tickets anzeigen. Und mittels Push-Nachrichten kann es auch dann und wann über neue Filme informieren.
  • Auf Konferenzen könnte z.B. ein kleiner Kalender über Anstehende Workshops und Vorträge offline auf dem Gerät gespeichert werden. Dazu kann man einzelne Vorträge markieren und sich mittels Push-Nachrichten erinnern lassen.

Darüber hinaus gibt es bereits jetzt schon interessante Beispiele, wie z.B. Coriolis.io, den Konfigurator für „Elite Dangerous“.

Einschränkungen

Einziges Problem bei Progressive Web Apps ist die Plattformunterstützung. So ist aktuell der Einsatz auf Smartphones auf Android-Telefone mit Mozilla Firefox oder Google Chrome beschränkt. Der Microsoft Edge Browser wird demnächst nachziehen. Einzig der Apple Safari und alle Browser auf Apples iOS-Geräten werden in absehbarer Zeit nicht bei PWAs mitspielen.

Dementsprechend muss man PWAs als nette Dreingabe sehen, die im Gedanken des Progressive Enhancements bei entsprechenden Browsern den Nutzer unterstützen bzw. helfen können.