Suchmaschinenoptimierung (SEO)
Auf nach vorn – organischen Traffic steigern
Progressive Web Apps
Stand: 15.08.2022
Progressive Web Apps (PWA) sind Webseiten mit speziellen Eigenschaften, welche sich besonders für die Nutzung auf mobilen Endgeräten eignen. Die besonderen Features von PWAs finden sich dabei in der Installierbarkeit, der Offlinefähigkeit und die Unterstützung von Push-Benachrichtigungen.
Progressive Web Apps stellen laut Google das App-Modell der Zukunft dar. Die neue Technologie könnte das Ende für herkömmliche App-Stores bedeuten, da sie das Herunterladen von Anwendungen über den Browser ermöglicht, welcher ohnehin auf jedem Endgerät installiert ist. Native Applikationen könnten in der Zukunft also durch plattformübergreifende und progressive Apps abgelöst werden.
Definition
Progressive Web Apps (PWA) sind Webseiten mit speziellen Eigenschaften, welche sich besonders für die Nutzung auf mobilen Endgeräten eignen. Die besonderen Features von PWAs orientieren sich an nativen Apps und finden sich dabei in der Installierbarkeit, der Offlinefähigkeit und die Unterstützung von Push-Benachrichtigungen. PWAs werden allerdings über eine URL in einem Browser aufgerufen. Mithilfe eines HTTPS-Protokolls wird neben der Kommunikation zwischen einem Server und einem Client auch die Nutzung des Cache optimiert, sodass die Funktionalitäten der Webseite auch offline zur Verfügung gestellt werden können. Anders als herkömmliche Webseiten, die über einen Browser aufgerufen werden, lassen sich PWAs als Apps auf dem Homescreen mobiler Endgeräte einbetten. Durch ihre Spezialisierung auf mobile Endgeräte berücksichtigen Progressive Web Apps auch ein Responsive Design.
Funktionsweise und Anwendung
Progressive Web Apps zeichnen sich vor allem durch ihre Zuverlässigkeit, Schnelligkeit und eine besonders gute User Experience (UX) aus. Da die Inhalte auch geladen werden können, wenn keine Verbindung zum Internet besteht, sind PWAs besonders zuverlässig. Die progressiven Anwendungen reagieren unmittelbar auf Nutzerinteraktionen, integrieren Animationen und können flüssig und ohne Einschränkungen benutzt werden. Die Nutzung orientiert sich dabei an nativen Applikationen, sodass die Interaktion mit PWAs besonders unkompliziert und intuitiv ist. Darüber hinaus lassen sich die optimierten Webseiten auf allen Endgeräten uneingeschränkt aufrufen und nutzen.
Um PWAs in vollem Umfang nutzen zu können, greift das System auf sogenannte Service Worker zurück: Diese Funktion optimiert vor allem das Zwischenspeichern der Inhalte im Cache des Browsers und ermöglicht die Offline-Nutzung der Anwendungen. Die Service Worker arbeiten dabei anhand eines spezifischen Skripts, welches clientseitig wie ein Proxy-Server funktioniert. Die Inhalte werden dabei noch vor dem eigentlichen Aufruf im Cache gespeichert, sodass progressive Webseiten besonders schnell und flüssig funktionieren. Die Service Worker bedienen sich dabei besonderer Funktionen wie dem Prerendering, Preloading und Prefetching. Auch die Abhängigkeit von leistungsstarken Internetverbindungen wird maßgeblich reduziert. Aufgrund der optimierten Ladezeiten gewährleisten PWAs eine besonders gute UX.
Die progressiven Webseiten lassen sich dabei unabhängig vom App-Store nutzen und auf dem Homescreen einbetten. Durch die Unterstützung von Push-Benachrichtigungen, auch wenn die Webseite gerade nicht aufgerufen wird, können Webseitenbetreiber die Interaktionsrate und das Engagement der Webseitenbesucher steigern. Darüber hinaus können über diese Funktion auch personalisierte Inhalte und Angebote ausgespielt werden, sodass noch weitere positive Effekte generiert werden können. Ermöglicht wird dies durch eine JSON-Datei, welche die Personalisierung der Webseite unterstützt.
Bedeutung für SEO
Zur Entwicklung von progressiven Webseiten können HTML5, CSS3 und JavaScript zum Einsatz kommen. Eine sogenannte Application Shell Architecture und das dynamische Laden von Inhalten über eine API verringert den Verbrauch von Ressourcen maßgeblich.
Durch die stetige Weiterentwicklung und Verbesserung der Suchalgorithmen sind Webcrawler heutzutage in der Lage, JavaScript-Inhalte auszulesen und die Inhalte in das Ranking mit einzubeziehen. Allerdings kann es bei Progressive Web Apps immer noch zu einem Rankingverlust kommen, da die Crawlability der Webseite oftmals nicht optimal ausgeschöpft werde können. Um die Indexierung zu unterstützen, sollten Webseitenbetreiber auf eine Bibliothek oder ein Framework wie Angular, Polymer oder React zurückzugreifen und CSS und JS zusammen mit HTML inline auszuliefern, um die grundlegenden Funktionalitäten der Webseite für den Nutzer zu gewährleisten.
Ausblick
Für Google stellen Progressive Web Apps das App-Modell der Zukunft dar und sind aufgrund ihrer innovativen plattformübergreifenden und progressiven Beschaffenheit in der Lage, native Applikationen abzulösen. Vor allem der Umstand, dass PWAs einfach offline aus dem Browser geladen werden können, der ohnehin auf jedem Endgerät installiert ist, begünstigt diese Entwicklung.
Google ermutigt Webmaster schon seit geraumer Zeit zum sogenannten Progressive Enhancement. Im Rahmen dieser Idee treibt der Konzern die Entwicklung von Webseiten an, die sowohl auf mobilen als auch auf lokalen Endgeräten und bei jeglicher Art von Internetverbindung in vollem Umfang nutzbar sind. In diesem Zusammenhang stellen vor allem mobile Endgeräte wie Smartphones und Tablets aufgrund des kleineren Bildschirms, der Touch-Bedienung und der Verwendung mobiler, weniger leistungsstarker Internetverbindungen eine Herausforderung dar. Darüber hinaus unterstützen viele mobile Endgeräte weder JavaScript, noch CSS oder Flash. Das Progressive Enhancement zielt dabei auf die umfassende Optimierung der Webseite für alle Endgeräte und weniger auf die Entwicklung gesonderter mobiler Formate ab.
Nikolai Knabner
Unitleiter
Performance Marketing
Performance Marketing
Sie interessieren sich für das Thema "Progressive Web Apps"
Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Nikolai Knabner kostenfrei beraten.
Über den Autor
Nikolai Knabner
Nikolai ist Business Unit Leiter Performance Marketing bei Löwenstark.
Warum PWA?
Wenn Sie mit PWAs nicht vertraut sind, handelt es sich im Wesentlichen um Websites, die sich wie native Apps verhalten und anfühlen. Sie nutzen moderne Webfunktionen, um ein Benutzererlebnis zu bieten, das dem einer herkömmlichen App ähnelt.
Warum sollten Sie also eine PWA gegenüber einer herkömmlichen App bevorzugen? Dafür gibt es eine Reihe von guten Gründen:
1. Sie sind viel billiger und einfacher zu entwickeln als herkömmliche Apps. Das liegt daran, dass Sie keine separaten Versionen für jede Plattform entwickeln müssen. Sie können einfach eine PWA erstellen, die auf allen Geräten funktioniert.
2. Sie sind auch besser auffindbar als herkömmliche Apps, da sie in Suchmaschinen wie Google gefunden werden können.
3. Sie bieten ein besseres Nutzererlebnis, da sie online und offline nutzbar sind.
Wie funktioniert eine progressive Web App?
Eine progressive Web App ist im Wesentlichen eine Website, die so konzipiert wurde, dass sie auf mobilen Geräten gut funktioniert. Das bedeutet, dass sie auch bei langsameren Internetverbindungen schnell lädt und auch auf kleinen Bildschirmen leicht zu bedienen ist. Der Hauptunterschied zwischen einer normalen Website und einer progressiven Web-App besteht darin, dass letztere so konzipiert ist, dass sie den Nutzern ein app-ähnliches Erlebnis bietet.
Eine der wichtigsten Methoden, mit denen progressive Webanwendungen dies erreichen, ist die Verwendung von Service Workern. Service Worker sind Skripte, die im Hintergrund laufen und beispielsweise Ressourcen zwischenspeichern, so dass sie nicht bei jedem Besuch der Website heruntergeladen werden müssen. Sie können auch Push-Benachrichtigungen verarbeiten, so dass Nutzer immer auf dem aktuellen Stand bleiben.
Wie erstelle ich eine progressive Web App?
Die Erstellung einer progressiven Web-App (PWA) ist ideal, um die Benutzerfreundlichkeit Ihrer Webanwendung zu verbessern. Ist die App reaktionsfähiger und schneller, bietet sie Ihren Nutzern ein besseres Erlebnis bieten und letztlich Konversionen und Engagement steigern.
Bei der Erstellung einer PWA sind mehrere Schritte erforderlich. Zunächst müssen Sie eine Manifestdatei erstellen, die dem Browser mitteilt, welche Ressourcen geladen werden sollen und wie sie zu laden sind. Als Nächstes müssen Sie Service Worker erstellen, die das Caching und andere leistungsbezogene Aufgaben übernehmen. Schließlich müssen Sie sicherstellen, dass Ihre Anwendung über HTTPS bereitgestellt wird, um Sicherheit und Zuverlässigkeit zu gewährleisten.
Was kostet eine progressive Web App?
Die Kosten für eine progressive Webanwendung können stark variieren, je nach den benötigten Funktionen. Um Ihren individuellen Aufwand zu bestimmen, können Sie sich von uns beraten lassen. Generell gilt: Je mehr Funktionen benötigt werden, desto höher sind die Kosten.
Bei einer progressiven Webanwendung handelt es sich um eine Website, die bestimmte Funktionen aufweist, durch die sie sich auf einem mobilen Gerät eher wie eine native Anwendung verhält. Diese Funktionen können Dinge wie Offline-Zugriff, Push-Benachrichtigungen und ein Symbol auf dem Startbildschirm umfassen.
Was braucht man für eine Web-App?
Um eine Progressive Web App (PWA) zu erstellen, müssen Sie sicherstellen, dass Ihre Website ein paar wichtige Kriterien erfüllt. Erstens sollte Ihre Website über HTTPS bereitgestellt werden, da dies für einige der Funktionen erforderlich ist, mit denen PWAs funktionieren. Zweitens müssen Sie eine Web-App-Manifest-Datei einfügen. Diese Datei teilt dem Browser Informationen über Ihre Anwendung mit, beispielsweise den Namen, das Symbol und die Start-URL. Schließlich sollte Ihre App reaktionsfähig sein und auf verschiedenen Geräten und Bildschirmgrößen gut funktionieren.
Wenn Sie noch weiter gehen und Ihre PWA wirklich optimieren möchten, können Sie auch Service Worker hinzufügen. Service Worker sind Skripte, die im Hintergrund laufen und unter anderem beim Zwischenspeichern von Dateien und der Offline-Unterstützung helfen können.
Auch interessant:
Inhaltsverzeichnis
Langjährige Erfahrung, engagierte Experten und starke Kampagnen zahlen sich aus:
Ihr Kontakt zu uns
Damm 17,
38100 Braunschweig
