Réessayer d'exécuter des requêtes lorsque vous êtes à nouveau en ligne

Lorsque vous envoyez des requêtes à un serveur Web, une défaillance est possible. Cela peut être dû au fait que l'utilisateur a perdu la connectivité ou que le serveur distant est en panne.

Bien que cette documentation se concentre principalement sur la gestion des requêtes GET dans un service worker, d'autres méthodes telles que POST, PUT ou DELETE peuvent entrer en jeu. Ces méthodes sont souvent utilisées pour communiquer avec les API backend afin de fournir des données à une application Web. Lorsque ces requêtes échouent en l'absence d'un service worker, l'utilisateur doit les relancer manuellement une fois qu'il est de nouveau en ligne. Les utilisateurs ne s'en souviennent pas toujours.

Si cette description correspond à votre application, et si un service worker fait partie de la combinaison, nous vous conseillons dans l'idéal de réessayer d'envoyer les requêtes ayant échoué lorsque l'utilisateur sera de nouveau en ligne. L'API BackgroundSync propose une solution à ce problème. Lorsqu'un service worker détecte l'échec d'une requête réseau, il peut s'enregistrer pour recevoir un événement sync lorsque le navigateur détecte un retour de la connectivité. L'événement sync peut être diffusé même si l'utilisateur a quitté la page dans laquelle il l'a enregistré. Il est donc plus efficace que d'autres méthodes pour relancer des requêtes ayant échoué.

Workbox extrait cette API avec le module workbox-background-sync, ce qui facilite son utilisation avec d'autres modules Workbox. Il implémente également une stratégie de remplacement pour les navigateurs qui ne sont pas encore compatibles avec BackgroundSync.

Utilisation de base

BackgroundSyncPlugin est exporté à partir du module workbox-background-sync et peut être utilisé pour mettre en file d'attente les requêtes ayant échoué et les relancer lorsque des événements sync ultérieurs se déclenchent:

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  // An optional third parameter specifies the request method
  'POST'
);

Ici, BackgroundSyncPlugin est appliqué à une route qui correspond aux requêtes POST sur une route API qui récupère les données JSON. Si l'utilisateur est hors connexion, BackgroundSyncPlugin relancera la requête lorsqu'il sera de nouveau en ligne, mais uniquement pendant un jour maximum.

Utilisation avancée

workbox-background-sync fournit également une classe Queue, que vous pouvez instancier et à laquelle ajouter les requêtes ayant échoué. Comme c'est également le cas avec BackgroundSyncPlugin, les requêtes ayant échoué sont stockées dans IndexedDB et sont essayées lorsque le navigateur pense que la connectivité est restaurée.

Créer une file d'attente

Pour créer une file d'attente, instanciez un objet Queue avec une chaîne représentant le nom de la file d'attente:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

Le nom de la file d'attente est utilisé dans le nom du tag créé par la méthode register() fournie par le SyncManager global. C'est également le nom utilisé pour le magasin d'objets fourni par la base de données IndexedDB.

Ajouter des requêtes à la file d'attente

Après avoir créé l'instance Queue, vous pouvez lui ajouter des requêtes ayant échoué à l'aide de sa méthode pushRequest():

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', (event) => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

Une fois ajoutées à la file d'attente, les requêtes sont automatiquement relancées lorsque le service worker reçoit l'événement sync, car le navigateur pense que le réseau est à nouveau disponible. Les navigateurs non compatibles avec l'API BackgroundSync relancent la requête chaque fois que le service worker démarre. Il s'agit d'un moyen moins efficace pour relancer une requête ayant échoué, mais il s'agit en quelque sorte d'une solution de secours.

Test de workbox-background-sync...

Tester le comportement de la synchronisation en arrière-plan peut s'avérer délicat, mais vous pouvez le faire dans les outils pour les développeurs Chrome. La meilleure approche actuelle ressemble à ceci:

1. Chargez une page qui enregistre votre service worker.
2. Désactivez la connexion réseau de votre ordinateur ou votre serveur Web. N'activez pas le mode hors connexion dans les outils pour les développeurs Chrome ! La case à cocher "hors connexion" n'affecte que les requêtes provenant de la page, mais les requêtes de service worker continuent d'être traitées.
3. Effectuez des requêtes réseau qui doivent être mises en file d'attente avec workbox-background-sync. Vous pouvez vérifier les requêtes qui ont été mises en file d'attente dans Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests.
4. À présent, restaurez la connectivité réseau ou rallumez votre serveur Web.
5. Forcez un événement sync anticipé en accédant à Chrome DevTools > Application > Service Workers. Saisissez le nom de balise de workbox-background-sync:<your queue name>, où <your queue name> est le nom de la file d'attente que vous avez définie.
6. Cliquez sur le bouton "Synchroniser" bouton.
   
7. Vous devriez maintenant voir que les requêtes réseau qui ont échoué précédemment ont été relancées et traitées. Par conséquent, le store IndexedDB doit être vide, car les requêtes ont bien été relues.

Conclusion

Utiliser workbox-background-sync pour relancer les requêtes réseau ayant échoué peut être un excellent moyen d'améliorer l'expérience utilisateur et la fiabilité de votre application. Par exemple, vous pouvez autoriser les utilisateurs à renvoyer les requêtes API ayant échoué afin de ne pas perdre les données que vous vouliez envoyer à votre API. Elle peut également être utilisée pour combler les lacunes de vos propres données, telles que les analyses. En fait, le module workbox-google-analytics utilise workbox-background-sync en arrière-plan pour relancer les requêtes ayant échoué afin d'envoyer des données à Google Analytics.

Quel que soit votre cas d'utilisation, workbox-background-sync simplifie ce type de tâche en améliorant l'expérience des développeurs et en vous offrant plus de possibilités d'améliorer l'expérience utilisateur et les fonctionnalités de votre application Web.