Progressive Web Apps: Die innovative Ergänzung einer klassischen Website

Beitrag aus Ausgabe 77 / April 2019
Online Marketing
Magdalena Mues und Matthias Böhm

Magdalena Mues ist eine der Gründer/innen und Geschäftsführer/innen von CLANEO, einer Berliner Performance-Marketing-Agentur mit den Schwerpunkten auf Search, Content und Commerce.

Matthias Böhm ist SEO Consultant bei der Berliner Performance-Marketing-Agentur CLANEO. Er unterstützt Start-ups, KMU und Konzerne in den Bereichen Suchmaschinenoptimierung (SEO).

Als Progressive Web Apps (kurz PWA) bezeichnet man Websites, die auf Basis der Geräteunterstützung weitere ergänzende Funktionen bieten, welche das Anwendungserlebnis für die Nutzer verbessern. Hierzu gehören eine erhöhte Geschwindigkeit, Push-Benachrichtigungen und Offline-Support sowie ein nativer Auftritt und lokales Ressourcen-Caching. PWAs finden besonders bei mobilen Apps mit Web-Technologien Anwendung. Was steckt technisch hinter PWAs und welche Vorteile bringen sie?

Was ist eine Progressive Web App?

PWAs sind Websites, die nach dem Vorbild nativer Apps entwickelt werden, um das mobile Erlebnis für den Nutzer ebenso angenehm zu gestalten wie die Nutzung einer App, die ausschließlich zur mobilen Nutzung konzipiert wurde. Das mobile Nutzererlebnis unter Verwendung von PWAs ist dem einer nachträglich mobil-optimierten Website deutlich überlegen. Deshalb gelten sie allgemein als die Technologie der Zukunft. Da Nutzer zunehmend von mobilen Geräten auf das Web zugreifen, bergen PWAs großes Potenzial.

Zu den definierten Funktionen einer PWA gehören Offline-Fähigkeit, schnelles Laden, Sicherheit, eine immersive Benutzeroberfläche und die Fähigkeit, Push-Benachrichtigungen zu senden. PWAs werden unter anderem durch Nutzeraufforderungen zunehmend von mobilen Plattformen unterstützt.

Warum diese Features für Nutzer und Entwickler von Vorteil sind:

Key-Features von PWAs

  1. Browser-/Geräteunterstützung: Verfügt eine Website über PWAs, wird dem Nutzer von Browser und Gerät die Option zur Installation der App auf dem Startbildschirm angeboten. Aufgrund wiederholter Suchmaschinenoptimierung in Bezug auf die PWA können hier Werbekosten gespart werden (siehe Abbildung 1).
  1. Reichweite: PWAs können über Browser und SEO mehr Nutzer erreichen als ein App Store.
  2. Offline-Support: PWAs können offline verwendet werden. Ein Proxy zwischen Webbrowser und Server ermöglicht es, unter Verwendung des Gerätespeichers immer neue Inhalte zu laden.
  3. Natives Erscheinungsbild: PWAs sehen aus und funktionieren wie eine App und nicht wie eine mobil optimierte Website. Deshalb bieten sie den mobilen Nutzern ein besseres User-Erlebnis.
  4. Reaktionsgeschwindigkeit: Die Benutzeroberfläche passt sich unter Verwendung von PWAs dem Bildschirm des Geräts an.
  5. Push-Benachrichtigungen: PWAs können Push-Nachrichten an die Nutzer senden, mit deren Hilfe Nutzer die Seite mit derselben Einfachheit wiederfinden wie eine native App. Der Anbieter seinerseits hat die Möglichkeit, erneut Kontakt mit dem Nutzer aufzunehmen.
  6. Sicherheit: PWAs sind HTML5-Anwendungen und verwenden HTTPS. Einige der wichtigsten PWA-Funktionen werden durch die Verwendung dieser Schlüsseltechnologien ermöglicht, was den Nutzern und Anbietern eine sichere Anwendung garantiert.
  7. Vernetzbarkeit: In PWAs ist es möglich, URLs zu verlinken.
  8. Geräteunabhängig: Anders als native Apps funktionieren PWAs auf jedem Gerät unabhängig von Modell oder Alter.
  9. Selbstaktualisierung: PWAs aktualisieren sich selbst.

In PWAs verwendete Schlüsseltechnologien

PWAs erschließen Nutzern und Entwicklern erhebliche Vorteile in der Verbreitung und Anwendung von Web-Inhalten auf mobilen Geräten. Dies ist jedoch nur aufgrund der Verwendung bestimmter Schlüsseltechnologien möglich, auf denen PWAs basieren. Insbesondere die Offline-Fähigkeit von PWAs ist ein großer Vorteil gegenüber herkömmlichen Websites und Web Apps. Die Kernentwicklungen, die dies möglich machen, sind der Service Worker, die App Shell und das App-Manifest.

  1. Service Worker: Der Service Worker besteht aus einer JavaScript-Datei, die zwischen Web-App und Netzwerk vermittelt und unter Zugriff auf den Gerätespeicher Cache-Dienste bereitstellen kann. Da nur HTTPS-Seiten mit dem Service Worker kompatibel sind, müssen PWAs über HTTPS bereitgestellt werden, was gleichzeitig der Sicherheit dient.
  2. App Shell/Caching: Die App Shell dient in erster Linie der Benutzerfreundlichkeit und sorgt dafür, dass zunächst der „Container“, also die Benutzeroberfläche der PWA, geladen wird und dann erst die Inhalte. Da die App Shell getrennt vom Inhalt zwischengespeichert wird, wird der von der PWA gebrauchte Speicherplatz auf ein Minimum reduziert, was dazu führt, dass PWAs deutlich weniger Speicherplatz benötigen als native oder hybride Apps.
  3. App Manifest: Hierbei handelt es sich um eine JSON-Datei, die Informationen der PWA an das Gerät übermittelt. Das App Manifest legt fest, wie die PWA auf dem Gerät dargestellt wird. Es enthält den Namen und die Beschreibung der App, den Splash-Screen, Positionen und Größen von Symbolen und Features, die URL und die Standardausrichtung. Ein Link zum Manifest wird in der Kopfzeile aller Websites hinzugefügt:

<link rel="manifest" href="/manifest.webmanifest">

BEISPIEL

{

  "name": "Die Wetter App",

  "short_name": "Wetter",

  "description": "Das ist ein Progressive Web App Beispiel",

  "icons": [{

    "src": "images/icons/icon-128x128.png",

      "sizes": "128x128",

      "type": "image/png"

    }, {

      "src": "images/icons/icon-144x144.png",

      "sizes": "144x144",

      "type": "image/png"

    }, {

      "src": "images/icons/icon-152x152.png",

      "sizes": "152x152",

      "type": "image/png"

    }, {

      "src": "images/icons/icon-192x192.png",

      "sizes": "192x192",

      "type": "image/png"

    }, {

      "src": "images/icons/icon-256x256.png",

      "sizes": "256x256",

      "type": "image/png"

    }],

  "start_url": "/index.html?utm_source=app_manifest",

  "orientation": "portrait",

  "display": "standalone",

  "background_color": "#3E4EB8",

  "theme_color": "#2F3BA2"

}

Das App Manifest ist ein W3C-Working-Entwurf:

https://www.w3.org/TR/appmanifest/

Wann lohnen sich PWAs? Vorteile gegenüber PWA-Alternativen

In welchen Fällen sich die Anwendung von PWAs lohnt, wird deutlich, wenn sie den bestehenden Alternativen gegenübergestellt werden. Die sich, neben den PWAs, anbietenden App-Modelle sind vor allem Native Apps und Hybride Apps.

Vorteile von PWAs gegenüber Native Apps

Der größte Vorteil gegenüber Native Apps findet sich auf der Entwicklerseite. Native Apps sind plattformbasiert und Entwickler, die eine App auf mehreren Plattformen anbieten wollen, müssen diese entsprechend für jedes User Interface erstellen. Will ein Anbieter seine App also für iOS, Android und Windows Phone zugänglich machen, muss er diese einmal in Objective-C/Swift für iOS, Java/Kotlin für Android und in C# für Windows entwickeln, verwalten und updaten. Diese Aufwände entfallen bei der Verwendung von PWAs. Außerdem können über PWAs mehr Nutzer erreicht werden als über App Stores, in denen Native Apps angeboten werden.

Vorteile von PWAs gegenüber Hybrid Apps

Hybrid-Mobile Apps sind im Unterschied zu Native Apps unabhängig von der Plattform des Betriebssystems. Sie werden in HTML, Java Script oder CSS entwickelt und laufen auf allen Geräten, obwohl auch sie native UI-Elemente enthalten können. Aber auch Hybrid Apps sind Apps, weshalb Aufwände, wie die Erstellung und Publikation von Updates, der Vertrieb über App Stores sowie der Speicherplatz auf dem Gerät des Nutzers, deutliche Nachteile gegenüber einer PWA darstellen.

Sichtbarkeit im Internet – SEO für PWAs

Wie alle anderen Websites sind auch PWAs von Suchmaschinen indizierbar und in diesen auffindbar. Doch auch hier gilt es, die technischen Aspekte des SEO zu beachten und die PWA richtig zu optimieren. Grundlegende Anforderungen sind bspw. die verschlüsselte Übertragung per HTTPS, ein intuitives Design und Möglichkeit, die PWA offline zu laden.

Typische Probleme bei der technischen SEO von PWAs können durch folgende Schritte umgangen werden:

●Nutzung der Lighthouse Chrome Extension

Für Basismessungen rund um die PWA ist dieses Tool unerlässlich. Die Extension sucht dabei nach den wichtigsten Eigenschaften, wie Offline-Zugänglichkeit, Seitenladegeschwindigkeiten, Sicherheit der Verbindung (Stichwort SSL), für mobile Geräte optimiertes Design und die Funktion „Zum Homescreen hinzufügen“, welche besonders wichtig für die Nutzererfahrung ist. Auch die Präsenz der Service Worker als Herzstück der PWA wird hier überprüft. Diese steuern z. B. die Push-Benachrichtigungsfunktionen, Offline-Caching und Geolokalisierungsdaten (siehe Abbildung 2).

●Test mit allen gängigen Browsern

Eine Selbstverständlichkeit sollte der Test der PWA in den verschiedenen Browsern und Browser-Versionen sein. Ein einfaches Aufrufen der URL und die Überprüfung von Darstellung und Funktionalität zeigen Probleme auf, die später zu einer hohen Absprungrate der Besucher führen können und somit das Suchmaschinenranking negativ beeinflussen können.

●Doppelte Inhalte vermeiden

Auch bei PWAs gilt die Regel Nummer eins für Internet-Content: Doppelter Inhalt sollte unbedingt vermieden werden. Da PWAs oft als Ergänzung zu einer bestehenden Website entwickelt werden, wird dieser Fakt oft übersehen. Inhaltliche Überschneidungen werden von Suchmaschinen bekanntlich ignoriert oder gar bestraft. Es sollte sichergestellt werden, dass alle Dopplungen mit dem <link rel=canonical> Tag versehen und damit eindeutigen Quellen zugewiesen werden.

●Auszeichnung mit strukturierten Daten

Das Auszeichnen der Inhalte mit strukturierten Daten gehört heutzutage zu jedem SEO-Bemühen dazu, auch bei den PWAs. Hier wird jeder Teil der Webanwendung präzise identifiziert und so für Suchmaschinen leichter einlesbar gemacht. Schema.org hat sich als Auszeichnungssprache durchgesetzt und ist für die meisten Webanwendungen die richtige Wahl.

●Open Graph und Twitter Cards Metadaten

Einer der Vorteile der PWAs im Gegensatz zu nativen Apps ist die gemeinsame Nutzbarkeit. Der Nutzer kann die Anwendung einfach über eine bereitgestellte URL aufrufen und sofort nutzen, ohne einen Umweg über einen App Store gehen zu müssen. Ein leichtes Teilen und unkompliziertes Nutzen der PWAs ist daher ein großes Plus.

Fazit

Es ist lohnenswert, sich einmal genauer mit Progressive Web Apps zu befassen. Die Vorteile sind überzeugend. Sie sind außerdem leicht zu entwickeln, bieten eine unkomplizierte und intuitive Nutzererfahrung und sind einfach zu installieren und zu navigieren. Die Flexibilität der Nutzung auf Desktop- und mobilen Endgeräten machen PWAs zur innovativen Ergänzung einer klassischen Website.

Spannend? Dieser Artikel ist im suchradar #77 erschienen

Lesen Sie weitere spannende Artikel aus der Ausgabe „Content vs. Werbung“! Entweder online oder als PDF-Magazin.

Kostenlos als PDF-Version Alle Artikel aus der Ausgabe ansehen