Was es zu berichten gibt

Erzählen Sie's ruhig weiter!

Progressive Web Apps (PWA)

Der Begriff "Progressive Web Apps" bzw. "PWA" ist in aller Munde und wird immer öfter angefragt. Doch was verbirgt sich hinter dem Begriff. Was können Progressive Web Apps leisten und was nicht? Finden Sie hier die Auflösung.

Progressive Web Apps (PWAs) sind Webseiten, die Merkmale besitzen, die bisher nur nativen Apps vorbehalten waren. Allerdings bewegen sie sich innerhalb der für Webseiten auf der jeweiligen Plattform gesetzten Grenzen. Durch das Verwenden eines sogenannten ServiceWorkers kann die Webseite Funktionen im Hintergrund ausführen, ohne dass die Webseite im Browser geöffnet sein muss, wodurch Dinge wie Offline-Verfügbarkeit oder Push Nachrichten ermöglicht werden.

PWA-Funktionalität bzw. ServiceWorker (nachfolgend zusammengefasst unter dem Begriff "PWA") können grundsätzlich bei jeder Webseite eingesetzt werden, unabhängig davon, ob die Webseite lediglich Funktionen ähnlich einer App anbietet (einfaches Beispiel Taschenrechner), oder ob es sich um einen kompletten Webauftritt eines Unternehmens handelt. Sobald PWA-Funktionalität eingebaut ist, stehen diese Funktionen bei jedem Aufruf der Webseite zur Verfügung, z.B. können Push-Nachrichten empfangen werden oder es stehen Inhalte auch zur Verfügung, wenn man Offline ist. Das funktioniert unabhängig davon, ob man die Webseite "installiert" hat (am Homescreen abgelegt hat), oder ob man die Webseite normal über einen Browser öffnet.

Im Gegensatz zu nativen Apps auf Smartphones haben installierte PWAs keinen expliziten Zugriff auf Funktionen, Daten oder Hardware des Geräts, welche über die Möglichkeiten von Webseiten hinausgehen. Anders gesagt: alles, was mit einer Webseite im Browser möglich ist, ist auch mit einer installierten PWA möglich, mehr aber auch nicht.

 

Die Vor- und Nachteile von PWAs

PWAs bieten folgende Vorteile gegenüber "normalen" Webseiten:

  • "Zum Homescreen hinzufügen"-Funktion
  • Offline Verfügbarkeit (aber nur in begrenztem Umfang, der verfügbare Speicherplatz ist vom Gerät, Browser und Betriebssystem abhängig)
  • Geschwindigkeit (nicht nur) mobiler Seiten; Tests von Google legen nahe, dass es Vorteile in Bezug auf die Geschwindigkeit gibt (vorausgesetzt, die Seite ist bereits im Cache)
  • Möglichkeit für Push Nachrichten (nicht für Safari bzw. iOS - Browser-Support)

Einschränkungen von PWAs im Vergleich zu nativen Apps:

Generell

  • Nur Zugriff auf Browserfunktionen, keine darüber hinausgehende Funktionen, wie z.B. Hardwarezugriff wie NFC
  • Keine Ausführung im Hintergrund, nur aktiv, wenn auch der Browser bzw. je nach Funktion die Seite aktiv ist
  • "Zum Homescreen hinzufügen"-Funktion:
    • Desktop: Ist in Chrome, Firefox und Edge möglich, allerdings nicht wirklich prakitkabel
    • Chrome unter Android: wenn eine Webseite bestimmte Voraussetzungen erfüllt, zeigt der verwendete Browser automatisch ein Overlay, das auf die Möglichkeit hinweist und durch tippen auf das Feld die Webseite als App installiert.
    • Firefox unter Android: wenn eine Webseite bestimmte Voraussetzungen erfüllt, erscheint in der Adressleiste ein entsprechendes Icon, über das die Webseite als App installiert werden kann.
    • iOS: seit 11.1 im Rahmen der PWA-Funktionalität möglich, es erfolgt aber kein Hinweis und es ist nicht möglich, die Funktion manuell auszuführen. Es ist ein Call 2 Action erforderlich, damit der User auf die Funktionalität hingewiesen wird, die notwendigen Schritte muss der User aber manuell durchführen.
  • Push-Nachrichten: Die Möglichkeiten, Benutzer gezielt zu selektieren, sind sehr eingeschränkt und basiert i.d.R. auf alten Informationen, die zum Zeitpunkt der Zustellung u.U. nicht mehr korrekt sind.

iOS im Speziellen:

  • Der Speicherplatz für gespeicherte Offline-Inhalte ist auf 50 MB limitiert, das entspricht ca. 20-30 Seiten von textlastigen Seiten, bzw. 10 Seiten von bildlastigen Seiten.
  • PWAs sind nur via Safari Browser nutzbar (wenn also z.B. Chrome oder Firefox auf iOS Geräten benutzt wird, kann die PWA über diese Browser nicht installiert werden)
  • aktuell (noch) keine Push Nachrichten möglich

 

Splash Screens

Wird eine Webseite mit PWA-Funktionalität zum Homescreen hinzugefügt, so wird dort ein Icon abgelegt. Durch Tippen auf dieses Icon wird die Webseite im Browser geladen, wobei dieser nicht als solcher erkennbar ist, weil er keinerlei Navigationselemente enthält, also weder die Adressleiste noch Vor- oder Zurück-Schaltflächen. Beim Starten der App wird ein Splash Screen angezeigt, der die gefühlte Wartezeit während des Startens verkürzen soll. 

Unter Android wird dieser Splash-Screen automatisch generiert und besteht aus einer festgelegten Hintergrundfarbe, dem App-Icon und dem App-Namen. Unter iOS muss der Splash Screen manuell angegeben werden. Es handelt sich hierbei um ein Bild welches für alle Geräte in den richtigen Abmessungen für Hoch- und Querformat generiert werden muss. Konkret heißt das, das mit Stand Februar 2019 insgesamt 18 Bilder (9 verschiedene Auflösungen, jeweils Hoch- und Querformat) generiert werden müssen, um alle Apple-Geräte, die PWAs unterstüzen, abzudecken. Die Gestaltung des Bildes ist bis auf die Abmessungen frei. Wird für ein Gerät kein passendes Bild bereitgestellt, bleibt der Splash Screen Weiß.

 

TL;DR

Progressive Web Apps bieten einige Funktionen, die Webseiten funktionell erweitern können. Diese Funktionen sind nicht unmittelbar sichtbar, können aber dennoch einen Mehrwert bieten. Das Web-Team von BlueChip kann für Sie die Konzipierung und Einrichtung der PWA-Funktionen übernehmen.