Eine Progressive Web App (PWA) ist der Weg in die interaktive Zukunft. Die systemunabhängige mobile Lösung, die man auch offline nutzen kann, kennt fast keine Grenzen. Reagieren Sie damit auf die anspruchsvolleren Bedürfnisse Ihrer aktuellen und zukünftigen Kundinnen und Kunden – für mehr Flexibilität, Freiheit und Erreichbarkeit.
Erfahren Sie:
- Warum Sie sich mit PWAs beschäftigen sollten.
- Was für die Anwendung spricht.
- Was aktuell schon möglich ist.
- Welche weiteren Features bald verfügbar sind.
Die Internetseite ist nach wie vor die erste Adresse, die Unternehmen nutzen, um mit ihren Zielgruppen in Kontakt zu treten. Über Desktop erreich- und steuerbar, stellt sie das klassische Instrument in den B2B- und B2C- Kundenbeziehungen dar.
Bis 2025 werden laut CNBC 72% der Internetnutzer nur noch mobil online gehen*
Im letzten Jahrzehnt haben sich zahlreiche mobile Geräte etabliert, deren Nutzung neue Dimensionen und Reichweiten ermöglichen. Das mobile Telefon wurde abgelöst durch Smartphones und Tablets und ist aus dem privaten wie Business-Alltag nicht mehr wegzudenken. Damit wird es für Anwendungen zwingend notwendig, sich den neuen Formaten – von Smartwatch bis Tablet – anzupassen, um eine zuverlässige Erreichbarkeit des Klientels zu gewährleisten. Moderne Anwendungen bieten also idealerweise für jedes Endgerät eine optimale Darstellung, sie passen sich responsiv an das jeweilige Ausspielformat an.
Dennoch gibt es einen entscheidenden Nachteil: Webapplikationen sind außerhalb von Wireless Network Areas auf mobilen Endgeräten gar nicht oder nur schwer erreichbar. Inzwischen gibt es die Progressive Web-Application-Technologie – kurz PWA – welche genau diese Lücke schließt und darüber hinaus noch weitere Mehrwerte bietet.
Viele klassische Webapplikationen werden aber immer noch nicht als PWA und ohne einen „mobile first“-Ansatz entwickelt. Aber warum eigentlich? Gerade im B2C-Bereich etablieren sich Desktop-Corporate-Webseiten oder Online-Shops als erste Kontaktaufnahme für potentielle Kundinnen und Kunden. Weit über 50% der Kundinnen und Kunden greifen auf diese per Smartphone oder Tablet zu.
Die PWA-Technologie ist der Standard, der sich—neben systemabhängigen, nativen Apps — mehr und mehr durchsetzt, da diese Technologie systemunabhängig den Nutzerinnen und Nutzern ermöglicht, Informationen netzunabhängig zu beziehen und mobile Funktionen wie Kamera, GPS oder Touch ID in das interaktive Nutzerverhalten mit einzubeziehen.
Warum es sich lohnt einen genaueren Blick auf die PWA-Lösung zu richten
Mit einer progressiven Web-Applikation (PWA) können Unternehmen ein an mobile Nutzererfahrungen ausgerichtetes und optimiertes Nutzungserlebnis bieten. Ihr Online-Angebot wird mittels PWA zu einem wahren Erlebnis für die Nutzenden, die über mobile Endgeräte darauf zugreifen. Die Seiten laden schneller als eine herkömmliche Webapplikation, merken sich viele Daten für den Offline-Modus dank der „Service Worker“-Technologie, bieten eine touchoptimierte Nutzeroberfläche und stellen darüber hinaus eine Vielzahl an Sonderfunktionen bereit, die bislang nur der Nutzung geschlossener, nativer Apps vorbehalten sind, welche über den App Stores bereitgestellt werden müssen.
Schon hier wird ein weiterer Vorteil deutlich. Die PWA wird über den Browser ausgeführt und auf dem mobilen Gerät installiert. In der Nutzung verhält sie sich dann ähnlich wie eine native App, nur dass im Hintergrund der Browser zum Einsatz kommt. Dadurch benötigt die Bereitstellung einer PWA keinen App Store. Das erspart Kosten für Anmeldung, Aufbau und Pflege des eigenen App-Angebots in den App Stores. Mittlerweile eröffnet Google Play für Android zwar die Möglichkeit, auch PWAs über den Store zu veröffentlichen, das ist aber nicht zwingend notwendig.
Über dieses App Icon wird die PWA dann geöffnet.
Die PWA ermöglicht es, mobile Features wie Kamera, GPS oder Sensordaten intelligent mit ihrem Content zu verknüpfen. Die Anbindung an Routenplaner, die Integration von Kamera-, Video- oder Touch-Identifikation und vieles mehr werden nunmehr möglich und machen das Online-Angebot attraktiv und komfortabel.
Mit einer PWA sind Unternehmen zeitgemäß und zukunftsfähig aufgestellt. In der Digitalisierungsstrategie stellt die PWA einen wesentlichen Meilenstein dar, sich noch besser und effizienter mit seinen Kundinnen und Kunden zu verknüpfen und dadurch eine durchgängige Customer Journey für Ihre B2B- und B2C-Strategie anzubieten. Nicht zuletzt trägt auch das positive Nutzererlebnis dazu bei, Kundinnen und Kunden nachhaltig und langfristig zu binden.
Das App Icon wird erzeugt, wenn die Browserseite als Lesezeichen auf dem Smartphone gesichert wird.
Über dieses App Icon wird die PWA dann geöffnet.
Funktionaltäten einer PWA und aktuelle Anwendung
Das Thema PWA ist schon lange kein Trend mehr, sondern bereits stark in modernen Technologie-Stacks etabliert. Viele große Applikationen und Unternehmen wechseln mit ihren Online-Angeboten zur „Progressive Web App“- oder haben diese Technologie schon fest installiert. Bekannt sind beispielsweise YouTube von Google und auch die neue ZDF-Mediathek. Auch die Washington Post, Pinterest und Booking.com setzen auf diesen Ansatz.
Die Vorteile liegen auf der Hand, zudem profitiert eine PWA durch ihre Technologie und den modularen Aufbau, der zahlreiche Möglichkeiten für Weiterentwicklung und Nachnutzung bietet.
Ein einziges Framework wird für den Entwicklungsaufwand benötigt. Konzeption, UX /UI, Entwicklung und Tests werden gleichzeitig für iOS, Android und Desktop bearbeitet. Zeit und Kostenaufwände werden eingespart.
Das heißt im Detail, dass nur eine Codebasis benötigt wird, ohne grundlegende Funktionalitäten zu verlieren. Über diese gemeinsame Quelle können die wichtigsten Bestandteile der App auf allen Systemen verwendet werden: die systemunabhängige Applikationslogik, die barrierefreie und intuitive Nutzeroberfläche und die Anbindung an kundenspezifische Systeme. Dabei ist es trotzdem möglich, die Optik und das Interaktionsverhalten (Look & Feel) nativer Apps zu bieten.
Eine Progressive Web App unterstützt jetzt schon viele grundlegenden Technologien und Zugriffe, die man für einfache und erweiterte Applikationen benötigt. Wir haben hier die wesentlichen Funktionalitäten einmal zusammengefasst:
- Kamera- und Mikrofonzugriff
- Payment-Schnittstellen (z.B. Apple Pay)
- Hohe Sicherheit durch Web Crypto API
- Dateizugriff
- Spracherkennung
- Offlinemodus und –Speicher
- VR / AR
- Geolocation, Geräteposition und Gerätebewegung
- Energieeffizienz (u.a. Batteriestatus)
- Vibrationen (Feedback)
- Abfrage von Netzwerktyp, -Geschwindigkeit und Online-Status
Ein weiterer Vorteil ist, dass sich die Marketingstrategie einer PWA nur unwesentlich von der einer klassischen Web-Applikation unterscheidet. Da die PWA über den Webbrowser geladen wird, greifen auch hier die Mechanismen der Suchmaschinenoptimierung.
Warum gibt es noch native Apps, wenn die PWA so viele Vorteile mit sich bringt?
Es existieren Anwendungsfälle, welche (noch) nicht durch reine webbasierte Lösungen umgesetzt werden können. Hierzu zählen zum Beispiel Bluetooth, Push Nachrichten und Applikationen mit Hintergrundaktivitäten. Diese können durch einen sogenannten hybriden Ansatz oder durch eine Companion App erreicht werden.
Eine hybride Applikation ist eine höhere Ausbaustufe einer PWA und kann zu einem späteren Zeitpunkt in das System integriert werden. Je nach Betriebssystem und dem damit verbundenen Browser muss man individuell die Lösungen bewerten, sobald eine rein webbasierte App nicht mehr ausreichen sollte. In einer Analyse-Phase untersuchen erfahrene System-Architekten Ziele, Systemarchitekturen und zu integrierende Schnittstellen und prüfen deren Einbindung in PWA Strukturen. Daraufhin kann genauestens abgeschätzt werden ob alle gewünschten Anwendungsfälle über den PWA Ansatz abgedeckt werden.
Wie sieht die Unterstützung bei Google und Apple aus?
App Stores
Android unterstützt die Veröffentlichung von PWAs im PlayStore, jedoch ist das kein Muss. Mit der Veröffentlichung von PWAs über den Store können jedoch wertvolle Nutzerfeedbacks auf direktem Weg eingeholt und ausgewertet werden.
Bei Apple stellt sich die Situation noch anders dar. Progressive Web Apps können zurzeit noch nicht im App Store für Endkundinnen und Endkunden angeboten werden. Es gibt Möglichkeiten, die PWA in einen Webview – einen nativen Rahmen – einzubetten, jedoch sollte man dies nur als Workaround betrachten.
Bluetooth für PWAs
Google Chrome und andere Chromium-basierte Browser (z.B. der neue Microsoft Edge und Samsung Internet) unterstützen bereits das Suchen und Verbinden sowie die Kommunikation mit Bluetooth Geräten. Für den Firefox befindet sich dieses Feature in Entwicklung, für iOS ist es derzeit nicht angedacht.
Push Notifications
Sämtliche Entwicklungen von komfortablen nativen App-Features treiben das Thema in einem rasanten Tempo. Daran lässt sich die Brisanz und Aktualität der Zukunftstechnologie PWA am besten verdeutlichen. Aktuell befinden sich Push Notifications für iOS mit dem Mobile Safari-Browser in Entwicklung. Somit könnte es bereits im Laufe des Jahres 2022 möglich sein, dass dieses Feature in PWAs auch unter iOS zur Verfügung steht. Andere Plattformen bieten diese Möglichkeit bereits.
Fazit: Die PWA ist die Zukunft des mobilen Netzes
Die PWA bietet großes Potenzial, da sie geräte- und netzunabhängig den Nutzerinnen und Nutzern ein einmaliges Erlebnis bietet. Um das zu erreichen ist es entscheidend, zunächst individuelle Bedarfe und Anforderungen an die zukünftige Applikation zu ermitteln. Für eine optimale Umsetzung sollte stets auf Performance, Wartbarkeit und Modularität geachtet werden. Dabei gilt der Vorsatz: “So viel wie nötig, so wenig wie möglich.”, damit nur die Daten bezogen werden, die gebraucht werden, um somit schneller ans Ziel zu kommen.
Schlussendlich ist es ein enges Zusammenspiel aus Anforderungsanalyse, Design, Umsetzung und Test, welches für ein perfekte Nutzererlebnis sorgt. Und dabei müssen keine Abstriche bei der Barrierefreiheit (Accessibility), Performance und Sicherheit gemacht werden.
Lesen Sie hier nach, wann es Sinn macht PWA in einen Shop zu integrieren
Vom Web zur mobilen App in Highspeed
Michael Marschner, Senior Frontend Entwickler und Fachlead
Mit seinen Teams erstellt er zukunftsweisende Projekte und Webapplikationen. Dabei kommen verschiedene Frontend Technologien und Frameworks zum Einsatz und auch der Austausch mit Designern und Backend-Entwicklern gehört zu seiner Arbeit. Selbst sieht er sich als Fullstack Frontend’ler 🙂
Ob Digitalisierungsexpert*in, Werkstudent*in oder Schülerpraktikant*in – Hier berichten unsere Gastautoren aus ihrem Alltag.
