Die Erstellung einer Progressiven Web App und die Voraussetzungen

article.detail.published-on:

July 13, 2021

article.detail.reading-time:

article.detail.minutes

article.detail.tags:

Um eine Progressive Web App zu erstellen, spielen drei Komponenten eine zentrale Rolle. Diese werden in folgendem Artikel zusammen mit den Voraussetzungen erklärt.

Im ersten Schritt muss eine responsive Website oder Web App erstellt werden. Solche responsiven Websites passen sich automatisch an das jeweilige Endgerät an. Die im ersten Schritt erstellte Web-App ist Voraussetzung und Basis für die Umwandlung in eine Progressive Web App. Außerdem müssen die folgenden Anforderungen erfüllt werden: eine sichere Umgebung (HTTPS), ein Web App-Manifest sowie ein sogenannter Service Worker. Gerade der Service Worker verlangt die Verwendung von HTTPS. Eine Progressive Web App kann nur im Rahmen einer HTTPS-URL online gehen. Deshalb muss gewährleistet sein, dass der Server für HTTPS konfiguriert ist.

Die Erstellung eines Web App Manifests ist der zweite Schritt, der als Voraussetzung dient. Das Web App Manifest beinhaltet wesentliche Informationen, die das Funktionieren der Webanwendungen gewährleisten. Dazu gehört der Name der App, die verwendeten Symbole sowie die Start-URL. Die JSON-Datei enthält Metadaten der App. Das Web App-Manifest legt fest, wie sich die Web App beim Nutzer verhält und wie sie aussieht.

Im dritten und letzten Schritt müssen Service Skripte geladen werden, die definieren, welche Daten lokal gespeichert und welche aus dem Internet generiert werden. Im dritten Schritt werden sogenannte Service Worker hinzugefügt, die den Offline-Modus und die Ausführung von Hintergrundaufgaben ermöglichen. Sie führen Aufgaben aus, selbst wenn die PWA nicht läuft. Dazu gehört das Senden von Push-Mitteilungen und das Abrufen von Hintergrundinformationen.

Die Voraussetzungen, um als App betrachtet werden zu können

Um als App betrachtet werden zu können, muss sie per Definition die folgenden Voraussetzungen erfüllen:

Startbildschirm ähnlich einer nativen App, die Funktionen werden im Hintergrund geladen.
Icon auf dem Startbildschirm des Endgeräts, das einen schnellen Zugriff ermöglicht.
Sicheres Nutzererlebnis mit hoher Ladegeschwindigkeit.
Möglichkeit von Push-Mitteilungen an den User.
Informationen lassen sich auch im Offline-Modus abrufen.
Keine Suchleiste im Browser.

Suchmaschinen-Gigant Google legt Bedingungen für die Indexierbarkeit fest

Damit die Umwandlung von einer responsiven Website in eine Progressive Web App gelingt, legt Google gewisse Rahmenbedingungen fest. Die Website muss also nicht nur responsive sein, sondern vor allem sicher: ein HTTPS-Protokoll ist Voraussetzung. Es muss zudem die Möglichkeit geben, das Icon der Site auf dem Startbildschirm des Smartphones zu installieren. Ähnlich wie bei nativen Apps muss der Ladevorgang angezeigt werden, sodass der User den Fortschritt sieht. Die Ladezeit selbst soll eine Interaktion mit der Website in weniger als zehn Sekunden ermöglichen. Als eine weitere Voraussetzung gilt die Offline-Verfügbarkeit der Site. Jeder Unterseite der Website muss darüber hinaus eine separate Unterseite zugewiesen werden. Damit wird gewährleistet, dass der Inhalt leichter mit anderen geteilt werden kann. Werden diese Bedingungen erfüllt, kann Google die Progressive Web App indexieren und damit crawlen. Dies bringt für den Inhaber der App entscheidende Vorteile.