TRINIDAT-WIKI

Progressive Web Apps

Alles über Progressive Web Apps

Alles über Progressive Web Apps

App ja oder nein? Für Unternehmen, die auf ihrer Seite viele Inhalte anbieten oder einen Online-Shop betreiben, stellt sich irgendwann genau diese Frage. Doch die Entwicklung einer App ist teuer, außerdem muss sie regelmäßig aktualisiert werden.

Eine Alternative ist die sogenannte Progressive Web App (PWA), die direkt von der Website aus installiert wird. Die Installation über den App Store inklusive Freigabeprozesse entfällt. Das macht die PWA einfach und kostengünstig. Ein weiterer Pluspunkt: Die PWA wird wie eine Website über die URL aufgerufen. Dadurch bieten sich zusätzliche SEO-Möglichkeiten an. Google priorisiert bereits PWAs gegenüber traditionellen Websites oder regulären mobilen Anwendungen. User stoßen also leichter darauf, was die Sichtbarkeit des Produkts erhöht.

Sie haben Fragen?
Wir haben die Antworten!

Wir entwickeln Ihre Progressive Web App. Einfach, schnell, kostengünstig.

Jetzt beraten lassen

Wie funktioniert eine PWA?

Eine Progressive Web App ist im Prinzip eine mobile Website oder Web App, die jedoch speziell programmiert wurde. So können PWAs ganz einfach auf Smartphone, Tablet oder Desktop-Rechnern installiert werden. Sie haben eine schnellere Ladezeit als Websites und verfügen über eine Offline-Funktion. Zwar können auch klassische Webanwendungen browserbasiert auf mobilen Betriebssystemen wie Android oder iOS laufen, aber eine PWA macht es den Usern einfacher. Denn die Funktionen der PWA passen sich dem Nutzungsrahmen an. Selbst wenn Endgerät und/oder Browser nicht mit allen Funktionen der Anwendung kompatibel sind, kann die App dennoch genutzt werden.

Eine PWA wird im Hintergrund geladen, wenn ein User zum ersten Mal die Seite besucht. Mit nur wenigen Klicks lässt sich die Progressive Web App auf Desktop-PCs und mobilen Endgeräten wie Smartphones oder Tablets installieren. Danach funktionieren PWAs fast genauso wie „normale“ Apps. Für den User sind die Unterschiede meist nicht zu erkennen. Mit einem Webbrowser im Vollbildmodus bemerken die Nutzer nicht, dass sie eigentlich auf einer Website sind. Bekannte PWAs stammen zum Beispiel von Trivago, Pinterest und Booking.

Progressive Web Apps-1
Progressive Web Apps-2
Progressive Web Apps-3

» Eine PWA ist eine kostengünstige und einfache Möglichkeit, um von der Beliebtheit von Apps zu profitieren. Das einfache Handling und die schnelle Ladezeit sind Pluspunkte gegenüber klassischen Websites. «

Christoph Spielmann,
Geschäftsführer von trinidat


Progressive Web Apps vs. Native Apps

Bei der Entscheidung für oder gegen eine PWA lohnt es sich, „echte“ Apps näher anzuschauen. Native Apps sind Anwendungen, die für eine bestimmte Zielplattform programmiert und installiert werden. Sie funktionieren nur auf einem Betriebssystem, für jede andere Plattform muss die App neu angepasst werden. Native Apps können ausschließlich über die jeweiligen App Stores bezogen und installiert werden. Das ist vor allem sinnvoll, wenn es sich um Apps mit einem Abo-Modell oder In-App-Käufen handelt. Unternehmen, die aus Imagegründen in einem App Store vertreten sein wollen oder weil sie dort ihre Zielgruppe erreichen wollen, müssen daher in eine native App investieren. Die Entwicklung von Native Apps bietet sich vor allem für komplexe Spielanwendungen an. Je mehr Schnittstellen benötigt werden, umso teurer ist die Entwicklung. Native Apps haben außerdem einen hohen Funktionsumfang, der beispielsweise die Verwendung von Bluetooth und Indoor-Geolocation einfach macht.

» Eine PWA ist eine kostengünstige und einfache Möglichkeit, um von der Beliebtheit von Apps zu profitieren. Das einfache Handling und die schnelle Ladezeit sind Pluspunkte gegenüber klassischen Websites. «

Christoph Spielmann,
Geschäftsführer von trinidat

Progressive Web Apps vs. Native Apps
Gängige Browser unterstützen PWA

Gängige Browser unterstützen PWA

Progressive Web Apps sind eine Art von Anwendungssoftware, die über das Web bereitgestellt werden und gängige Webtechnologien wie HTML, CSS und JavaScript verwenden. Das ist der größte Unterschied zwischen einer PWA und einer klassischen nativen App und zeigt, warum die Entwicklung einer PWA wesentlich kostengünstiger ist. Grundsätzlich sollen PWAs auf allen Plattformen funktionieren, die einen standardkonformen Browser verwenden und auf Desktop- und Mobilgeräten verlässlich laufen. Eine PWA wird daher so programmiert, dass sie in einem Webbrowser bereitgestellt werden kann. Das funktioniert bei Chrome, Opera, Edge, Firefox und auch bei Safari unter iOS und iPadOS. Allerdings gibt es einige Einschränkungen. Der iOS-Browser Safari unterstützt beispielsweise nicht alle Funktionen der PWA. So werden das Hinzufügen zum Home-Bildschirm sowie Push-Benachrichtigungen nur in Teilen unterstützt. Ganz anders dagegen bei Chrome. Da Google die PWA fördert, unterstützt Chrome alle Funktionen sehr gut.


Was sind die Vorteile einer PWA?

Mit einer PWA schlagen Unternehmen gleich mehrere Fliegen mit einer Klappe. Zunächst einmal ist es eine kostengünstige und einfache Möglichkeit, um von der Beliebtheit von Apps ganz grundsätzlich zu profitieren. Denn die meisten Menschen bevorzugen mittlerweile Apps. Das einfache Handling und die schnelle Ladezeit sind Pluspunkte gegenüber klassischen Websites. Im Gegensatz zu einer nativen App muss eine Progressive Web App nicht im App Store aktiv gesucht und installiert werden. Zwar verbringen User viel Zeit in ihrem bekannten App Store und finden so neue Apps, aber wenn es um Informationen geht, sind Suchmaschinen gefragt. Und da hat Google weltweit mit einem Marktanteil von 80 Prozent bei der mobile Suche die Nase vorn. Auf eine PWA stoßen User daher ganz einfach beim Googlen. Sobald der Nutzer eine solche Website besucht, zeigt der Browser einen Button an, mit der die App installiert werden kann. Ein Klick genügt und schon läuft die PWA wie eine gewöhnliche App auf dem mobilen Endgerät.

Selbst wenn der User die App nicht installiert, wird durch die spezielle Technologie die PWA beim ersten Besuch im Cache des Browsers gespeichert. Das bedeutet, bei jedem zukünftigen Aufruf läuft die Seite schneller. Das schlägt sich auch im Google-Ranking nieder. Das PWA-Angebot lohnt sich daher für Unternehmen immer und stellt eine typische Win-Win Situation dar.

Ein weiterer Vorteil: Die PWA kann als Icon auf dem Bildschirm ablegt werden. Einmal geladen, liegen alle Daten im internen Speicher des Smartphones und funktionieren auch ohne Internetverbindung. Steht diese wieder zur Verfügung, synchronisiert sich die App und lädt gegebenenfalls Updates herunter.

Was sind die Vorteile einer PWA? Hintergrund

Welche Möglichkeiten bietet eine PWA?

Eine PWA ist für Unternehmen und Websitebetreiber interessant, deren Inhalte oder Angebote auch offline verfügbar sein sollen. Die folgenden Beispiele zeigen, die Einsatzmöglichkeiten einer PWA.

Bereitstellung von
Formularen:

Formulare eignen sich ausgezeichnet, um Daten von Leads zu sammeln. Mit einer PWA ist das auch offline möglich. Das bedeutet: Daten lassen sich überall erfassen, auch auf Messen oder bei Veranstaltungen.

Interaktive Apps:
 

Kleine, einfach Quiz- oder Spiele-Apps lassen sich mit einer PWA kostengünstig entwickeln. Mit der komplexen Gaming App aus dem App Store können sie nicht konkurrieren. Doch das ist auch nicht der Sinn. Vielmehr geht es darum, mit lustigen Eyecatchern und interaktiven Angeboten Aufmerksamkeit zu erzielen und Leads zu generieren.

Offline-Kataloge und Preislisten:

Außendienst und Vertrieb sind auf aktuelle Informationen angewiesen, die sie ihren Kunden vor Ort präsentieren können. Offline-Preislisten und -Kataloge können jederzeit auf Smartphone oder Tablet abgerufen werden. Sobald Internet verfügbar ist, wird der Katalog im Hintergrund automatisch aktualisiert.


Wie wird eine PWA erstellt?

Eine PWA lässt sich einfacher und schneller erstellen als die meisten vermuten. Jede professionelle Website kann ohne großen Aufwand um eine PWA-Funktion erweitert werden. Denn Progressive Web Apps sind eine Ergänzung, die auf den normalen Web-Technologien HTML, CSS und JavaScript basieren. Die Voraussetzung dafür ist Responsive Webdesign, das die automatische Anpassung der Webinhalte an mobile Geräte garantiert. Um eine solche responsive Website als Progressive Web App anzubieten, ist noch ein sogenannter Service Worker notwendig, der die technische Basis bildet. Service Worker erweitern Webanwendungen um wichtige Features von Native Apps wie Offline-Fähigkeit, Push-Notifications, Background-Sync oder Performance-Beschleunigung. Bei Service Workern handelt es sich um einen reinen JavaScript-Code, der in einem eigenen Thread neben der eigentlichen Web-App läuft. Hinzu kommt ein sogenanntes App-Manifest, das den Look der App sowie des Icons festlegt. Gut zu wissen: Die für PWA notwendigen Funktionen Service Worker und App Manifest können auf jeder responsiven Website nachgerüstet werden.

Für wen eignet sich eine PWA?

Für wen eignet sich eine PWA?

Der große Pluspunkt der Progressive Web App ist ihre einfache, kostengünstige Umsetzung. Für Unternehmen, die ihr Budget schonen oder die Möglichkeiten einer App erst einmal ausprobieren möchten, ist die PWA ideal. Ist ein komplexer Aufbau nicht vorgesehen, dann kann man auf die Entwicklung einer nativen App ohnehin meist verzichten. Eine Progressive Web App lässt sich außerdem schnell umsetzen. Von der Idee bis zur Umsetzung dauert es nicht lange. Unternehmen können daher ihr Produkt sofort bei der Zielgruppe testen und gegebenenfalls anpassen.

Christoph Spielmann, trinidat-Geschäftsführer

Christoph Spielmann, trinidat-Geschäftsführer

Möchten Sie mehr über Progressive Web Apps erfahren?

Christoph Spielmann freut sich auf Ihren Anruf oder Ihre Mail. Finden Sie jetzt in einem kostenfreien Beratungsgespräch heraus, ob eine PWA das Richtige für Sie ist.


Dies ist ein Pflichtfeld
Dies ist ein Pflichtfeld
Dies ist ein Pflichtfeld
Dies ist ein Pflichtfeld

Weitere Beiträge aus unserem Wiki