Scopri come ZDF ha creato un'app web progressiva (PWA) con funzionalità moderne come supporto offline, installabilità e modalità Buio.
Quando l'emittente ZDF stava valutando di riprogettare lo stack tecnologico di frontend, ha deciso di esaminare più da vicino le app web progressive per il sito di streaming ZDFmediathek. L'agenzia di sviluppo Cellular ha accettato la sfida di creare un'esperienza basata sul web in linea con le app per iOS e Android specifiche della piattaforma di ZDF. La PWA offre installabilità, riproduzione di video offline, animazioni di transizione e una modalità Buio.
Aggiunta di un service worker
Una funzionalità chiave di una PWA è il supporto offline. Per ZDF, la maggior parte delle attività più impegnative viene svolta da Workbox, un insieme di librerie e moduli di nodi che semplificano il supporto di diverse strategie di memorizzazione nella cache. La PWA ZDF è stata creata con TypeScript e React, pertanto utilizza la libreria Workbox già integrata in create-react-app per pre-memorizzare nella cache gli asset statici. L'applicazione permette di rendere disponibili offline i contenuti dinamici, in questo caso i video e i relativi metadati.
L'idea di base è piuttosto semplice: recupera il video e memorizzalo come blob in IndexedDB. Durante la riproduzione, ascolta gli eventi online/offline e passa alla versione scaricata quando il dispositivo è offline.
Sfortunatamente le cose si sono rivelate un po' più complesse. Uno dei requisiti del progetto era l'utilizzo del web player ZDF ufficiale che non fornisce supporto offline. Il player prende come input un ID contenuto, comunica con l'API ZDF e riproduce il video associato.
È qui che viene in aiuto una delle funzionalità più potenti del web: i service worker.
Il service worker può intercettare le varie richieste effettuate dal player e rispondere con i dati di IndexedDB. In questo modo puoi aggiungere funzionalità offline in modo trasparente senza dover cambiare una sola riga di codice del player.
Poiché i video offline tendono a essere piuttosto grandi, una domanda importante è quanti di essi possono essere effettivamente memorizzati su un dispositivo. Con l'aiuto dell'API StorageManager, l'app può stimare lo spazio disponibile e informare l'utente se lo spazio è insufficiente prima di avviare il download. Purtroppo Safari non è presente nell'elenco dei browser che implementano questa API e al momento della stesura non erano disponibili informazioni aggiornate su come altri browser hanno applicato le quote. Pertanto, il team ha scritto una piccola utilità per testare il comportamento su vari dispositivi. A questo punto, esiste un articolo completo che riassume tutti i dettagli.
Aggiunta di una richiesta di installazione personalizzata
La PWA ZDF offre un flusso di installazione in-app personalizzato e chiede agli utenti di installare l'app non appena vogliono scaricare il primo video. Questo è un buon momento per richiedere l'installazione, perché l'utente ha espresso chiaramente l'intenzione di utilizzare l'app offline.
Creare una pagina offline per accedere ai download
Quando il dispositivo non è connesso a internet e l'utente accede a una pagina che non è disponibile in modalità offline, viene visualizzata una pagina speciale che elenca tutti i video scaricati in precedenza o (nel caso in cui non siano stati ancora scaricati contenuti) una breve spiegazione della funzionalità offline.
Usare la frequenza di caricamento dei frame per le funzionalità adattive
Per offrire un'esperienza utente ottimale, la PWA ZDF include alcune transizioni discrete
che si verificano quando l'utente scorre o naviga. Sui dispositivi di fascia bassa, queste animazioni di solito hanno l'effetto opposto e rendono l'app lenta e meno reattiva se non vengono eseguite a 60 frame al secondo. Per tenere conto di ciò, l'app misura la frequenza fotogrammi effettiva tramite requestAnimationFrame() mentre viene caricata e disattiva tutte le animazioni quando il valore scende al di sotto di una determinata soglia.
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();
});
Anche se questa misurazione fornisce solo un'indicazione approssimativa delle prestazioni del dispositivo e varia a seconda del carico, è comunque una buona base decisionale. Vale la pena ricordare che, a seconda del caso d'uso, esistono altre tecniche di caricamento adattivo che gli sviluppatori possono implementare. Un grande vantaggio di questo approccio è che è disponibile su tutte le piattaforme.
Modalità Scuro
Una funzionalità molto usata nelle esperienze mobile moderne è la modalità Buio. Soprattutto quando si guardano video in condizioni di scarsa illuminazione, molte persone preferiscono un'interfaccia utente attenuata. La PWA ZDF non solo fornisce un interruttore che consente agli utenti di passare da un tema chiaro a uno scuro, ma reagisce anche ai cambiamenti delle preferenze di colore a livello di sistema operativo. In questo modo, l'app cambierà automaticamente l'aspetto sui dispositivi su cui è stata impostata una programmazione per la modifica del tema in base all'ora del giorno.
Risultati
La nuova app web progressiva è stata lanciata silenziosamente come beta pubblica a marzo 2020 e da allora ha ricevuto molti feedback positivi. Mentre la fase beta continua, la PWA continua a essere eseguita all'interno del proprio dominio temporaneo. Anche se la PWA non è stata promossa pubblicamente, il numero di utenti è in costante crescita. Molte di queste provengono dal Microsoft Store, che consente agli utenti di Windows 10 di scoprire le PWA e di installarle come app specifiche della piattaforma.
Passaggi successivi
ZDF prevede di continuare ad aggiungere funzionalità alla sua PWA, tra cui l'accesso per la personalizzazione, la visualizzazione cross-device e della piattaforma e le notifiche push.