Progressive Web Apps

Du kennst das Problem vielleicht: Du rufst eine Website über Dein Smartphone auf und stellst fest, dass die Seite nicht für mobile Geräte optimiert ist. Die Schrift ist viel zu klein, das Scrollen funktioniert irgendwie auch nicht richtig und die Inhalte laden nur zur Hälfte.

Eine Lösung dafür, wenn die Website nicht einfach herkömmlich – also durch ein Responsive Webdesign – an das passende Endgerät angepasst werden soll: Progressive Web Apps.

Progressive Web Apps Definition

Also, das wichtigste zuerst: Was ist eine Progressive Web App – abgekürzt PWA?

Es handelt sich also im Grunde einfach um eine Kombination aus Website und nativer App. Doch wie werden PWAs aus SEO-Sicht betrachtet?

Progressive Web Apps SEO

Können PWAs SEO gerecht sein? Die Antwort ist schlicht: ja. PWAs können, wie normale Webseiten auch indexiert werden und somit in der Googlesuche ranken. Auch native Apps können theoretisch indexiert werden, allerdings bleibt hier weiterhin der Nachteil, dass sie installiert werden müssen, bevor man sie verwenden kann.

Vorteile Progressive Web Apps

Doch was sind nun eigentlich die Vorteile von PWAs?

• PWAs besitzen keine Beschränkung auf eine bestimmte Plattform und können mit jedem mobilen Endgerät verwendet werden.
• Es ist möglich eine PWA bzw. ihre Inhalte zu indexieren und damit ranken zu lassen.
• Die Inhalte einer PWA können bei jeder Verbindungsqualität genutzt werden – also auch offline.
• Eine PWA benötigt keinen App Store – die App muss also selbst vertrieben werden.
• PWAs kosten in ihrer Entwicklung deutlich weniger als herkömmliche native Apps. Außerdem ist die Wartung weniger aufwendig.
• Kontinuierliche Updates durchführbar.
• Zugriff auf Kamera, Mikrofon, Sensorik sowie Push-Nachrichten und Geolocation sind für PWAs ebenfalls möglich.

Gegenüber normaler Websites haben PWAs also eigentlich nur Vorteile. Doch wie sieht es beim Vergleich mit nativen Apps aus?

Vorteile von PWAs gegenüber nativer Apps:

• Müssen nicht extra über einen App Store installiert werden
• Einfacher zu erstellen
• Leichter zu crawlen
• Nicht an ein Betriebssystem gebunden

Nachteile Progressive Web Apps

Neben den Vorteilen gibt es auch ein paar Gründe, die gegen die Verwendung von PWAs sprechen:

• PWAs eignen sich nicht so gut für hardwarenah programmierte Anwendungen und auch sehr umfangreiche, offline verwendbare Apps sind nicht so leicht umsetzbar.
• Der Vorteil, dass kein App Store benötigt wird, kann auch ein Nachteil sein, da die Anwendung so deutlich schwerer gefunden wird. Einfach, weil die meisten Leute zuerst im App Store nach einer App suchen.
• Es ist ein größerer Fokus auf die Web-Infrastruktur und Caching-Technologien vonnöten, damit Inhalte auch Offline zur Verfügung stehen.
• Und zu guter Letzt ist nicht jedem bekannt, dass PWAs auch installiert werden können, um sie – wie eine native App – als Icon auf den Bildschirm eines Smartphones abzulegen.

Progressive Web Apps Funktionsweise

Wie funktionieren PWAs? Grob gesagt funktionieren die Apps mithilfe sogenannter "Service Worker" – das ist im Grunde einfach ein JavaScript. Das Service-Worker-Script sorgt dafür, dass im Hintergrund Inhalte in den Cache geladen werden und somit keine Internetverbindung benötigt wird.

Um die Plattformunabhängigkeit umzusetzen, wird ein "Application Shell" verwendet. Das sorgt dafür, dass Inhalte dynamisch, je nach verwendetem Endgeräte, geladen werden.

Weiterhin wird noch ein "Web App Manifest" in Form einer JSON-Datei benötigt. Dies ermöglicht es Nutzern, die PWA wie eine native App auf dem Endgerät zu speichern. Die App wird dabei nicht vollständig installiert, stattdessen wird lediglich die Application Shell, also das Grundgerüst, abgespeichert.

Progressive Web Apps Beispiele

Es folgen nun noch ein paar Anwendungsbeispiele, bei denen bereits PWAs verwendet werden – vielleicht nutzt Du die eine oder andere App sogar selbst.

• Starbucks
• BMW
• 2048 Game
• Uber
• Pinterest
• Spotify
• Twitter
• Google Maps Go
• Telegram

Ein weiterer Bereich, auf den kurz eingegangen werden soll, ist die Nutzung von PWA in der Marketingbranche.

Progressive Web Apps Marketing

Eine Branche in der PWAs eine immer wichtigere Rolle spielen ist das Marketing. Aspekte von PWAs, die für das Marketing besonders nützlich sind, sind folgende:

• Bieten eine vergleichbar gute User Experience wie native Apps und sind dabei kostengünstiger in der Produktion.
• Kombinieren das Beste von Web-Apps sowie nativen Apps.
• Vorteile bei der Suchmaschinenoptimierung (SEO), da PWAs indexierbar sind und somit auch bei der Websuche angezeigt werden.

Auch im Marketing muss der Fakt berücksichtigt werden, dass PWAs nicht in App Stores angeboten werden. Bei kleineren Firmen wird das kaum eine Auswirkung haben, da deren Apps in der Regel ohnehin zufällig entdeckt werden.

Bei größeren Unternehmen kann es jedoch tatsächlich eher ein Nachteil sein. Einfach, weil Kunden es über die Jahre gewohnt sind, Apps aus App Stores herunterzuladen. Außerdem kann es ein negatives Licht auf eine Firma werfen, wenn sie eine App bereitstellt, die nicht in einem App Store zu finden ist.

Progressive Web Apps Tools

Nun soll noch geklärt werden, welche Tools Du verwenden kannst, um eine PWA zu erstellen.

Nicht außer Acht gelassen werden soll zudem das Konzept AMP.

Progressive Web Apps – AMP

Doch was ist AMP eigentlich?

Das AMP-Projekt wurde von Google ins Leben gerufen, ist Open-Source und soll im Grunde dafür sorgen, dass das Anzeigen von Seiten auf mobilen Plattformen beschleunigt wird. AMP ist dabei ein Webkomponenten-Framework, mit dessen Hilfe PWAs verwendet werden können.