Progressive Web App – Alles was Sie wissen müssen

Wie funktionieren PWAs?

Der Kern einer PWA sind die sogenannten Service Worker, eine auf JavaScript basierende Browsertechnologie. Diese dienen als Brücke zwischen Netzwerk und Cache und stellen die Inhalte der Seite. Der große Vorteil von Service Workern ist, dass sie die Inhalte im Cache speichern können – dadurch ist die PWA auch offline verfügbar. Ebenfalls ermöglichen die Service Worker es der PWA, auf native Features wie Push-Benachrichtigungen zuzugreifen.

Um die PWA im Browser verfügbar zu machen, wird mittels HTML oder CSS eine Anwendungs-Shell erstellt. Hierbei handelt es sich um das User Interface (UI), also das, was der Nutzer bei der Nutzung der PWA zu sehen bekommt. Die Anwendungs-Shell passt die Funktionalitäten der PWA an die jeweiligen Browser bzw. das jeweilige Betriebssystem an. Dadurch sieht die PWA aus und fühlt sich an wie eine spezifisch für das jeweilige Betriebssystem entwickelte App.

Mittlerweile existieren Frameworks für Website und App Entwicklung wie Ionic 2 und AngularJS, welche einige Funktionalitäten bereits zur Verfügung stellen und so den Entwicklungsaufwand einer Progressive Web-App gering halten.

PWA vs. klassische Web-App

Progressive Web-Apps lassen sich als Weiterentwicklung von Web-Apps verstehen. Web-Apps sind Applikationen, welche auf einem Server gelegt werden und direkt über den Browser aufgerufen werden können. Sie boten bereits früh den Vorteil, Apps auf mehreren Plattformen gleichzeitig verfügbar machen zu können, dabei aber Entwicklungskosten zu sparen – um eine native App für iOS und Android gleichzeitig verfügbar zu machen, muss diese nämlich auch zweimal entwickelt werden. Das ist bei Web Apps nicht der Fall.

Dennoch weisen Web-Apps gegenüber nativen Apps einige Nachteile auf. Beispielsweise funktionieren Sie nur bei bestehender Internetverbindung, können auf keine nativen Funktionen des Endgeräts zugreifen und fühlen sich vielleicht ähnlich, aber leider immer noch nicht genau wie eine native mobile App an.

Progressive Web-Apps sollen die Web-App dem Gefühl und der Funktionalität einer nativ entwickelten App näher bringen. Das wird vor allem über zusätzliche Funktionen wie Installierbarkeit, Offline-Modus und Zugriff auf native Features wie Kalender, Kontakte, Kamera und Push-Benachrichtigungen erreicht.

Was sind die Gemeinsamkeiten von PWA und Web-Apps?

• In der Regel günstiger als Native Apps
• Web-Traffic kann genutzt werden
• als URL darstellbar
• Technologien der Webentwicklung

Wo liegen die Unterschiede zwischen PWA und Web-Apps:

• Hardwarezugriff möglich
• Verbesserte Performance
• Veröffentlichung im App Store möglich
• Service Worker als Kernstück der PWA
• Offline-Funktionalität
• Installierbarkeit
• Push-Notifications

Um eine Web-App als PWA qualifizieren zu können, müssen bestimmte Kriterien erfüllt werden. Ob die Kriterien erfüllt werden, lässt sich recht einfach mit dem von Google entwickelten Tool Lighthouse überprüfen.

Wofür eignen sich Progressive Web-Apps?

Aufgrund Ihrer Flexibilität eignen sich PWAs für viele Verwendungszwecke. Aufgrund der schnellen, plattformübergreifenden Entwicklung können Minimal Viable Products (MVPs) entwickelt werden, bevor viel Budget in die native Entwicklung investiert wird. Indem bereits früh getestet wird, ob die App erfolgreich auf dem Markt platziert werden kann, werden Risiken minimiert.

Interaktionsbasierte Websites profitieren sehr stark von den Möglichkeiten einer PWA, da diese mit schnellen Ladezeiten und einer flüssigen Handhabung punkten können und dazu auf viele Gerätefeatures zugreifen können.

PWAs verbessern die User-Experience von Webseiten und eignen sich deshalb sehr gut für E-Commerce Plattformen. Häufig lassen sich mobile, webbasierte Onlineshops im Gegensatz zur App Variante nur schwer bedienen, gleichzeitig wollen viele Nutzer jedoch keine weitere App downloaden. PWAs lösen dieses Problem, da sie nicht installiert werden müssen und dennoch die Nutzererfahrung nativ entwickelter Apps bieten.

Wie kann eine PWA zu Ihrem Unternehmenserfolg beitragen?

Progressive Web-Apps sind echte Allrounder und vereinen viele Kriterien, die eine gute User Experience ausmachen. Generell kann die Entwicklung einer App viele Vorteile für Unternehmen haben.

Als Web Anwendungen können PWAs auch über Suchmaschinen gefunden werden. Unternehmen können so klassische App Vermarktungsstrategien ausweiten und auch die Suchmaschinenoptimierung (SEO) besser integrieren. Dadurch, dass PWAs verlinkbar sind, können sie leicht von Usern geteilt und aufgerufen werden.

Trotzdem sind PWAs auch installierbar und lassen sich so ganz einfach dem Homescreen hinzufügen. Dabei sind die meisten PWAs kleiner als 1 MB und können und können auch außerhalb der App bzw. Play Stores zum Download angeboten werden – das verringert typische Download Hürden. Statistiken zeigen, dass Nutzer mehr mit Apps interagieren, die auf Ihrem Endgerät installiert sind.

Mit der Möglichkeit, Push-Benachrichtungen über die PWA zu senden, kann die Nutzerbindung weiter erhöht werden – ein klarer Vorteil gegenüber der gewöhnlichen Web-App. Die durch den Service Worker ermöglichte Offline Nutzung trägt weiter zu einem positiven Nutzererlebnis bei. Insgesamt sorgt die so hohe Verfügbarkeit, die aber auch in der plattformübergreifenden Entwicklung begründet liegt, für mehr potenzielle Nutzer, mehr Leads und schlussendlich auch mehr Kundinnen und Kunden.

Unternehmen wie Twitter, Nikkei und Hulu konnten berichten, dass der Umstieg auf Progressive Web-Apps belegbare Verbesserungen bei Metriken wie Traffic, Aktivität, Absprungrate und wiederkehrende Nutzer verzeichnen konnte.

Welche Auswirkungen die Einführung von PWAs für Unternehmen haben kann, können verschiedene Case Studies eindrucksvoll zeigen:

‍

Case Studies: So kann sich eine PWA auf Ihr Unternehmen auswirken

BookMyShow

BookMyShow ist der größte Ticketanbieter Indiens. Laut der von Google veröffentlichten Case Study konnte BookMyShow mit der Weiterentwicklung ihrer Website zu einer Progressive Web-App 80 % mehr Conversions erzielen. Vor allem mobile Nutzer kaufen seitdem deutlich mehr Tickets.

Das wurde erreicht, indem die PWA auf Geschwindigkeit hin optimiert wurde, mit dem Ziel, Ticketkäufe in nur 30 Sekunden abschließen zu können. Mit Funktionen wie dem "add to homescreen" Button wird ein natives App-Gefühl geschaffen, ohne dabei den Gerätespeicher zu belasten: Mit 440 KB ist die PWA 54-mal kleiner als die Android App und 180-mal kleiner als die iOS App. Durch den Service Worker performt die App auch bei schlechter Netzwerkleistung zuverlässig.

‍

Pinterest

Mit der alten Website gelang es Pinterest lediglich 1 % der Nutzer zu Registrierungen, Logins oder App Downloads zu bewegen. Die Lösung war die Entwicklung einer Progressive Web-App mittels React und den JavaScript-Bibliotheken Redux und webpack, wodurch signifikante Verbesserungen erzielt wurden.

Der Anteil längerer Nutzungen stieg um 40 %, die benutzergenerierten Werbeeinnahmen stiegen um 44 % und Interaktionen mit der Website stiegen um 60 %. Wesentlich dazu beigetragen haben Verbesserungen in Geschwindigkeit und Performance sowie die Möglichkeit, durch den Service Worker Push-Benachrichtigungen zu senden.

‍

Welche sind die Vorteile von Progressive Web-Apps?

Progressive Web-Apps

• verzeichnen durchschnittlich 36 % höhere conversion rates als native Apps,
• weisen ein um 50 % höheres Customer Engagement auf,
• können die Ladezeiten von Websites um das 10-fache verringern,
• kosten im Durchschnitt weniger als nativ entwickelte Apps,
• sind kostengünstiger zu warten und
• sind bis zu 90 % kleiner als native Apps.

‍

Fazit: Progressive Web-Apps

Es gibt viele Gründe dafür, eine App entwicklen zu lassen. Progressive Web-Apps bieten viele Vorteile für Unternehmen, welche die User-Experience Ihrer Website verbessern und Ihre Conversion Rates steigern möchten. PWAs verbinden die Vorteile der nativen Entwicklung mit den Vorteilen der plattformübergreifenden Web-App Entwicklung und kann so erheblich Entwicklungszeit und -kosten einsparen. So bietet sich eine Progressive Web-App für die Entwicklung von MVPs genauso an wie für die Weiterentwicklung bestehender, auf Interaktion ausgelegt Websites.

Ob eine Progressive Web-App die richtige Lösung für Sie ist, klären wir gerne in einer kostenlosen Beratung mit Ihnen. Füllen Sie dazu einfach den Fragebogen aus oder nutzen unser Kontaktformular!

Sie sind auf der Suche nach dem passenden Partner für Ihr App oder Web Projekt? Mit unserem einzigartigen Matchingverfahren bieten wir Ihnen kostenlos & unverbindlich 3 Angebote von geprüften App & Web Agenturen aus unserem Netzwerk. Jetzt anfragen!