Das ZDF hat eine progressive Web-App (PWA) mit modernen Funktionen wie Offlinesupport, Installierbarkeit und Dark-Modus entwickelt.
Als der ZDF überlegte, seine Front-End-Technologie neu zu gestalten entschloss man sich, Progressive Web-Apps genauer unter die Lupe zu nehmen. der Streamingwebsite ZDFmediathek. Entwicklungsagentur Mobilfunk stellte sich der Herausforderung, eine webbasierte die mit den plattformspezifischen iOS- und Android-Apps des ZDF vergleichbar ist. Die PWA bietet Installierbarkeit, Offline-Wiedergabe von Videos, Übergangsanimationen und dunkler Modus.
Service Worker hinzufügen
Eine wichtige Funktion einer PWA ist die Offlineunterstützung. Für das ZDF übernehmen die meisten Workbox, eine Reihe von Bibliotheken und Knotenmodule, die die Unterstützung verschiedener Caching-Strategien erleichtern. Die Die ZDF-PWA wurde mit TypeScript und React entwickelt, daher wird die Workbox-Bibliothek verwendet. bereits in create-react-app für Statische Assets vorab im Cache speichern. So kann sich die Anwendung auf die dynamischen offline verfügbar sind, in diesem Fall die Videos und deren Metadaten.
Die Grundidee ist ganz einfach: Rufen Sie das Video ab und speichern Sie es als Blob in IndexedDB verwendet wird. Hören Sie während der Wiedergabe auf Online- und Offlineereignisse und wechseln Sie die heruntergeladene Version, wenn das Gerät offline geht.
Leider stellten sich die Dinge etwas komplizierter heraus. Eines der Projekte dass der offizielle ZDF-Webplayer verwendet wird, der keine auch offline. Der Player verwendet eine Content-ID als Eingabe und kommuniziert mit der ZDF API. und das zugehörige Video wiedergibt.
Hier kommt eine der leistungsfähigsten Funktionen des Webs ins Spiel: Dienst-Worker
Der Service Worker kann die verschiedenen Anfragen des Spielers abfangen und mit den Daten aus IndexedDB. Dadurch wird transparent die Offline-Wiedergabe ohne eine einzige Codezeile ändern zu müssen.
Da Offlinevideos in der Regel recht umfangreich sind, stellt sich die Frage, wie viele von ihnen tatsächlich auf einem Gerät gespeichert werden kann. Mithilfe der Funktion StorageManager API, die die App schätzen kann, und die Nutzenden informieren, wenn nicht genügend Platz vorhanden ist, den Download starten. Leider ist Safari nicht in der Browserliste enthalten API implementiert. Damals gab es nicht viel auf dem neuesten Stand. Informationen dazu, wie andere Browser Kontingente angewendet haben. Daher hat das Team eine kleines Dienstprogramm, mit dem Sie das Verhalten verschiedenen Geräten. Mittlerweile ist ein umfassender Artikel zusammengefasst, in dem Details.
Benutzerdefinierte Installationsaufforderung hinzufügen
Die ZDF-PWA bietet einen benutzerdefinierten In-App-Installationsablauf und fordert Nutzer auf, die App installieren, sobald sie ihr erstes Video herunterladen möchten. Dies ist ein geeignet, um zur Installation aufzufordern, da der Nutzer eine klare Absicht geäußert hat, die App offline zu verwenden.
Offlineseite für den Zugriff auf Downloads erstellen
Wenn das Gerät nicht mit dem Internet verbunden ist und der Nutzer zu einem die im Offlinemodus nicht verfügbar ist, wird stattdessen eine spezielle Seite angezeigt, werden alle Videos aufgeführt, die bereits heruntergeladen wurden. heruntergeladen wurde), eine kurze Erläuterung der Offline-Funktion.
Frameladerate für adaptive Funktionen verwenden
Um eine optimale Nutzererfahrung zu bieten, enthält die ZDF-PWA einige dezente Übergänge.
wenn Nutzende scrollen oder navigieren. Auf Low-End-Geräten wie
Animationen haben meist den gegenteiligen Effekt und lassen die App träge und
wenn sie nicht mit 60 Bildern pro Sekunde laufen. Um dies in
misst die App die tatsächliche Framerate über requestAnimationFrame(), während
lädt die Anwendung alle Animationen und deaktiviert sie, wenn der Wert unter eine
einen bestimmten Grenzwert zu erreichen.
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 dieser Messwert nur eine grobe Schätzung der Leistungsfähigkeit des Geräts und bei jeder Auslastung variiert, war dies eine gute Grundlage für der Entscheidungsfindung. Es sollte erwähnt werden, dass es je nach Anwendungsfall andere Techniken für adaptives Laden die Entwickler implementieren können. Ein großer Vorteil dieses Ansatzes besteht darin, ist auf allen Plattformen verfügbar.
Dunkler Modus
Eine beliebte Funktion für moderne Mobilgeräte ist dunkler Modus an. Vor allem, wenn Bei der Wiedergabe von Videos bei wenig Umgebungslicht bevorzugen viele Nutzer eine gedimmte Benutzeroberfläche. Die ZDF-PWA bietet nicht nur einen Schalter, mit dem Nutzende zwischen einer Lampe und einer dunkles Design reagiert es auch auf Änderungen der Farbeinstellungen für das gesamte Betriebssystem. Auf diese Weise ändert sich die Darstellung der App auf Geräten, auf denen ein um die Basis für die Tageszeit zu ändern.
Ergebnisse
Die neue progressive Web-App wurde im März 2020 ohne Benachrichtigung als öffentliche Betaversion veröffentlicht. und hat seitdem viel positives Feedback erhalten. In der Betaphase wird die PWA weiterhin in ihrer eigenen temporären Domain ausgeführt. Auch wenn die PWA wurde nicht öffentlich beworben, da die Anzahl der Nutzer stetig steigt. Viele davon stammen aus dem Microsoft Store, wo Windows 10-Nutzer und wie plattformspezifische Apps installieren.
Nächste Schritte
ZDF plant, seine PWA weiter um Funktionen zu erweitern, darunter die Anmeldung für Personalisierung, geräte- und plattformübergreifende Ansicht sowie Push-Benachrichtigungen.