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 pour différer le travail jusqu'à ce que l'utilisateur dispose d'une connectivité. Cela signifie que l'utilisateur peut saisir puis cliquez sur "Envoyer" et quittez le site en sachant que le message sera envoyé immédiatement ou lorsqu'il doivent être connectés.

Il s'agit d'une fonctionnalité utile, mais elle nécessite que le service worker soit actif pendant la durée de récupérer. Ce n'est pas un problème pour des tâches courtes comme l'envoi d'un message, mais si la tâche prend pendant trop longtemps, le navigateur tuera le service worker. Sinon, il s'agit d'un risque pour la confidentialité de la batterie.

Que se passe-t-il si vous avez besoin de télécharger un contenu qui peut prendre beaucoup de temps, comme un film, un podcast ou différents 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 démonstration rapide de deux minutes qui illustre l'état classique des choses par rapport à l'utilisation de la récupération en arrière-plan:

Essayez la démo 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 d'extractions en arrière-plan.
2. Le navigateur récupère ces éléments et présente 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 expliquer ce qui s'est passé. C'est ici que vous décidez de ce que vous souhaitez faire des réponses, le cas échéant.

Si l'utilisateur ferme des pages de votre site après l'étape 1, le téléchargement se poursuit. En effet, que l'extraction est très visible et facilement annulable, cela ne pose pas de problème de confidentialité de synchronisation en arrière-plan. Comme le service worker n'est pas constamment en cours d'exécution, il n'est pas nécessaire qu'il pourrait abuser du système, comme miner des bitcoins en arrière-plan.

Sur certaines plates-formes (comme Android), le navigateur peut se fermer après l'étape 1, car le navigateur peut transmettre l'extraction au système d'exploitation.

Si l'utilisateur lance le téléchargement hors connexion ou passe hors connexion pendant le téléchargement, l'arrière-plan la récupération sera suspendue et réactivée ultérieurement.

L'API

Détection de caractéristiques

Comme pour toute nouvelle fonctionnalité, vous devez vérifier si le navigateur la prend en charge. Pour la récupération en arrière-plan, C'est aussi simple que cela:

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

Lancer une récupération en arrière-plan

L'API principale bloque 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 comporte trois arguments:

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

Fournir plusieurs requêtes pour une seule récupération en arrière-plan vous permet de combiner des éléments qui sont logiquement pour l'utilisateur. Par exemple, un film peut être divisé en milliers de ressources MPEG-DASH), et sont fournis avec des ressources supplémentaires comme des images. Un niveau d'un jeu peut être réparti sur plusieurs JavaScript, image et ressources audio. Mais pour l'utilisateur, il ne s'agit que de "le film" ou "le 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 s'il n'y a pas de une récupération active en arrière-plan associée à cet ID.

Une récupération en arrière-plan est considérée comme "active" entre son enregistrement et la réussite de l'opération, échoue ou est annulée.

Vous pouvez obtenir la liste de toutes les récupérations actives en arrière-plan à 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 élément BackgroundFetchRegistration (bgFetch dans les exemples ci-dessus) présente les caractéristiques suivantes:

Suivi de la progression

Pour ce faire, utilisez l'événement progress. Rappelez-vous que downloadTotal est la valeur que vous ou 0 si vous n'avez pas fourni de valeur.

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 ressemble à ceci:

É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 ouvert une page sur sur votre site. Le principal avantage de la récupération en arrière-plan est que tout fonctionne une fois que l'utilisateur a quitté ou ferme le navigateur.

Si la récupération en arrière-plan réussit, votre service worker recevra backgroundfetchsuccess, et event.registration sera l'enregistrement de la récupération en arrière-plan.

Après cet événement, les requêtes et les réponses récupérées ne sont plus accessibles. Par conséquent, si vous souhaitez les conserver, déplacez-les par exemple dans l'API cache.

Comme pour la plupart des événements de service worker, utilisez event.waitUntil afin qu'ils sachent 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 est peut-être dû à une seule erreur 404, qui n'était peut-être pas importante pour vous. valent la peine de copier certaines réponses dans un cache, comme ci-dessus.

Réaction au clic

L'interface utilisateur affichant la progression et le résultat du téléchargement est cliquable. L'événement backgroundfetchclick de le service worker vous permet de réagir. Comme indiqué ci-dessus, event.registration sera l'arrière-plan récupérer l'enregistrement.

L'action la plus courante dans 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
• entrée chromestatus.com

Correction: une version précédente de cet article mentionnait à tort la récupération de l'arrière-plan comme une "norme Web". L'API n'est pas encore en phase de normalisation. La spécification est disponible dans WICG sous la forme d'un projet de rapport de groupe communautaire.