So erstellt man eine Progressive Web App


Tue 10 January 2017 Von Lise Kemen

In meinem letzten Blogbeitrag habe ich erläutert, was eine Progressive Web App (PWA) ist. Heute wollen wir im Detail darauf eingehen, was man benötigt, um eine gute Progressive Web App zu erstellen.

Werfen wir noch einmal einen Blick darauf, wie eine Anwendung definiert wird:

  • ein Anwendungssymbol für einen schnellen Zugang zur Startseite des Geräts
  • ein Startbildschirm, der die Funktionen im Hintergrund lädt
  • eine reibungslose, umfassende und sichere Erfahrung mit hoher Ladegeschwindigkeit
  • eine Online- und Offline-Erfahrung mit zwischengespeicherten Inhalten
  • Push-Benachrichtigungen
  • keine Suchleiste im Browser

Diese Funktionen finden sich nativ in Ihrem Browser. Prüfen Sie nun kurz in Ihrem Browser, auf welche HTML5 APIs Sie Zugriff haben.

Die wesentlichen Schritte für die Erstellung einer Progressive Web App

Um die Vorteile dieser APIs nutzen zu können, dabei aber die Einschränkungen des mobilen Netzwerks zu berücksichtigen, müssen wir im Prinzip folgendes tun:

  • eine Anwedungs-Shell definieren und erstellen (oder App-Shell)
  • das Laden des Inhalts mithilfe der Verwaltung des Caches durch Service Worker optimieren
  • ein Anwendungsmanifest definieren, um die App-ähnliche Erfahrung abzurunden
  • dem Nutzer sicheres Browsen ermöglichen

    PWA (Bild zur Verfügung gestellt von: siehe unten)
    Trennen Sie das UI-Skeleton der Anwendung von den Daten, um sich auf die Geschwindigkeit zu konzentrieren. Darstellung von Google. Bildquelle

Die App-Shell besteht aus minimaler HTML, CSS und zentralen Bestandteilen Ihrer Anwendung, die die grundlegende UI einer Progressive Web App darstellen. Dies trennt die UI der Anwendung vollständig von den Daten und kann sich dadurch ganz auf die Geschwindigkeit des anfänglichen Ladevorgangs konzentrieren. Sobald die App-Shell definiert und als ein erstes App-Skeleton geladen wurde, kommen die Service Worker ins Spiel.

Service Workers sind Worker Scripts, die auf Zusagen basieren, die das Erfassen von Events und die Steuerung von Netzwerkanfragen ermöglichen sollen. Diese sind unabhängig von Ihrer App und werden oft als Proxys bezeichnet. Diese Workers speichern Ihre App-Shell im Cache, bleiben unabhängig vom Netzwerkstatus, und verwalten Updates und Content Caching im Hintergrund. Ist der Nutzer offline, kann er die zwischengespeicherten Daten ansehen, während die Konnektivität wiederhergestellt wird, um dann die Daten über den Server zu aktualisieren. Als i-Tüpfelchen verwalten sie außerdem Web-Push-Benachrichtigungen.

Im nächsten Schritt definieren Sie Ihr Anwendungsmanifest, um zu kontrollieren, wie Sie auf Ihre Nutzer eingehen. Das Anwendungsmanifest steht als JSON-Datei bereit, mit der Sie das Symbol und den Namen Ihrer App für den Startbildschirm der Nutzer und den Begrüßungsbildschirm definieren, während Sie Ressourcen herunterladen oder aus dem Cache wiederherstellen, ein Farbthema festlegen, die ursprüngliche Ausrichtung der Seite festlegen und sogar die Suchleiste des Browsers entfernen, um die Ähnlichkeit zu nativen Anwendungen zu verbessern.

Ihre Webanwendung ist nun fast fertiggestellt. Ein letzter wichtiger Punkt, um sicherzustellen, dass Ihre PWA für Ihre Nutzer sicher in der Anwendung ist. Sie müssen von einer sicheren Quelle durch den Einsatz von HTTPS unterstützt werden. Und siehe da! Sie besitzen nur den Schlüssel, um großartige, sichere, immer aktuelle und unvergessliche Anwendungen zu erstellen, die nicht von der Konnektivität abhängig sind.

Jetzt geht es weiter mit dem Code. Ich habe die besten Links zusammengestellt, die Sie bei der Erstellung Ihrer eigenen PWA unterstützen werden.

Starter Kits
Ihre erste Progressive Web App
Progressive Web Apps - Ein Leitfaden für Anfänger
Was kann das Web heute?
https://pwa.rocks/

App-Shell, AMP & Web-Push-Benachrichtigungen
Das App-Shell-Modell
Accelerated Mobile Pages (AMP)
Web-Push-Benachrichtigungen: Zeitgemäß, relevant und präzise

Services Workers & HTTPS
https://serviceworke.rs/
Service Workers: eine Einleitung
Service-Workers-Lösungen
Warum HTTPS
So wird Mixed Content verhindert

Tools, Tests und Debugging
Prüfen Sie Web Apps mit Lighthouse
Debugging von Progressive Web Apps
Checkliste für Progressive Web Apps
Videos vom "Progressive Web App Summit 2016"

Viel Spaß, und teilen Sie Ihre Erfahrungen mit den PWAs mit uns auf Twitter!


Etikettiert: Nuxeo UI, Progressive Web App, How to