Introduzione al recupero in background

Jake Archibald

Nel 2015 abbiamo introdotto la sincronizzazione in background, che consente al service worker di posticipare il lavoro finché l'utente non ha connettività. Ciò significa che l'utente può digitare un messaggio, premere Invia e uscire dal sito sapendo che il messaggio verrà inviato ora o quando avrà una connessione.

È una funzionalità utile, ma richiede che il service worker sia attivo per tutta la durata del recupero. Non è un problema per attività brevi come l'invio di un messaggio, ma se l'attività richiede troppo tempo, il browser interromperà il service worker, altrimenti la privacy e la batteria dell'utente sono a rischio.

Cosa succede se devi scaricare qualcosa che potrebbe richiedere molto tempo, come un film, podcast o livelli di un gioco? A questo serve il recupero dello sfondo.

Background Fetch è disponibile per impostazione predefinita a partire da Chrome 74.

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

Come funziona

Il recupero dello sfondo funziona nel seguente modo:

1. Indichi al browser di eseguire un gruppo di recuperi in background.
2. Il browser recupera questi elementi, mostrando all'utente lo stato di avanzamento.
3. Una volta completato o non riuscito il recupero, il browser apre il service worker e attiva un evento per comunicarti cosa è successo. Qui decidi cosa fare con le risposte, se necessario.

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

Su alcune piattaforme (come Android) è possibile che il browser si chiuda dopo il passaggio 1, in quanto può delegare 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 delle funzionalità

Come per qualsiasi nuova funzionalità, devi rilevare se il browser la supporta. Per il recupero dello sfondo, è semplice come:

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

Avviare un recupero dello sfondo

L'API principale dipende dalla registrazione di un service worker, quindi assicurati di aver registrato prima 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. Approfondiremo i dettagli in un secondo momento. La promessa viene rifiutata se l'utente ha disattivato i download o se uno dei parametri forniti non è valido.

Fornire molte richieste per un singolo recupero in background consente di combinare elementi che per l'utente sono logicamente un'unica cosa. Ad esempio, un film può essere suddiviso in migliaia di risorse (tipico di MPEG-DASH) e includere risorse aggiuntive come le immagini. Un livello di un gioco potrebbe essere distribuito su molte risorse JavaScript, immagini e audio. Per l'utente, invece, è semplicemente "il film" o "il livello".

Ottenere un recupero dello sfondo esistente

Puoi ottenere un recupero in background esistente in questo modo:

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

… passando l'id del recupero in background che vuoi. get restituisce undefined se non è presente un recupero in background attivo con questo ID.

Un recupero in background è considerato "attivo" dal momento della registrazione fino al completamento, all'interruzione o all'esito negativo.

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 dello sfondo

Un BackgroundFetchRegistration (bgFetch negli esempi precedenti) ha le seguenti caratteristiche:

Monitorare i progressi

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

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}%`);
});

Ottenere 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 questo aspetto:

Eventi service worker

Gli oggetti evento hanno le seguenti caratteristiche:

Reagire a successi e 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 ha lasciato la pagina o anche chiuso il browser.

Se il recupero in background viene completato correttamente, il 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'altra posizione, ad esempio nell'API cache.

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

Ad esempio, nel 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 404, che potrebbe non essere importante per te, quindi potrebbe valere comunque la pena copiare alcune risposte in una cache come sopra.

Reagire al clic

L'interfaccia utente che mostra l'avanzamento e il risultato del download è selezionabile. L'evento backgroundfetchclick nel service worker ti consente di reagire a questo problema. 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

• Explainer
• Specifiche
• Voce di chromestatus.com

Correzione: una versione precedente di questo articolo faceva erroneamente riferimento a Background Fetch come "standard web". L'API non è attualmente in fase di standardizzazione. La specifica è disponibile in WICG come bozza di report del gruppo della community.