let's
play
china
Panda ausblenden

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Kein Buzzword-Bingo: Was sind Progressive Web Apps?

Seite 3 / 3

Application Shell

Das bedeutet, dass die App im Kern erstmal eine mobile Ansicht einer URL zeigt und dann auf die Fähigkeiten des aufrufenden Gerätes und Browsers reagiert. Auf diese Weise bleibt sichergestellt, dass eine „Progressive Web App” ganz grundsätzlich auf jedem Gerät und Browser funktioniert, allerdings in unterschiedlichem Umfang, eben progressiv angepasst an die aufrufende Umgebung.

Optisch orientiert sich die „Progressive Web App” dabei an den Designstandards nativer Apps. Im Idealfall erkennt der Nutzer den Unterschied in der Bedienung nicht. Die sogenannte „App Shell”, also das Grundgerüst oder der äußere Rahmen für die dynamischen Inhalte, wird dabei so angelegt, dass sie sich nach dem ersten Aufruf in den Gerätecache legt und fortan ohne Verzögerungen von dort aus aufgerufen werden kann.

Service Workers

Das Herzstück einer „Progressive Web App” sind die Service Workers, die fortgeschrittene Funktionalitäten erst möglich machen. Ein Service Worker ist - verkürzt gesagt - ein JavaScript, das, anders als bislang möglich, im Hintergrund einer Webanwendung arbeiten kann. Das funktioniert sogar dann, wenn die Website gar nicht geöffnet ist.

Einer der offensichtlichsten Anwendungsfälle für einen Service Worker ist das Cachen von Inhalten im Hintergrund. Das kann zum einen den Grund haben, dass stets frische Inhalte ohne Ladepausen verfügbar sein sollen oder den, dass eine Web-App auch dann funktionieren soll, wenn gerade keine Verbindung zum Netz besteht.

Du kannst über einen Service Worker aber, um im Beispiel zu bleiben, nicht nur Inhalte vorcachen lassen, sondern auch nach Fällen unterscheiden, also schlussendlich programmlogische Abläufe starten, die in unterschiedlichen Abhängigkeiten zu unterschiedlichen Ergebnissen führen. Damit wirst du sehr flexibel in den Reaktionsmöglichkeiten deiner App.

Da Service Worker keine Optik haben, ist es sinnvoll, sich einen Fundus an Scripten anzulegen, die diverse Basisfunktionalitäten abdecken. Solche „Rezepte” findest du etwa im „Service Worker Cookbook” von Mozilla oder in der Awesome List „Awesome Service Workers”.

Einer der ersten Anwendungsfälle, die du ganz sicher abdecken willst, ist die Anzeige eines sinnvollen Angebots bei Nichtbestehen einer Internetverbindung anstelle der generischen „You are offline”-Fehlerseite. Je nach Anwendung ist es sogar möglich, den Nutzer gar nicht auf die fehlende Netzverbindung aufmerksam zu machen, solange sie nicht zwingend zur sinnvollen Verwendung erforderlich ist.

Service Worker setzen HTTPS voraus, was die gesamte Anwendung sicherer macht.

Web App Manifest

Um das Nutzererlebnis noch näher an das einer nativen App anzulehnen, bietet es sich an, seine „Progressive Web App” zur Installation anzubieten. Dazu hinterlegst du eine JSON-Datei, die als Web App Manifest bezeichnet wird.

Damit erreichst du, dass der Nutzer in die Lage versetzt wird, deine App auf seinem Gerät zu „installieren”. Tatsächlich wird nicht nur ein Shortcut angelegt, wie man das bislang kannte. Vielmehr führt das Manifest zunächst mal dazu, dass dem Besucher ein Installationsbanner angezeigt wird - so, wie man es auch bisweilen schon kennt, bloß eben mit der Aufforderung, eine native App zu installieren.

Zudem kannst du festlegen, dass die App im Standalone-Modus geöffnet wird, also ohne den ausführenden Browser rund um die App anzuzeigen. Ein Icon kannst du ebenfalls zuweisen. Mit entsprechend konfiguriertem Service Worker legst du bei der Gelegenheit gleich mindestens die App Shell auf dem Gerät ab. Ebenso finden sich die so aufgerufenen Apps in der Übersicht der laufenden Anwendungen des mobilen OS als individuelle Anwendungen, nicht etwa kumuliert in einer Browserinstanz wieder.

Push Notifications

Über die Push-API kannst du den Verwendern deiner App sogar dann Benachrichtigungen aufs Display senden, wenn sie deine App zu diesem Zeitpunkt gar nicht verwenden. So ist es möglich, die Interaktionsrate mit deiner App proaktiv zu steigern. Push Notifications kommen allerdings nur mit Zustimmung der Nutzer aufs Display

Progressive Web Apps: Zusammenstellung unter PWA Rocks
Progressive Web Apps: Zusammenstellung unter PWA Rocks

Der Haken ist die Browserunterstützung

Wie stets im modernen Web ist es auch hinsichtlich dieses Themas so, dass „Progressive Web Apps” nicht vollumfänglich in allen Browsern funktionieren. Auf Apple-Geräten läuft zwar die Web-App, aber durch den fehlenden Support, vor allem für Service Worker, kann man das Erlebnis nicht progressiv nennen.

„Progressive Web Apps” sind derzeit nur unter Android voll funktionsfähig, aber immerhin, soweit es Service Worker betrifft, „Under Consideration” für den Safari. Die Push-API werden wir wohl eher nicht auf Apple-Geräten sehen. Da Apple aber für iOS 10 eigene Neuerungen in diesem Bereich plant, könnte es sein, dass wir auf etwas anderem Wege doch an diese Funktionalität kommen werden.

Ansonsten darfst du dich über Support in Chrome, Firefox und Opera freuen. Microsoft hat sich ebenfalls zu offenen Standards bekannt und könnte gegen Ende des Jahres hier etwas anbieten.

Willst du schauen, was es schon alles so gibt an „Progressive Web Apps”, dann schau mal unter PWA Rocks.

Zusammenfassung für Eilige: „Progressive Web Apps” sind mobil nutzbare Webangebote, die sich progressiv an die Fähigkeiten des sie nutzenden Gerätes und Browsers anpassen. Je leistungsfähiger das Gerät und der Browser, desto leistungsfähiger die App. Zur Erstellung werden ausschließlich offene Webstandards verwendet.

Startseite
  • Seite:
  • 1
  • 2
  • 3

Finde einen Job, den du liebst

Eine Reaktion
Michael Schmid

Unsere Agentur hat hier auch eine progressive Web App als E-Commerce System mit Angular 2 umgesetzt.

http://www.kennzeichenschmiede.de

Die größten Vorteile von Web Apps:
Schnell zu entwickeln
Schnell zu bedienen
Schnell zu ändern

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden