Mobile Optimierung: Progressive Web Apps vs. Native Apps

Neben der für Mobilgeräte optimierten Webseite sind Apps eine wichtige Option zur Optimierung der Nutzerfreundlichkeit. Mit Progressive Web Apps und Native Apps stehen Webseitenbetreibern gleich zwei Optionen offen. Was es damit auf sich hat und welche Option für SEO besser geeignet ist, erfährst Du in diesem Artikel.

Mit dem Aufkommen von Smartphones hat sich die Internetnutzung stark verändert. Internetinhalte können je nach Netzabdeckung fast flächendeckend überall abgerufen werden. Der Nutzer kann jederzeit einkaufen, sich informieren oder kommunizieren. Webmaster sollten deshalb ihr Angebot grundsätzlich für Mobilgeräte optimieren. Hinzu kommt, dass Mobile Friendliness ein Rankingfaktor in der mobilen Suche ist. Doch darüber hinaus können auch Apps die gewünschten Inhalte für Smartphone und Tablet optimiert liefern.

Allgemeine Informationen zu Apps

Mithilfe von Apps wird der Zugriff auf Inhalte mit dem Smartphone deutlich erleichtert. Die Bedienung ist fast immer ohne Texteingabe möglich. Zugleich wird der Nutzer auf das Angebot des Unternehmens fokussiert. Es lenkt weder eine Browserleiste ab, noch kann der Nutzer durch den Zurück-Button auf eine andere Seite gelangen. Erst durch das Schließen der App wird diese verlassen.

Apps bieten außerdem den Vorteil, dass sich damit die Kundenbindung stärken lässt. Wer sich für das Angebot interessiert und die entsprechende App installiert, wird sich mittelfristig länger damit auseinandersetzen. Laut einer Statistik nutzen mehr als 85 Prozent der Nutzer ihr Smartphone mit Apps. Webseitenbetreiber, die mit ihrem Webangebot mobile Nutzer erreichen möchte, sollten deshalb die Beliebtheit von Apps berücksichtigen.

Im Gegensatz zu Webseiten müssen Apps jedoch zunächst auf dem Smartphone installiert werden, bevor sie ein Nutzer verwenden kann. Dabei können zwei verschiedene Typen von Apps zum Einsatz kommen: Native Apps und Progressive Web Apps.

1. Native Apps

Native Apps müssen speziell für ein bestimmtes Betriebssystem entwickelt werden. Was einerseits höhere Entwicklungskosten mit sich bringt, ist auf technischer Seite sehr sinnvoll, denn native Apps können alle Vorzüge eines Betriebssystems nutzen.

So können diese Apps die vorhandene Hardware wie Kameras oder Sensoren bestmöglich einsetzen, da sie für das entsprechende Betriebssystem optimiert sind.

Weitere Vorteile nativer Apps:

• Native Apps können Daten bis zum Limit des vorhandenen Speichers auf dem mobilen Endgerät sichern.

• Mit kostenpflichtigen nativen Apps kann der Umsatz eines Unternehmens über den jeweiligen App Store erhöht und somit die Entwicklungskosten eingespielt werden.

• Indem native Apps im Store des jeweiligen Anbieters gehostet werden, müssen die Entwickler sich nicht direkt um den Vertrieb kümmern.

• Nach der Installation wird das App-Icon automatisch auf dem Home-Screen gelistet.

Allerdings haben native Apps nicht nur Vorzüge, so müssen zum Beispiel mehrere App-Versionen für die unterschiedlichen Betriebssysteme entwickelt, veröffentlicht und gepflegt werden. Bei Updates der jeweiligen Betriebssysteme müssen Updates bei der App über den jeweiligen App Store durchgeführt werden.

Abbildung 1: Aktualisierung von Apps über den Apple App Store.

Ein großer Nachteil von nativen Apps ist auch der hohe Kostenfaktor. Die Kosten betreffen nicht nur die App-Entwicklung an sich, sondern auch den Unterhalt der App. Neben dem eigentlichen CMS muss dann noch eine weitere Anwendung gepflegt und kontinuierlich aktualisiert werden.

Native Apps sind alle Apps, die in den jeweiligen App Stores von Google, Apple oder Microsoft gelistet werden und dort von Nutzern heruntergeladen werden können. Gängige Anwendungsmöglichkeiten für native Apps sind Smartphone-Spiele, mobile Versionen von Onlineshops oder spezielle Services von Dienstleistern und Unternehmen, die nicht oder nur selten über eine Webseite angeboten werden.

Perfekte Beispiele für eine zentrale native App eines Unternehmens sind Instagram oder WhatsApp. Ein Beispiel für einen ausgelagerten Service ist die WeatherApp von Yahoo!.

Abbildung 2: Instagram ist ein typisches Beispiel für eine native App.

2. Progressive Web Apps (PWA)

Progressive Web Apps beruhen auf einer Google-Initiative. Grundsätzlich handelt es sich dabei im eigentlichen Sinne nicht um Apps, sondern um eine modifizierte Webseite, die sich an das jeweilige Ausgabegerät oder den verwendeten Browser anpasst. Das Funktionsprinzip der PWAs basiert auf dem Ansatz des Progressive Enhancement, also der Idee, dass eine Webseite sukzessive an das technische Setting eines Endgeräts angepasst werden kann.

Die Entwicklung von Progressive Web Apps basiert auf offenen Webstandards. Dabei wird das Markup von CSS getrennt, ebenso werden Inhalt und Design voneinander getrennt. Auch JavaScript von diesen beiden Elementen separiert. Auf diese Weise wird erreicht, dass alle Inhalte immer verfügbar sind und auf dem Gerät angezeigt werden können. Zugleich wird dadurch eine minimale Funktionalität der PWA sichergestellt, und das unabhängig davon, ob das Ausgabegerät oder der Browser JavaScript oder CSS unterstützen oder nicht.

Wird eine Progressive Web App aufgerufen, wird die App Shell als Basis im Cache des Geräts oder des Browsers abgelegt. Danach können die Kernelemente sofort geladen werden. Die App Shell selbst besteht aus dem Minimum an HTML, CSS und JavaScript, das eine Webseite für die Performance benötigt. Es handelt sich somit um eine Art Code-Bundle, womit das User Interface auf dem Gerät bereitgestellt wird und der Inhalt dann dynamisch über eine API geladen werden kann.

Abbildung 3: Funktionsweise einer App Shell. (Quelle)

Im Gegensatz zu mobilen Webseiten verfügen PWAs über viele Eigenschaften, die auch native Apps mit sich bringen. Grundsätzlich verbinden Progressive Web Apps die Vorzüge der nativen Apps mit den Vorzügen responsiver, mobil optimierter Webseiten.

Zu den Gemeinsamkeiten von PWAs und nativen Apps zählen die folgenden Punkte:

• Die App kann Push-Nachrichten an den Nutzer schicken.

• Die App kann mit einem Icon auf dem Bildschirm des Smartphones gespeichert werden.

• Viele Funktionen einer PWA können auch ohne oder mit nur sehr langsamer Internetverbindung genutzt werden.

Allerdings sind PWAs im Nachteil, wenn es um die Integration von Hardware geht. So können zum Beispiel keine Fingerabdrucksensoren oder Bluetooth in die Funktionalität integriert werden. Aktuell sind insbesondere noch Probleme mit Apples iOS vorhanden, da das Betriebssystem die Progressive Web Apps noch nicht vollumfänglich unterstützt. Somit bleibt die Verwendung von PWAs vorerst noch auf Android-Geräte beschränkt. Dort funktionieren die speziellen Apps jedoch mit allen möglichen und nutzbaren Funktionen.

Vorteile von PWAs gegenüber nativen Apps:

• Es wird keine separate Code-Basis für die Programmierung benötigt, da PWAs auch mit HTML5 entwickelt werden können.

• Progressive Web Apps können über die Google-Suche gefunden werden, da sie komplett indexierbar sind.

• Updates müssen nicht über einen App Store aktualisiert werden. Stattdessen wird die Webapp mit Hilfe der Service Worker auf den jeweils neuesten Stand gebracht.

• Eine PWA kann auch offline genutzt werden, indem sie Inhalte und Funktionen in den Cache des jeweiligen Geräts lädt. Ist wieder eine Internetverbindung verfügbar, lassen sich Funktionen und Inhalte mit dem Server synchronisieren.

• Die Kosten für die Entwicklung sind deutlich niedriger als bei nativen Apps. Das liegt auch daran, dass eine PWA auf allen Plattformen funktioniert und keine separaten Versionen je nach Endgerät benötigt werden.

• Für den Vertrieb der App wird kein Store benötigt und der Nutzer muss nichts installieren, da die App mit dem Browser funktioniert.

• Nutzer können einfacher zwischen Apps hin- und herwechseln und Inhalte der PWA leichter teilen. Ebenso ist gibt es geringere Brüche beim Anklicken von Links und dem Wechsel zu einer Webseite.

• PWAs laden sofort, dadurch weisen sie eine deutlich geringere Ladezeit als native Apps auf.

• Verbindungen mit der Progressive Web App sind per SSL verschlüsselt und somit sicherer als Webverbindungen aus herkömmlichen Apps. Der Server muss jedoch dafür eingerichtet werden.

• PWAs sind responsive und passen sich an jedes Ausgabegerät an.

Anwendungsmöglichkeiten für Progressive Web Apps

PWAs können grundsätzlich alle Funktionen nutzen, die auch mit nativen Apps genutzt werden können, da der Zugriff auf die Hardware des Endgeräts möglich ist. In der Praxis eignen sich besonders Anwendungen, die wechselnde Inhalte liefern, die jedoch ohne Neuinstallation oder Updates über einen App Store aktualisiert werden.

Hierzu zählen zum Beispiel News-Webseiten oder die von Google entwickelte Wetter-App.

Abbildung 4: Google Weather PWA.

Auch das Angebot von Flipboard ist über eine Progressive Web App abrufbar. Zunächst wird der Browser, wie bei mobilen Webseiten üblich, genutzt.

Abbildung 5: Flipboard als PWA im Browser.

Später erhält der Nutzer einen Hinweis, ob er die PWA auf dem Homescreen speichern möchte.

Das Ergebnis sieht dann aus wie das Icon einer nativen App. Allerdings ist das Icon einem Lesezeichen ähnlicher, da die PWA eine modifizierte mobile Webseite ist.

Weitere Beispiele für aktuelle PWAs finden sich auf der Webseite pwa.rocks.

Wichtige Aspekte für die Entwicklung von PWAs

Für die Entwicklung benötigen Webmaster idealerweise zunächst das Codelab für PWAs von Google. Auf der Basis der Firebase-Plattform können dann die ersten PWAs entworfen werden. Die von Google im Jahr 2014 übernommene Plattform bietet viele Möglichkeit, um Funktionalität und Design von PWAs zu verändern. Zugleich lässt sich die App damit auf verschiedene Zielgruppen ausrichten. Zudem können Tests ganz einfach durchgeführt werden. Ein Tracking der App ist mit Firebase ebenfalls möglich. So können Firebase-Anwendungen mit Google-Analytics verknüpft werden.

Ein sehr ausführlicher Einstieg zur Programmierung von Progressive Web Apps findet sich hier von Addy Osmani, einem Google-Chrome-Entwickler.

Welche App-Version ist für SEO sinnvoller?

Bisher war Suchmaschinenoptimierung bei Apps auf eine gute Listung in den jeweiligen App Stores sowie auf App-Indexing beschränkt. Mit Hilfe des von Google eingeführten App-Indexings ist es möglich, dass Nutzer beim Verwenden der Google-Such-App Linkempfehlungen in der Google-Suche erhalten, die direkt auf Inhalte einer installierten App verweisen.

Hierfür muss jedoch der Quellcode der Webseite bearbeitet werden. Dort werden Deep-Links im head-Bereich hinterlegt, die zur jeweiligen Unterseite der App führen. Die Deep-Links müssen jeweils für iOS und Android angelegt werden. Sie können darüber hinaus auch in der XML-Sitemap hinterlegt werden, damit der Googlebot darauf aufmerksam gemacht wird.

Abbildung 6: Beispiel für App-Indexing bei Zalando.

Mit der Weiterentwicklung der Progressive Web Apps gibt es jedoch für SEO mehr Möglichkeiten. Ein großer Vorteil besteht zum Beispiel darin, dass die App zum einen per Link geteilt und mit einem Browser abgerufen werden kann. Diese Links können auch Suchmaschinen indexieren. Somit besteht die Möglichkeit, dass einzelne URLs der PWA in den SERPs gelistet werden. Hier ist jedoch ausschließlich von den mobilen SERPs auszugehen, da diese Form der App überwiegend auf mobile Endgeräte ausgerichtet ist.

Auch wenn App-Indexing die Möglichkeit zum Indexieren von nativen App-Inhalten bietet, müssen bestimmte Voraussetzungen gegeben sein, damit der Anwender tatsächlich einen Nutzen davon hat. So muss er die App tatsächlich installiert haben, um durch das Anklicken zur Zielseite in der App zu gelangen oder er muss die App zuerst noch installieren. Darüber hinaus ist eine Anpassung des Quellcodes erforderlich, die zusätzlichen Aufwand bedeutet.

Fazit

Progressive Web Apps stehen noch ziemlich am Anfang ihrer Entwicklung und Verbreitung. Sie werden bis jetzt nur von wenigen Unternehmen genutzt. Wenn sich die mobile Internetnutzung jedoch in gleichem Maße weiterentwickelt wie in den letzten Jahren, werden Webmaster und SEOs vielleicht nicht mehr vor der Frage stehen "Native App oder PWA?", sondern vielmehr entscheiden müssen, ob überhaupt eine eigene Webseite programmiert werden muss oder lediglich eine Web-App.

Bis es dahin kommt, stellen PWAs eine sinnvolle Erweiterung der mobilen Webseite dar. So können zum Beispiel Push-Nachrichten oder eine Offline-Nutzung zu einem höheren Nutzer-Engagement führen als bei herkömmlichen Webseiten.

So nutzen Apple Macbooks heute schon Apps, ebenso Microsoft-Rechner. Gleiches gilt für Tablets jeglicher Anbieter. Denkbar ist somit, dass die Progressive Web App eines Tages die Webseite ersetzen kann. Für Entwickler, Shopbetreiber und Unternehmen hätte dieser Fortschritt den Vorteil, dass Webseiten noch mehr Funktionen nutzen können, die auf die jeweiligen Endgeräte zugeschnitten sind. Die einzelnen Geräte benötigen dann weder App Store noch weitere Zusatzfeatures. Einzig ein Browser bliebe als Zugang zu Webinhalten übrig. Damit können heute Progressive Web Apps als eine Art Kampfansage von Google an Apples App Store gelten. Denn darüber macht der Konzern aus Cupertino den größten Teil seines Umsatzes. Doch unabhängig vom Konkurrenzdenken der Internetgiganten werden Progressive Web Apps das mobile Web noch nutzerfreundlicher machen. Durch den im Vergleich zu nativen Apps deutlich geringeren Programmieraufwand sind PWAs außerdem konstengünstiger zu realisieren und somit von einer breiteren Masse an Unternehmen nutzbar.

Aus SEO-Sicht könnten PWAs langfristig im Ranking von Vorteil sein, da sie schnell laden und für eine hohe Nutzerinteraktion sorgen. Wie bei allen neueren Entwicklungen im Web gilt auch hier: Wer so früh wie möglich damit beginnt, kann auch so früh wie möglich Erfahrungswerte sammeln, die für die Weiterentwicklung und Optimierung des eigenen Angebots wichtig sind.