Android-App, iOS-App, Website: Wenn Ihr Unternehmen im Online-Geschäft tätig ist, musste es bislang diesen Dreiklang spielen. Das heißt, es gab drei Plattformen, die betreut und weiterentwickelt werden müssen. Das kostet Zeit und Geld. Progressive Web Apps helfen Ihnen, Ihren Ressourceneinsatz zu reduzieren.

Download: Leitfaden CSS & HTML für Anfänger 

Der Name Progressive Web App leitet sich aus den Begriffen „Web App“ für Internet- oder Webanwendungen und „Progressive Enhancement“ für eine spezielle Methode der Webentwicklung her.

Was ist der Unterschied zwischen PWA, Native Apps und Hybrid Apps?

Native Apps sind Anwendungen, die Sie speziell für ein Betriebssystem entwickeln lassen. In der Smartphone- und Tablet-Welt sind das hauptsächlich iOS für iPhone (etwa 28 % Marktanteil) und iPad sowie Android für die meisten anderen mobilen Endgeräte (rund 71 % Marktanteil im Bereich „Handys“). Eine Native App funktioniert nur auf dem Betriebssystem, für das sie konzipiert ist.

Bei Hybrid Apps handelt es sich um Anwendungen, die auf einem System programmiert werden und dann auf unterschiedlichen Betriebssystemen funktionieren. In der Regel sind derartige Apps größer als Native Apps, da sie den Code für unterschiedliche Plattformen beinhalten.

Da Progressive Web Apps „gepimpte“ Websites darstellen, laufen Sie unabhängig von dem eingesetzten Betriebssystem. Das heißt, PWAs funktionieren auf allen Geräten, auf denen ein Browser installiert und Internet verfügbar ist. Lassen Sie eine Progressive Web App erstellen, macht das theoretisch die Entwicklung von Native Apps oder Hybrid Apps obsolet.

Wie funktioniert eine Progressive Web App?

Progressive Web Apps werden mit den Standards des Web Developments realisiert. Entwickler und Entwicklerinnen programmieren die neuartigen Anwendungen mit HTML5, es kommen auch JavaScript und CSS3 zum Einsatz.

Eine wichtige Rolle nehmen die sogenannten PWA Service Worker ein. Mit dieser Browser-Technologie ist es unter anderem möglich, Online-Inhalte so zu speichern, dass die PWA-Websites oder -Stores zeitweise auch offline funktionieren.

Zudem sorgen die PWA Service Worker dafür, dass eine Website Funktionen erhält, die man normalerweise nur von Native Apps oder Hybrid Apps kennt. Dazu gehört beispielsweise der Zugriff auf die Kamera, das Mikrofon und die GPS-Daten. Weiterhin lassen sich Push-Nachrichten an die Nutzer und Nutzerinnen schicken. Derartiges können „gewöhnliche“ Websites nicht.

PWA Beispiele

NASA, Google, Facebook, Alibaba, Continental, Lotto, Starbucks: Viele namhafte Unternehmen und Organisationen setzen auf Progressive Web Apps. Ein paar gute PWA-Beispiele zeigt Ihnen die Seite PWA.bar.

Warum auf Progressive Web App setzen?

PWAs vereinen die Vorteile zweier technischer Welten. Zum einen funktionieren sie wie Websites auf allen modernen Browsern. Gleichgültig, ob die Anwendung auf einem Smartphone, einem Laptop oder einem smarten IoT-Gadget läuft. Das heißt, Progressive Web Apps sind stets „up to date“ und „schlank“. Und die Nutzer und Nutzerinnen müssen eine PWA nicht auf Ihrem Gerät installieren, somit verbrauchen Sie keinen nennenswerten Speicherplatz.

Zum anderen profitieren PWA-Sites von den Vorteilen einer nativen oder hybriden App: Durch das Zwischenspeichern von wichtigen Daten funktionieren Progressive Web Apps bis zu einem gewissen Grad auch ohne Internet-Verbindung. So können Ihre Kunden und Kundinnen beispielsweise in Ihrem Online-Store stöbern, während sie mit dem Zug durch eine Gegend ohne Netzempfang fahren. Zudem greifen die speziellen Webanwendungen auf die Hardware der Geräte zu. So lässt sich für einen Authentifizierungsvorgang die Smartphone-Kamera aktivieren.

Setzt Ihr Unternehmen auf das PWA-Framework, profitiert es somit von mehreren Pluspunkten: Sie können sich die Entwicklung spezieller Smartphone- und Tablet-Apps sparen und zugleich die User Experience der Website verbessern. Das wirkt sich positiv auf die mobile Bounce Rate, Engagement Rate und Conversion Rate aus.

Die Nachteile und Risiken von Progressive Web Apps

Eine PWA ist eine technisch aufgebohrte Website. Gibt es hier Probleme, zum Beispiel Sicherheitslücken oder Server-Ausfälle, ist Ihr „Eintrittstor“ betroffen. Dementsprechend heikel kann die Fokussierung auf eine Progressive Web App sein.

Dazu kommt, dass PWAs die vorhandene Hardware nicht optimal ausnutzen. Sie können damit keine Web Apps umsetzen, die hoch performant sein müssen. Reine Offline-Anwendungen sind mit den Webanwendungen ebenso nicht möglich, eine (gelegentliche) Internet-Verbindung sollte vorhanden sein.

Was kostet eine PWA?

Die Entwicklung einer Progressive Web App ist zwar aufwändiger und teurer als die Umsetzung einer „normalen“ Website, doch sie fällt in der Regel deutlich günstiger als die Programmierung einer nativen oder hybriden App aus.

Auch für den haben Sie weniger Pflegeaufwand einzuberechnen, da Sie nur eine technische Lösung statt zwei oder drei im Blick haben müssen. Unterm Strich wird eine PWA deutlich preiswerter als eine mehrgleisige Strategie sein, wodurch Sie viele Tausende Euro einsparen.

Uebersicht Progressive Web App Entwicklung im Vergleich

Quelle: Screenshot Upload Magazin

Progressive Web App vs. Native App vs. Hybrid App

Progressive Web Apps lassen sich zwar kostengünstiger erstellen, dafür lässt sich eine Native App perfekt auf das Endgerät zuschneiden. Ideal, wenn Sie spezielle Features eines Smartphones oder dessen hohe Rechenleistung ausnutzen möchten.

Beim Vergleich von PWAs mit Hybrid Apps gelten die gleichen Argumente: Auch eine hybride Anwendung kann die Hardware deutlich besser ausreizen als eine Progressive Web App. Zudem lassen sich damit Offline-Anwendungen für Android und iOS realisieren.

Fazit: Vorteile und Nachteile der Progressive Web App abwägen

Die neue Form der Progressive Web App kann eine kostengünstigere, schnellere Alternative zu Apps sein, um Ihren Kundinnen und Kunden das gewisse “Mehr” zu bieten. Allerdings sollten Sie sich genau überlegen, ob es sich für Sie lohnt, auf bestimmte komplexere App-Features zu verzichten. Es lohnt sich daher beispielsweise, mit PWAs neue Ideen schnell umzusetzen und zu testen, wie diese bei Ihrer Zielgruppe ankommen.

css html für anfänger

Titelbild: MStudioImages / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Aug 4, 2022 2:00:00 AM, aktualisiert am August 04 2022