Présentation de la récupération en arrière-plan

Jake Archibald

En 2015, nous avons lancé la synchronisation en arrière-plan, qui permet au service worker de différer le travail jusqu'à ce que l'utilisateur dispose d'une connexion. Cela signifie que l'utilisateur peut saisir un message, cliquer sur "Envoyer" et quitter le site en sachant que le message sera envoyé maintenant ou lorsqu'il sera connecté.

Il s'agit d'une fonctionnalité utile, mais elle nécessite que le service worker soit actif pendant toute la durée de l'extraction. Ce n'est pas un problème pour les tâches courtes, comme l'envoi d'un message, mais si la tâche prend trop de temps, le navigateur arrête le service worker, sinon il risque de compromettre la confidentialité et la batterie de l'utilisateur.

Que faire si vous devez télécharger un élément qui peut prendre beaucoup de temps, comme un film, des podcasts ou des niveaux d'un jeu ? C'est à cela que sert la récupération en arrière-plan.

La récupération en arrière-plan est disponible par défaut depuis Chrome 74.

Voici une courte démonstration de deux minutes montrant l'état traditionnel des choses par rapport à l'utilisation de la récupération en arrière-plan:

Essayez la démo vous-même et parcourez le code.

Fonctionnement

La récupération en arrière-plan fonctionne comme suit:

1. Vous demandez au navigateur d'effectuer un groupe de récupérations en arrière-plan.
2. Le navigateur récupère ces éléments et affiche la progression à l'utilisateur.
3. Une fois la récupération terminée ou échouée, le navigateur ouvre votre service worker et déclenche un événement pour vous indiquer ce qui s'est passé. C'est là que vous décidez de ce que vous voulez faire des réponses, le cas échéant.

Si l'utilisateur ferme les pages de votre site après l'étape 1, ce n'est pas grave, le téléchargement continue. Étant donné que la récupération est très visible et facilement interrompue, il n'y a pas de problème de confidentialité lié à une tâche de synchronisation en arrière-plan beaucoup trop longue. Comme le service worker n'est pas exécuté en permanence, il n'y a pas de risque qu'il abuse du système, par exemple en minant des bitcoins en arrière-plan.

Sur certaines plates-formes (telles qu'Android), le navigateur peut se fermer après l'étape 1, car il peut transférer la récupération au système d'exploitation.

Si l'utilisateur lance le téléchargement en mode hors connexion ou se déconnecte pendant le téléchargement, la récupération en arrière-plan est suspendue et reprise ultérieurement.

L'API

Détection de caractéristiques

Comme pour toute nouvelle fonctionnalité, vous devez vérifier si le navigateur est compatible avec celle-ci. Pour la récupération en arrière-plan, il suffit de:

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

Démarrer une récupération en arrière-plan

L'API principale dépend de l'enregistrement d'un service worker. Assurez-vous donc d'avoir d'abord enregistré un service worker. Ensuite :

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 utilise trois arguments:

backgroundFetch.fetch renvoie une promesse qui se résout avec un BackgroundFetchRegistration. Je vous en parlerai en détail plus tard. La promesse est rejetée si l'utilisateur a désactivé les téléchargements ou si l'un des paramètres fournis n'est pas valide.

Fournir de nombreuses requêtes pour une seule récupération en arrière-plan vous permet de combiner des éléments qui sont logiquement une seule chose pour l'utilisateur. Par exemple, un film peut être divisé en milliers de ressources (typique avec MPEG-DASH) et être accompagné de ressources supplémentaires telles que des images. Un niveau de jeu peut être réparti entre de nombreuses ressources JavaScript, image et audio. Mais pour l'utilisateur, il s'agit simplement du "film" ou du "niveau".

Obtenir une récupération en arrière-plan existante

Vous pouvez récupérer une extraction en arrière-plan existante comme ceci:

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

... en transmettant l'id de l'extraction en arrière-plan souhaitée. get renvoie undefined si aucune récupération en arrière-plan active n'est associée à cet ID.

Une récupération en arrière-plan est considérée comme "active" à partir du moment où elle est enregistrée, jusqu'à ce qu'elle aboutisse, échoue ou soit interrompue.

Vous pouvez obtenir la liste de toutes les récupérations en arrière-plan actives à l'aide de getIds:

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

Enregistrements de récupération en arrière-plan

Un BackgroundFetchRegistration (bgFetch dans les exemples ci-dessus) possède les éléments suivants:

Suivre la progression

Pour ce faire, utilisez l'événement progress. N'oubliez pas que downloadTotal correspond à la valeur que vous avez fournie, ou à 0 si vous n'en avez pas fourni.

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

Obtenir les requêtes et les réponses

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 est un BackgroundFetchRecord et se présente comme suit:

Événements de service worker

Les objets d'événement présentent les caractéristiques suivantes:

Réagir en cas de réussite ou d'échec

Nous avons déjà vu l'événement progress, mais il n'est utile que lorsque l'utilisateur a une page ouverte sur votre site. L'avantage principal de la récupération en arrière-plan est que les éléments continuent de fonctionner après que l'utilisateur a quitté la page ou même fermé le navigateur.

Si la récupération en arrière-plan aboutit, votre service worker reçoit l'événement backgroundfetchsuccess, et event.registration correspond à l'enregistrement de la récupération en arrière-plan.

Après cet événement, les requêtes et les réponses extraites ne sont plus accessibles. Si vous souhaitez les conserver, déplacez-les vers un emplacement tel que l'API de cache.

Comme pour la plupart des événements du service worker, utilisez event.waitUntil pour que le service worker sache quand l'événement est terminé.

Par exemple, dans votre 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'échec peut être dû à un seul code 404, qui n'était peut-être pas important pour vous. Il peut donc être utile de copier certaines réponses dans un cache, comme ci-dessus.

Réaction au clic

L'UI affichant la progression et le résultat du téléchargement est cliquable. L'événement backgroundfetchclick du service worker vous permet de réagir à cela. Comme ci-dessus, event.registration correspond à l'enregistrement de récupération en arrière-plan.

La chose courante à faire avec cet événement est d'ouvrir une fenêtre:

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

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

Ressources supplémentaires

• Explication
• Spécification
• Enregistrement sur chromestatus.com

Correction: Une version précédente de cet article faisait référence à la récupération en arrière-plan comme étant une "norme Web". L'API n'est pas actuellement dans la voie de normalisation. La spécification est disponible dans le WICG sous la forme d'un projet de rapport du groupe de la communauté.