Es führt kein Weg daran vorbei, die Nutzung des Webs verlagert sich immer mehr auf mobile Geräte. Um mobile Nutzer optimal zu erreichen, genügt die Optimierung von Webseiten auf mobile Geräte schon lange nicht mehr. Das Produkt muss zusätzlich als native App auf dem Startbildschirm des Nutzers präsent sein und Zusatzfunktionen anbieten.
Lange Zeit konnten mobile Web Apps im Vergleich zu nativen Apps sowohl funktional als auch vom Look-and-Feel nicht mithalten. So spielte sich die native App dank Push-Nachrichten, Offline-Fähigkeit und der Positionierung auf dem Startbildschirm immer mehr in den Vordergrund.
Mit Progressive Web Apps kann sich das jetzt ändern: Die Technologie ermöglicht es Entwicklern, mobile Web Apps mit dem Look-and-Feel und den Funktionen zu bauen, die bisher nativen Apps vorbehalten waren. Die Progressive Web App kann damit sowohl die Desktop- und mobile Webseite als auch die native App ersetzen und dabei viel Entwicklungsaufwand sparen.
Bei mobilen Web Apps handelt es sich lediglich um responsive Webseiten, die sich an die Bildschirmgröße des Mobilgeräts und die Bedienung mit Finger-Touch anpassen. Die Pro-gressive Web App hingegen geht wesentlich weiter. Sie lässt sich nicht nur über den Browser als klassische mobile Web App öffnen, sondern kann direkt auf dem Mobilgerät installiert und im Vollbildmodus genutzt werden.
Progressive Web Apps sind auf schnelle Ladezeiten ausgelegt, können Push-Nachrichten – wie beispielsweise bei WhatsApp – empfangen und sogar Offline-Funktionen bereitstellen. Für den Nutzer sind sie so kaum von einer nativen App unterscheidbar.
Eine Progressive Web App besteht aus einer mobilen Webseite, in die ein sogenannter Service Worker und ein App Manifest eingebunden werden. Beim Service Worker handelt es sich um einen programmierbaren Hintergrundprozess, der im Browser läuft. Er kann alle Anfragen einer Webseite abfangen und diese zum Beispiel aus einem eigenen Cache bedienen. Außerdem lassen sich hier Push-Nachrichten von einem Server empfangen und zudem lässt sich feststellen, ob das Gerät offline ist und etwa beim nächsten Verbindungsaufbau eine Synchronisation ausgelöst werden sollte.
Das App Manifest ist eine Datei, in der Daten zur Darstellung der App angegeben werden. So können hier der Name und das Icon der App, aber auch Einstellungen wie Vollbildmodus und andere visuelle Eigenschaften konfiguriert werden.
Smartphones sind unterwegs nicht nur als Kommunikations-Tool und für den Internetzugang nützlich. Zahlreiche Apps helfen, sich auf Reisen besser zurechtzufinden. Die silicon-Redaktion stellt 20 spannende, praktische und nützliche Apps vor.
Jede mobile Webseite mit einem Service Worker und einem App Manifest wird als Progressive Web App erkannt. Welche Funktionen tatsächlich im Service Worker implementiert werden (Caching, Offlinemodus, Push-Nachrichten usw.), steht dem Entwickler frei.
Für die Installation der Progressive Web App auf dem Smartphone wird die mobile Webseite im Browser geöffnet. Nach wenigen Sekunden auf der Webseite wird dem Nutzer mittels eines Banners die Installation vorgeschlagen. Nach der Installation kann die App direkt vom Startbildschirm zugegriffen werden.
Über den Service Worker gelingt es, den statischen Teil der Progressive Web App direkt aus dem Cache auszuliefern und gegebenenfalls im Hintergrund beim Server anzufragen, ob sich diese Daten verändert haben. Insbesondere dynamische Daten wie Artikel in einem News-Stream oder Produkte in einem Onlineshop werden weiterhin vom Server geladen. Wichtige Voraussetzung: Der Entwickler muss definieren, welche Daten für wie lange im Cache liegen dürfen.
Wenn das Gerät keine Verbindung zum Internet hat, kann dies im Service Worker erkannt und die Webseite aus dem Cache heraus geladen werden. Idealerweise sollte dem Nutzer angezeigt werden, dass die App im Offlinemodus arbeitet, weil Daten veraltet und einige Funktionen nicht verfügbar sein können, zum Beispiel das Hinzufügen eines Artikels in den Warenkorb.
Mitarbeiter sind heute mit Konnektivität, Mobilität und Video aufgewachsen oder vertraut. Sie nutzen die dazu erforderlichen Technologien privat und auch für die Arbeit bereits jetzt intensiv. Nun gilt es, diese Technologien und ihre Möglichkeiten in Unternehmen strategisch einzusetzen.
Bezüglich der Funktionalitäten im Offlinemodus hat der Entwickler viel Spielraum bei der Implementierung. Er kann sich beispielsweise darauf beschränken, Daten aus dem Cache anzuzeigen und alle Nutzerinteraktionen im Offlinemodus zu deaktivieren. Optional können auch einzelne Funktionen wie das zuvor erwähnte Hinzufügen eines Artikels in den Warenkorb im Offlinemodus implementiert werden. Dafür müssen die im Offlinemodus veränderten Daten mit dem Zustand des Servers synchronisiert werden, sobald wieder eine Verbin-dung zum Internet besteht.
Klassische Webseiten sind nicht in der Lage, Nachrichten zu empfangen, wenn der Nutzer sie nicht gerade aktiv benutzt. Mit dem Service Worker bekommt der Entwickler die Möglich-keit, Push-Nachrichten von einem Server zu empfangen, auch wenn die App nicht genutzt wird oder sogar wenn das Mobilgerät gesperrt ist. Für den Nutzer gibt es dabei keinen Unterschied zu den herstellerspezifischen Push-Nachrichten von nativen Apps wie WhatsApp.
Das Herzstück einer Progressive Web App ist der Service Worker. Je mehr Zeit der Entwickler hier investiert, desto besser wird das Nutzererlebnis. Für die verschiedenen Funktionen sind unterschiedliche Dinge zu beachten.
Für das Caching im Service Worker muss wieder konkret definiert werden, welche Ressour-cen wie gecached werden sollen. Diese Entscheidungen und Konfigurationen sind in vielen Fällen sehr komplex. Best Patrices wie Asset Hashing und andere Web Performance-Techniken können hier helfen.
Für den Offlinemodus muss im Service Worker definiert werden, welche Ressourcen ausgeliefert werden sollen und welche Nutzeraktionen im Offlinebetrieb möglich sind. Wenn der Nutzer im Offlinemodus Daten verändern kann, müssen zudem ein Synchronisations-Mechanismus entwickelt und serverseitig eine Konfliktauflösung implementiert werden.
Für Push-Nachrichten muss serverseitig das entsprechende Protokoll umgesetzt werden. Der Pflegeaufwand bei Änderungen an der Webseite kann dadurch relativ hoch sein. Caching, Offlinemodus und die Synchronisation müssen dabei stets im Blick bleiben.
Viele Aspekte eines Service Workers lassen sich allerdings anwendungsunabhängig lösen. Es eröffnet sich die Möglichkeit auf externe Service Worker zurückgreifen. Der Cloud Service von Baqend liefert beispielsweise einen vorkonfigurierten, cachenden Service Worker, der direkt auf Webseiten eingebunden werden kann.
Dort optimiert er automatisch die Geschwindigkeit durch Caching und ermöglicht einen Offline-Modus mit Synchronisation und Push-Nachrichten. Ein weiterer Vorteil: Der Service Worker beschleunigt nicht nur die mobile Seite, sondern unabhängig von Progressive Web Apps auch automatisch die Desktop-Webseite. Sogar vom Offlinemodus kann die Desktop-Variante profitieren.
Einige Einschränkungen sind jedoch zu berücksichtigen: Derzeit unterstützen rund 70 Prozent der Browser den Service Worker (u.a. Google Chrome, Firefox, Microsoft Edge und Opera). Die Implementierung in Safari (Apple) ist geplant. Entsprechend werden Progressive Web Apps bisher nur unter Android unterstützt.
Trotzdem ist festzustellen, dass Progressive Web Apps nicht den Anspruch haben, alle nativen Apps zu ersetzen. Diese haben nach wie vor ihre Berechtigung und bleiben in einigen Punkten weiter überlegen. Beispielsweise werden aufwendige 3D-Spiele immer besser direkt auf dem Betriebssystem laufen als in einem Browser.
Progressive Web Apps stellen eine großartige Möglichkeit dar, sehr schnelle und ansprechende App-ähnliche Webseiten zu entwickeln. Die tatsächliche Performance und App-ähnliche Benutzbarkeit hängen allerdings sehr stark von der Qualität des zu entwickelnden Service Workers ab.
Beim Rückgriff auf bestehende, externe Service Worker können die aufwendige Entwicklung eigener Lösungen und die damit einhergehende hohe Fehleranfälligkeit umgangen werden. Zudem können Service Worker, die in die Website selbst eingebunden sind, nicht nur Progressive Web Apps beschleunigen, auch die Desktop-Website profitiert vom Service Worker.
Server-Ausbau in den USA und China macht große Fortschritte, deutscher Weltmarktanteil sinkt. Lichtblicke in Frankfurt…
Der Markt für Workplace Services gerät in Bewegung. Das bestmögliche digitale Nutzererlebnis gilt als Schlüssel…
Schutz für 10.000 Postfächer über rund 200 Domains: Private-Stack-Variante kombiniert Vorteile einer Cloud-Lösung mit Sicherheit…
Huawei Connect Paris: Innovationen rund um Data Center, Storage und IT-Sicherheit.
Mit KI optimieren Hacker ihre Angriffsversuche. Ist CIAM eine Lösung, mit der sich Unternehmen vor…
“Amplify Digital and Green Transformation” hieß die zentrale Botschaft des europäischen Flagship-Events „Huawei Connect“ in…
