Wie das ZDF eine Video-PWA mit Offline- und dunklen Modus erstellt hat

Hier erfährst du, wie der ZDF eine progressive Web-App (PWA) mit modernen Funktionen wie Offline-Unterstützung, Installierbarkeit und Dark-Modus entwickelt hat.

Martin Schierle

Scott Friesen

Als der ZDF über eine Neugestaltung seines Front-End-Technologiestacks nachdachte, beschloss er, sich Progressive Web Apps für seine Streamingwebsite ZDFmediathek genauer anzusehen. Die Entwicklungsagentur Cellular hat sich der Herausforderung gestellt, eine webbasierte Erfahrung zu entwickeln, die mit den plattformspezifischen iOS- und Android-Apps des ZDF vergleichbar ist. Sie bietet Installierbarkeit, Offlinevideowiedergabe, Übergangsanimationen und einen dunklen Modus.

Service Worker hinzufügen

Eine wichtige Funktion einer PWA ist die Offlineunterstützung. Für das ZDF erledigt der Großteil der Arbeit die Workbox, eine Reihe von Bibliotheken und Knotenmodulen, die die Unterstützung verschiedener Caching-Strategien erleichtern. Die ZDF-PWA wird mit TypeScript und React erstellt. Daher wird die Workbox-Bibliothek, die bereits in create-react-app integriert ist, verwendet, um statische Assets vorab im Cache zu speichern. So kann sich die Anwendung darauf konzentrieren, die dynamischen Inhalte offline verfügbar zu machen, in diesem Fall die Videos und deren Metadaten.

Die Grundidee ist ganz einfach: das Video abrufen und als Blob in IndexedDB speichern. Warten Sie dann während der Wiedergabe auf Online-/Offlineereignisse und wechseln Sie zur heruntergeladenen Version, wenn das Gerät offline geht.

Leider war das Problem etwas komplexer. Eine der Voraussetzungen für das Projekt war die Verwendung des offiziellen ZDF-Webplayers, der keinen Offline-Support bietet. Der Player nimmt eine Content-ID als Eingabe an, kommuniziert mit der ZDF API und spielt das zugehörige Video ab.

Hier kommt eine der leistungsstärksten Funktionen des Webs ins Spiel: die Service Worker.

Der Service Worker kann die verschiedenen Anfragen des Players abfangen und mit den Daten aus IndexedDB antworten. Dadurch werden auf transparente Weise Offline-Funktionen hinzugefügt, ohne dass eine einzige Zeile im Player-Code geändert werden muss.

Offlinevideos sind in der Regel ziemlich groß. Die große Frage ist daher, wie viele davon überhaupt auf einem Gerät gespeichert werden können. Mithilfe der StorageManager API kann die Anwendung den verfügbaren Speicherplatz schätzen und den Nutzer informieren, wenn nicht genügend Speicherplatz vorhanden ist, bevor der Download gestartet wird. Leider steht Safari nicht auf der Liste der Browser, in denen diese API implementiert ist. Zum Zeitpunkt der Erstellung dieses Dokuments gab es noch nicht viele aktuelle Informationen darüber, wie Kontingente in anderen Browsern angewendet wurden. Daher entwickelte das Team ein kleines Dienstprogramm, um das Verhalten auf verschiedenen Geräten zu testen. Mittlerweile ist ein umfassender Artikel vorhanden, der alle Details zusammenfasst.

Benutzerdefinierte Installationsaufforderung hinzufügen

Die ZDF-PWA bietet einen benutzerdefinierten In-App-Installationsablauf und fordert Nutzer auf, die App zu installieren, sobald sie ihr erstes Video herunterladen möchten. Dies ist ein guter Zeitpunkt für die Installation, da der Nutzer die klare Absicht geäußert hat, die App offline zu verwenden.

Benutzerdefinierte Installationsaufforderung, die ausgelöst wird, wenn ein Video zur Offlinewiedergabe heruntergeladen wird.

Offlineseite für den Zugriff auf Downloads erstellen

Wenn das Gerät nicht mit dem Internet verbunden ist und der Nutzer eine Seite aufruft, die im Offlinemodus nicht verfügbar ist, wird eine spezielle Seite angezeigt, auf der alle Videos aufgeführt sind, die zuvor heruntergeladen wurden. Falls noch keine Inhalte heruntergeladen wurden, wird hier eine kurze Erläuterung der Offlinefunktion angezeigt.

Offlineseite mit allen Inhalten, die für die Offlinewiedergabe verfügbar sind

Frame-Laderate für adaptive Funktionen verwenden

Für eine bessere Nutzererfahrung bietet die ZDF-PWA ein paar dezente Übergänge, die beim Scrollen oder Navigieren stattfinden. Auf Low-End-Geräten haben solche Animationen in der Regel den gegenteiligen Effekt und sorgen dafür, dass die App träge und weniger reaktionsschnell wirkt, wenn sie nicht mit 60 Bildern pro Sekunde ausgeführt wird. Um dies zu berücksichtigen, misst die Anwendung die tatsächliche Framerate über requestAnimationFrame(), während die Anwendung alle Animationen lädt, und deaktiviert alle Animationen, wenn der Wert unter einen bestimmten Grenzwert fällt.

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

Auch wenn diese Messung nur einen groben Überblick über die Leistung des Geräts liefert und bei jeder Last variiert, war sie dennoch eine gute Entscheidungsgrundlage. Es ist zu erwähnen, dass es je nach Anwendungsfall andere Techniken für adaptives Laden gibt, die Entwickler implementieren können. Ein großer Vorteil dieses Ansatzes ist, dass er auf allen Plattformen verfügbar ist.

Dunkler Modus

Eine beliebte Funktion für moderne Mobilgeräte ist der dunkle Modus. Besonders beim Ansehen von Videos bei wenig Umgebungslicht bevorzugen viele Menschen eine gedimmte UI. Die ZDF-PWA bietet nicht nur einen Schalter, mit dem Nutzer zwischen einem hellen und einem dunklen Design wechseln können, sie reagiert auch auf Änderungen der Farbeinstellungen des Betriebssystems. Auf diese Weise ändert die App automatisch die Darstellung auf Geräten, für die ein Zeitplan eingerichtet ist, nach dem die Designbasis je nach Tageszeit geändert wird.

Ergebnisse

Die neue progressive Web-App wurde im März 2020 im Hintergrund als öffentliche Betaversion veröffentlicht und hat seitdem viel positives Feedback erhalten. Während der Betaphase läuft die PWA weiterhin unter ihrer eigenen temporären Domain. Obwohl die PWA nicht öffentlich beworben wurde, gibt es eine stetig wachsende Anzahl von Nutzern. Viele davon stammen aus dem Microsoft Store. Windows 10-Nutzer können PWAs finden und wie plattformspezifische Apps installieren.

Nächste Schritte

Der ZDF plant, seiner PWA weitere Funktionen hinzuzufügen, beispielsweise die Anmeldung für die Personalisierung, die geräte- und plattformübergreifende Ansicht sowie Push-Benachrichtigungen.