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).
  2. Reichweite: PWAs können über Browser und SEO mehr Nutzer erreichen als ein App Store.
  3. 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.
  4. 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.
  5. Reaktionsgeschwindigkeit: Die Benutzeroberfläche passt sich unter Verwendung von PWAs dem Bildschirm des Geräts an.
  6. 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.
  7. 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.
  8. Vernetzbarkeit: In PWAs ist es möglich, URLs zu verlinken.
  9. Geräteunabhängig: Anders als native Apps funktionieren PWAs auf jedem Gerät unabhängig von Modell oder Alter.
  10. 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.

Spannend? Jetzt Artikel zu Ende lesen!

Lesen Sie den Artikel weiter in unserer suchradar Ausgabe 77 von April 2019 mit dem Titelthema „Content vs. Werbung“.

Kostenloses PDF-Magazin bestellen Online weiterlesen? Einfach kostenlos für den Newsletter anmelden. Kostenpflichtiges Print-Abo bestellen