Introduzione al recupero in background

Jake Archibald

Nel 2015 abbiamo introdotto la sincronizzazione in background, che consente al servizio worker di rimandare il lavoro fino a quando l'utente non ha connettività. Ciò significa che l'utente può digitare un messaggio, premere Invia e lasciare il sito sapendo che il messaggio verrà inviato ora o quando è disponibile la connettività.

Si tratta di una funzionalità utile, ma richiede che il service worker sia attivo per la durata del recupero. Questo non è un problema per brevi operazioni come l'invio di un messaggio, ma se l'attività richiede troppo tempo il browser terminerà il service worker, altrimenti potrebbe mettere a rischio la privacy e la batteria dell'utente.

E se dovessi scaricare qualcosa che potrebbe richiedere molto tempo, ad esempio un film, podcast o livelli di un gioco? Ecco a cosa serve il recupero in background.

Il recupero in background è disponibile per impostazione predefinita da Chrome 74.

Ecco una breve demo di due minuti che mostra lo stato tradizionale rispetto all'utilizzo di Background Fetch:

Prova la demo e esamina il codice.

Come funziona

Un recupero in background funziona nel seguente modo:

1. Chiedi al browser di eseguire un gruppo di recuperi in background.
2. Il browser recupera questi elementi, mostrando i progressi all'utente.
3. Una volta completato o non riuscito il recupero, il browser apre il tuo service worker e attiva un evento per informarti di cosa è successo. Qui decidi cosa fare con le risposte, se vuoi.

Se l'utente chiude le pagine del sito dopo il passaggio 1, non c'è problema, il download continuerà. Poiché il recupero è molto visibile e facilmente interrompibile, non esiste il problema della privacy di un'attività di sincronizzazione in background troppo lunga. Poiché il worker del servizio non è in esecuzione costantemente, non c'è il rischio che possa abusare del sistema, ad esempio estraendo bitcoin in background.

Su alcune piattaforme (ad esempio Android) è possibile che il browser si chiuda dopo il passaggio 1, in quanto il browser può trasferire il recupero al sistema operativo.

Se l'utente avvia il download mentre è offline o passa offline durante il download, il recupero in background verrà messo in pausa e ripreso in un secondo momento.

L'API

Rilevamento di funzionalità

Come per qualsiasi nuova funzionalità, devi rilevare se il browser la supporta. Per il recupero in background, è sufficiente:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

Avvio di un recupero in background

L'API principale si basa su una registrazione di un service worker, quindi assicurati di aver prima registrato un service worker. Quindi:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch accetta tre argomenti:

backgroundFetch.fetch restituisce una promessa che si risolve con un BackgroundFetchRegistration. Ti fornirò maggiori dettagli in seguito. La promessa viene rifiutata se l'utente ha disattivato i download o se uno dei parametri forniti non è valido.

Se fornisci molte richieste per un singolo recupero in background, puoi combinare elementi che logicamente sono un singolo elemento per l'utente. Ad esempio, un film può essere suddiviso in migliaia di risorse (come accade tipicamente con MPEG-DASH) e includere risorse aggiuntive come le immagini. Un livello di un gioco potrebbe essere distribuito su molte risorse JavaScript, immagini e audio. Ma per l'utente è semplicemente "il film" o "il livello".

Recuperare un recupero in background esistente

Puoi recuperare un recupero in background esistente come questo:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…passando l'id del recupero in background che ti interessa. get restituisce undefined se non è presente alcun recupero in background attivo con quell'ID.

Un recupero in background è considerato "attivo" dal momento in cui viene registrato fino a quando non va a buon fine, non va a buon fine o viene interrotto.

Puoi ottenere un elenco di tutti i recuperi in background attivi utilizzando getIds:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

Registrazioni del recupero in background

Un BackgroundFetchRegistration (bgFetch negli esempi precedenti) ha quanto segue:

Monitoraggio dei progressi

Questa operazione può essere eseguita tramite l'evento progress. Ricorda che downloadTotal è il valore fornito o 0 se non ne hai fornito uno.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

Ricevere le richieste e le risposte

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record è un BackgroundFetchRecord e ha il seguente aspetto:

Eventi del service worker

Gli oggetti evento hanno quanto segue:

Reagire a successi/insuccessi

Abbiamo già visto l'evento progress, ma è utile solo quando l'utente ha una pagina aperta sul tuo sito. Il vantaggio principale del recupero in background è che le cose continuano a funzionare dopo che l'utente esce dalla pagina o addirittura chiude il browser.

Se il recupero in background viene completato correttamente, il tuo service worker riceverà l'evento backgroundfetchsuccess e event.registration sarà la registrazione del recupero in background.

Dopo questo evento, le richieste e le risposte recuperate non sono più accessibili, quindi se vuoi conservarle, spostale in un luogo come l'API cache.

Come per la maggior parte degli eventi dei service worker, utilizza event.waitUntil in modo che il service worker sappia quando l'evento è stato completato.

Ad esempio, nel tuo service worker:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

L'errore potrebbe essere dovuto a un singolo codice 404, che potrebbe non essere stato importante per te, quindi potrebbe essere comunque utile copiare alcune risposte in una cache come sopra.

Reagire al clic

L'interfaccia utente che mostra lo stato di avanzamento e il risultato del download è cliccabile. L'evento backgroundfetchclick nel service worker ti consente di reagire a questo comportamento. Come sopra, event.registration sarà la registrazione del recupero in background.

La cosa più comune da fare con questo evento è aprire una finestra:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

Risorse aggiuntive

• Spiegazione
• Specifiche
• voce chromestatus.com

Correzione: una versione precedente di questo articolo faceva erroneamente riferimento a Background Fetch come a uno "standard web". Al momento l'API non è inclusa nel canale standard, ma la specifica è disponibile nel WICG come bozza del report del gruppo della community.