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 la sua tecnologia frontend ha deciso di dare un'occhiata più da vicino alle app web progressive per il proprio il sito di streaming ZDFmediathek. Agenzia di sviluppo Cellular ha accettato la sfida di creare una piattaforma in linea con le app per iOS e Android specifiche della piattaforma 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 del lavoro pesante viene svolta Workbox, un insieme di librerie e i moduli Node che semplificano il supporto di diverse strategie di memorizzazione nella cache. La La PWA ZDF è creata con TypeScript e React, quindi utilizza la libreria Workbox sono già integrati create-react-app per prememorizzare nella cache gli asset statici. In questo modo l'applicazione può concentrarsi sul rendere contenuti disponibili offline, in questo caso i video e i relativi metadati.
L'idea di base è abbastanza semplice: recupera il video e memorizzalo come blob in IndexedDB. Durante la riproduzione, ascolta gli eventi online/offline e passa a la versione scaricata quando il dispositivo passa alla modalità offline.
Purtroppo la situazione si è rivelata un po' più complessa. Uno dei progetti requisiti prevedeva l'utilizzo del web player ZDF ufficiale che non fornisce assistenza offline. Il player prende un ID contenuti come input, comunica con l'API ZDF, e riproduce il video associato.
È qui che entra in gioco una delle funzionalità più potenti del web: Service worker.
Il service worker può intercettare le varie richieste fatte dal player e a rispondere con i dati di IndexedDB. che aggiunge offline in modo trasparente senza dover modificare una sola riga del codice del player.
Dato che i video offline tendono a essere molto grandi, una grande domanda è quanti di loro possono essere archiviati su un dispositivo. Con l'aiuto di StorageManager API l'app può stimare il numero di spazio disponibile e informa l'utente quando lo spazio non è sufficiente prima ancora avviando il download. Purtroppo Safari non è nell'elenco dei browser che implementava questa API e al momento della stesura della documentazione non erano disponibili dati aggiornati informazioni su come altri browser hanno applicato le quote. Pertanto, il team ha scritto un piccola utilità per testare il comportamento su vari dispositivi. È ormai un documento completo articolo che riassume tutte le 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 vuole scaricare il primo video. Si tratta di un momento giusto per richiedere l'installazione perché l'utente ha espresso la chiara intenzione di usare l'app offline.
Creazione di una pagina offline per accedere ai download
Quando il dispositivo non è connesso a internet e l'utente accede a una pagina non disponibile in modalità offline, viene visualizzata una pagina speciale che elenca tutti i video che sono stati scaricati in precedenza o (nel caso in cui non ci siano contenuti già scaricati) una breve spiegazione della funzionalità offline.
Usare la frequenza di caricamento dei frame per le funzioni adattive
Per offrire una ricca esperienza utente, la PWA ZDF include alcune sottili transizioni
che si verificano quando l'utente scorre o naviga. Sui dispositivi di fascia bassa come
le animazioni di solito hanno l'effetto opposto e rendono l'app lenta
sono meno reattive se non vengono eseguite a 60 frame al secondo. Per includere questo
Tieni presente che l'app misura la frequenza fotogrammi effettiva tramite requestAnimationFrame(), mentre
l'applicazione carica e disattiva tutte le animazioni quando il valore scende al di sotto di una
una certa 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 del prestazioni e varia a ogni caricamento, si è comunque rivelata una buona base per decisionale responsabile. Vale la pena ricordare che, a seconda del caso d'uso, ci sono altre tecniche per il caricamento adattivo che gli sviluppatori possono implementare. Un grande vantaggio di questo approccio è che è disponibile su tutte le piattaforme.
Modalità Buio
Una funzionalità molto usata nelle moderne esperienze sui dispositivi mobili è modalità Buio. Soprattutto quando guardare video in condizioni di scarsa illuminazione, molte persone preferiscono un'interfaccia utente attenuata. La PWA ZDF non solo fornisce un interruttore che permette agli utenti di passare dalla luce alla tema scuro, 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 è configurato programma per cambiare il tema in base all'ora del giorno.
Risultati
La nuova app web progressiva è stata lanciata automaticamente in versione beta pubblica a marzo 2020 e da allora ha ricevuto molti feedback positivi. Anche se la fase beta continua, la PWA continua a essere eseguita nel proprio dominio temporaneo. Anche se La PWA non è stata promossa pubblicamente, il numero di utenti è in costante crescita. Molti di questi provenienti da Microsoft Store, che consente agli utenti di Windows 10 di scoprire PWA e installarle come app specifiche per le piattaforme.
Passaggi successivi
ZDF ha in programma di continuare ad aggiungere funzionalità alla propria PWA, tra cui l'accesso per personalizzazione, visualizzazione cross-device e per piattaforme e notifiche push.