Progressive Web App – Alles was Sie wissen müssen

Was ist eine Progressive Web App?

Das recht neue Konzept der Progressive Web App (PWA) verbindet klassische Websites mit einigen Vorteilen, die die Entwicklung nativer mobile Apps bietet. Es handelt sich um eine speziell entwickelte Website bzw. Web App, die trotz der Funktionsweise über einen Browser das Look & Feel einer nativen mobile App aufweist und dennoch auf mehreren Betriebssystemen gleichzeitig zur Verfügung steht – basierend auf einer einzigen Code Basis. So sollen PWAs eine Möglichkeit bieten, den sonst so typischen Widerspruch in der App Entwicklung zu umgehen: hohe Verfügbarkeit und Funktionalität zu überschaubaren Entwicklungskosten.

Bei PWAs werden HTML und CSS benutzt, um die Anwendungs-Shell, also das User Interface (UI), zu erstellen. Die Inhalte werden über sog. Service Worker, bestehend aus JavaScript, geladen. Mittlerweile existieren einige 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.

Einige Fakten zu PWAs auf einen Blick:

• Progressive Web Apps basieren auf Web Technologien
• Ein mal entwickelt steh einer PWA mehreren Plattformen zur Verfügung
• PWAs können wie eine Website über eine URL erreicht werden
• Im Gegensatz zu Web Apps sind PWAs auch offline funktional
• Können bei Erfüllung bestimmter Kriterien jedoch installierbar sein und im App bzw. Play Store angeboten werden
• PWAs passen sich vollständig dem Nutzungsrahmen an

Wirklichen Aufwind erfahren hat das Prinzip der PWA durch Google, entsprechend ist Google maßgeblich an Entwicklung und Adaption beteiligt. Aber auch die Browser Opera und Mozilla Firefox investieren ihn die recht neuartige Technologie.

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 sie 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 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 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 zu 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. Beispielsweise muss eine PWA über einen Service Worker verfügen. Der Service Worker ist JavaScript Programm, welches unter anderem als Brücke zwischen Netzwerk und Cache dient und somit die Offline Funktion sowie Push-Benachrichtigungen ermöglicht, welche die mit grundlegendsten Unterschiede zwischen einer PWA und einer Web App darstellt. Ob eine Web App die Kriterien zu einer PWA erfüllt, kann ganz einfach mit dem von Google entwickelten Tool Lighthouse überprüft werden.

Unterschiede zwischen PWA und hybrider App

Auch die hybride App Entwicklung ist ein Ansatz der plattformübergreifenden Entwicklung. Hier wird genauso eine Code Basis, die mit Web Technologien (HTML, CSS, JavaScript) programmiert wurde, übergreifend mehreren Betriebssystemen zur Verfügung gestellt. Der größte Unterschied ist, dass hybride Apps über einen Container ausgespielt werden, welcher wiederum native Funktionen bereitstellt. Der Container wird dann als die jeweilige App im App bzw. Play Store als Download angeboten.

Der Hauptunterschied zwischen hybrider App und PWA ist also der, dass PWAs auf die Kompatibilität zwischen Browser und Endgerät basieren, während die hybride App auf den eigenen Container, der nur browserartig fungiert, basiert. Während früher auch die Verfügbarkeit im App Store ein wichtiges Unterscheidungsmerkmal war, sehen wir aktuell bereits, dass die Grenzen zwischen PWA und hybrider App mit fortschreitendem technischen Fortschritt in der PWA Entwicklung weiter verschwimmen.

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 effizient Minimal Viable Products (MVPs) entwickelt werden, bevor viel Budget in die native Entwicklung investiert wird. So kann verhältnismäßig günstig getestet werden, ob die App erfolgreich auf dem Markt platziert werden kann.

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.

Die optimierte User Experience zahlt sich sehr für E-Commerce Plattformen aus. Typischerweise lassen sich mobile, webbasierte Onlineshops im Vergleich zur App Variante nur schwer bedienen, während gleichzeitig viele Nutzer:innen keine weitere App downloaden wollen. PWAs lösen dieses Problem, indem Sie App Feeling im Web anbieten können und trotzdem, mit der Möglichkeit zum Download einer vergleichsweise sehr viel kleineren PWA, vom Nutzerverhalten auf installierten Apps profitieren können.

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 des App bzw. Play Stores zum Download angeboten werden – das verringert typische Download Hürden. Statistiken zeigen, dass Nutzer:innen mehr mit Apps interagieren, die auf Ihrem Endgerät installiert sind.

Mit der Möglichkeit, Push-Benachrichtungen über die PWA zu senden, lässt sich die Nutzerbindung noch weiter erhöhen – 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:innen, mehr Leads und schlussendlich auch mehr Kundinnen und Kunden.

Unternehmen wie Twitter, Nikkei und Hulu konnten berichten, dass der Umstieg auf Progressive Web Apps signifikante Verbesserungen bei Metriken wie Traffic, Aktivität, Absprungrate und wiederkehrende Nutzer:innen 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:innen 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 440KB 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:innen zu Registrierungen, Logins oder App Downloads zu konvertieren. 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 nutzergenerierten 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.

Die wichtigsten Vorteile im Überblick

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 native entwickelte mobile Apps,
• sind kostengünstiger zu warten und
• sind bis zu 90% kleiner als native Apps.

Entwickler für Ihre App.

Wir finden passende Experten für Sie.

ANGEBOTE ERHALTEN     ❯

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 genau 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!