Progressive Web Apps (kurz: PWA) sind der neueste Trend im App-Business, weil sie die Vorteile einer Website mit den Vorteilen einer Mobile App verbinden.
Manche halten Sie für DAS App-Format der Zukunft. In diesem Blog-Beitrag beantworten wir die wichtigsten Fragen zum Thema.
Um diese Frage zu klären, gehen wir kurz einen Schritt zurück und werfen einen Blick auf die verschiedenen App-Formate. Es gibt die ganz normalen Apps, die man als Smartphone-Nutzer im App Store downloaden kann. Man nennt sie Native Apps, weil es die ersten ihrer Art waren und sie in der vom Betriebssystemhersteller vorgegebenen Programmiersprache geschrieben sind. Bei Apple ist dies Swift, bei Android wird Java verwendet. Es gibt darüber hinaus Hybrid Apps, die wie Native Apps wirken, aber mit Hilfe moderner Webtechnologien wie JavaScript und CSS aufgebaut und so unabhängig vom Betriebssystem auf jedem Endgerät laufen. Außerdem gibt es Web Apps, die im Browser ausgeführt werden, wie eine klassische Desktop-Anwendung aussehen und über verschiedene interaktive Funktionen verfügen.
Progressive Web Apps sind die neueste Entwicklung und funktionieren ähnlich wie Hybrid Apps. Allerdings können PWAs direkt über eine Website installiert werden und sind nach der Installation in einem für sie reservierten Web Container des mobilen Endgeräts verfügbar. Sie werden wie eine Website oder eine Web App mit Hilfe von Webtechnologien ausgeführt, wirken für den Nutzer aber eher wie eine App – unter anderem, weil sie auf native Funktionen wie Push-Nachrichten, GPS oder die Kamera zugreifen können und weil man ihr Icon wie eine normale App zum Home Screen hinzufügen kann. Im Gegensatz zu Native und Hybrid Apps müssen Progressive Web Apps nicht über den App Store heruntergeladen werden. Vereinfacht kann man also sagen:
Eine Progressive Web App (kurz: PWA) ist eine Website mit den Funktionen einer App.
Progressive Web Apps werden mit Hilfe von Webtechnologien in einem vom mobilen Endgerät reservierten Web Container ausgeführt und können wie eine normale Mobile App geöffnet werden. Installiert werden PWAs über eine Installations-Routine, die in der Regel über die korrespondierende Webseite ausgeführt wird.
Erstellt werden PWA mit Webtechnologien wie HTML, CSS und JavaScript. Dabei helfen kostenlos nutzbare Open-Source-Anwendungen wie ReactJS oder Ionic. Es handelt sich hier um Frontend-Frameworks, also Programmiergerüste, in denen bestimmte Elemente der grafischen Benutzeroberfläche bereits fertig sind.
Es ist auch möglich, bereits bestehende Websites in PWA umzuwandeln. Dabei helfen unter anderem Tools wie der PWABuilder von Microsoft. Eine mit WordPress gebaute Website lässt sich unter anderem mit Plugins wie „Super Progressive Web Apps“, „PWA“ oder „PWA for WP & AMP“ in eine PWA umwandeln.
Progressive Web Apps werden zwar wie eine normale Website im Browser ausgeführt, benötigen aber nach der ersten Installation keine Internet-Verbindung. Anders als normale Websites können Progressive Web Apps die nativen Funktionen des mobilen Endgeräts (zum Beispiel Push-Nachrichten, Kamera oder GPS) ansteuern und ermöglich damit mehr Interaktionen.
Im Unterschied zu Web Apps können Progressive Web Apps auch offline genutzt werden. Außerdem ist es möglich, Progressive Web Apps auch im App Store anzubieten. Das geht mit Web Apps nicht.
Eine Hybrid App wird in einem browserähnlichen Container aufgerufen, wirkt aber in Bezug auf die Usability wie eine normale (native) App. Auch eine Progressive Web App wird in so einem Web Container zur Verfügung gestellt und kann wie eine Native App genutzt werden, allerdings kann man sie darüber hinaus auch wie eine Website aufrufen. Während Hybrid Apps nur über App Stores erhältlich sind, können PWA auch unabhängig davon heruntergeladen werden.
Alle vier Formate verbindet die Tatsache, dass sie browserbasiert und damit plattformunabhängig funktionieren. Während man für die Entwicklung einer Nativen App also immer mindestens zwei Versionen benötigt (eine für Android und eine für iOS), braucht man Web Apps, Hybrid Apps und Progressive Web Apps nur eine Anwendung.
Progressive Web Apps haben viele Vorteile, die wir Ihnen hier kurz zusammenfassen wollen. Der wichtigste Vorteil im Vergleich zu einer nativen App ist, dass man Progressive Web Apps schnell und kostengünstig entwickeln und warten kann, weil man keine zwei Versionen für verschiedene Endgeräte braucht. Denn eine PWA wird über den Browser ausgeführt und funktioniert damit plattformunabhängig.
Anders als eine Website und eine Web App muss man für die Nutzung einer PWA aber nicht online sein. Nachdem sie einmal heruntergeladen und installiert wurde, kann man sie offline nutzen.
Außerdem ermöglichen Progressive Web Apps im Vergleich zu Websites mehr Interaktivität und können auf native Funktionen des Handys (wie Push-Nachrichten, Kamera oder GPS) zugreifen. Im Gegensatz zu viele nativen Apps brauchen Progressive Web Apps deutlich weniger Speicherplatz (oftmals nur ein paar hundert KB im Vergleich zu mehreren MB) und bestechen im Vergleich zu Websites durch eine geringere Ladezeit. Das ermöglicht Ihren Kunden und Kundinnen schnelleres Surfen und Interaktionen ohne Wartezeit, auch Videos und Animationen verzögern das Scrollen nicht.
Die Tatsache, dass man Progressive Web Apps nicht in App Stores anbieten muss, hat den Vorteil, dass man damit Zeit und Kosten sparen kann, die mit der Anmeldung einer App für die Distributionsplattformen von Apple, Google und Co verbunden sind: Man ist unabhängig von den Bedingungen der App Stores, muss nicht darauf warten, bis eine App offiziell geprüft und zugelassen wurde und umgeht die Provisionszahlungen, die für Apps und In-App-Käufe anfallen.
Man kann eine PWA dort aber anbieten, wenn man möchte. Und auch dafür gibt es gute Gründe. Denn Kunden sind es gewohnt, in App Stores nach Apps zu suchen. Wer diese Reichweite für sich nutzen will, sollte seine Progressive Web Apps unbedingt auch im Apple App Store, Google Play Store und/oder Microsoft Store als Hybrid App anbieten.
Alle Vorteile von Progressive Web Apps im Überblick:
Den vielen Vorteilen, die Progressive Web Apps mit sich bringen, stehen natürlich auch ein paar Nachteile gegenüber. Diese sind in unseren Augen kein grundsätzliches Gegenargument. Wir möchten Sie hier aber trotzdem kurz erwähnen: Zum einen können PWA im Vergleich zu Native Apps nicht auf alle Funktionen eines mobilen Endgeräts zugreifen und es gibt einige Browser, die PWA (noch) nicht vollumfänglich unterstützen. Zum anderen sind PWA bislang noch sehr unbekannt und erklärungsbedürftig, wenn man sie nicht im App Store anbietet, sondern nur über die Website.
Aber: Es ist wirklich nicht schwer, eine PWA zu installieren und wenn sie diese paar Klicks einmal erledigt sind, ist die PWA über ein Symbol auf dem Home Screen wie eine normale App auf dem Handy oder Tablet anklickbar. Die kostengünstige Erstellung und Wartung, die Unabhängigkeit von App Stores, die schnellen Ladezeiten und die anderen eben genannten Vorteile machen Progressive Web Apps zu einer innovativen Alternative für klassische Websites und Native Apps.
Die Einsatzmöglichkeiten für Progressive Web Apps sind überaus vielfältig. Besonders empfehlenswert sind PWA für kleinere Unternehmen, die kein großes Budget für die Entwicklung und Wartung von Website und App zur Verfügung haben. Statt eine Website, eine iOS-App und eine Android-App entwickeln zu müssen, reicht es dann aus, eine PWA zu erstellen und zu pflegen.
Sinnvoll sind Progressive Web Apps auch immer dann, wenn Ihre Inhalte offline verfügbar sein sollen – zum Beispiel kann man mit einer PWA ein Städteführer erstellen, auf dem POIs hinterlegt sind und für die Routenplanung genutzt werden können. Auch für große Unternehmen, die bereits Native Apps für Ihre Kunden haben, sind Progressive Web Apps eine attraktive Technologie. Eine PWA kann unter anderem dazu genutzt werden, Mitarbeitern hilfreiche Tools für Formulare oder ein Intranet mit Push-Funktion für neue Nachrichten zur Verfügung zu stellen.
Nach wie vor wird der App-Markt nicht von Progressive Web Apps dominiert, aber es gibt einige Unternehmen, die die neue Technologie schon nutzen, unter anderem Pinterest, Spotify, Starbucks, Uber und das ZDF.
Viele fahren erstmal mehrgleisig, bieten also eine Progressive Web App zunächst als Beta-Version parallel zu ihren „echten“ Websites und Apps an. Um beispielweise beim ZDF zur PWA zu gelangen, gibt man im Browser pwa.zdf.de ein. Je nach Browser und Endgerät gibt‘s dann verschiedene Wege, die PWA zu installieren – unter iOS geschieht dies im Safari-Browser zum Beispiel über das Teilen-Menü und die Funktion „Zum Home-Bildschirm“, bei Android-Geräten und dem Chrome-Browser über die Funktion „Zum Startbildschirm“. Am Desktop startet man die App-Installierung über das Plus- oder Download-Symbol.
Sowohl auf dem Desktop als auch auf dem Mobilgerät ermöglichen viele Browser die Installation und Nutzung von PWA, unter anderem Chrome, Edge, Opera Mobile, Safari und Samsung Internet. Bei diesen Browsern kann man die PWA über Funktionen wie „Zum Home-Bildschirm hinzufügen“ installieren. Anschließend lässt sich die PWA über das Symbol auf dem Home Screen öffnen und wie eine App nutzen (also ohne dass man den Browser und eine URL sieht).
Firefox hingegen unterstützt dies nicht. Allerdings kann die PWA hier dann zumindest wie eine normale Website genutzt werden.
Außerdem gibt es hinsichtlich der nativen Funktionen Unterschiede bei den Browsern: Nicht alle Browser unterstützen alle Funktionen, die in einer PWA theoretisch möglich sind: Eine über den Safari-Browser genutzte PWA kann zum Beispiel keine Push-Nachrichten senden.
Falls Sie noch keine Website haben, sollten Sie für die Entwicklung einer PWA mit unserer Hilfe etwa ein bis drei Monate einplanen – da ist dann alles dabei: von der ersten strategischen Beratung bis hin zur technischen Umsetzung. Ganz anders sieht das aus, wenn Sie bereits eine Website haben und diese mit zusätzlichen Funktionen einer PWA ergänzen wollen. In diesem Fall ist je nach Umfang ein Zeitfenster von etwa ein bis vier Wochen realistisch.
Wenn Sie noch keine Website haben, wird eine PWA wie eine normale Website auf der Basis von Webtechnologien wie HTML und JavaScript programmiert. Dafür kann man unter anderem Open-Source-Frameworks wie ReactJS oder Angular in Kombination mit Ionic oder Mobiscroll nutzen – aber auch alle anderen Website-Builder-Softwares und Content-Management-Systeme wie WordPress oder Drupal.
Falls Sie Ihre bestehende Website in eine PWA umwandeln wollen, gibt es ebenfalls eine Reihe von Tools oder Plugins, die Ihnen dabei helfen.
Mit dem kostenlos nutzbaren PWABuilder von Microsoft können Sie zum Beispiel die URL Ihrer Website eingeben und kostenlos prüfen lassen, welche Voraussetzungen bereits erfüllt sind und was Sie noch anpassen müssen.
Falls Ihre mit WordPress gebaute Website in eine PWA umwandeln möchten, können Sie Plugins wie „Super Progressive Web Apps“, „PWA“ oder „PWA for WP & AMP“ nutzen.
Grundsätzlich müssen für die Transformation einer Website in eine PWA drei Voraussetzungen erfüllt sein:
1. Ihr PWA muss eine https-URL besitzen
2. Sie benötigen ein „Web App Manifest“, das ist eine Datei, die Metadaten zu Ihrer App enthält
3. Sie brauchen einen sogenannten „Service Worker“, der die Inhalte Ihrer PWA offline verfügbar macht.
Und wenn Sie jetzt denken: Das klingt alles super, aber ich hätte gerne professionelle Unterstützung bei der Erstellung einer PWA … Dann rufen Sie uns an!
Wir beraten Sie gerne, welches App-Format für Ihre Unternehmensziele das Beste ist und setzen Ihre Wünsche mit modernsten Webtechnologien um.
Von Produktneuheiten bis hin zu praxisnahen Tipps für die Entwicklung mit den Zoho-Entwicklerplattformen: In unserem Know-how-Bereich bleiben Sie über alles rund um Zoho auf dem Laufenden – damit Sie das Beste aus Ihrer Lösung herausholen.
Bei uns erhalten Sie alle Dienstleistungen, die Sie benötigen, aus einer Hand. Angefangen bei der Konzeption bis hin zur Umsetzung kümmern wir uns um das Hosting, die Wartung und unterstützen Sie bei Ihrer digitalen Transformation.
codafish ><> together we dive into digital.
00800 26323474
hello@codafish.netRufen Sie uns gerne an, um einen kostenlosen ersten Beratungstermin zu vereinbaren. Wir freuen uns auf Ihre Kontaktaufnahme!
Die übermittelten Daten werden verschlüsselt übertragen und gemäß den datenschutzrechtlichen Bestimmungen verarbeitet. Unsere Datenschutzhinweise finden Sie hier.
Erhalten Sie vom ersten Tag an maßgeschneiderte digitale Lösungen. Unser Team entwirft, entwickelt und optimiert Websites, Systeme und Strategien, die genau auf Ihre Geschäftsprozesse und Wachstumsziele zugeschnitten sind.
Rufen Sie uns gerne für ein kostenloses Erstgespräch an oder buchen Sie direkt einen Termin. Wir freuen uns Sie kennzulernen!
