Lorsque vous envoyez des requêtes à un serveur Web, l'échec est un risque. Cela peut être dû au fait que l'utilisateur a perdu la connexion 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 relancer manuellement l'opération lorsqu'il est de nouveau en ligne. Ce n'est pas toujours ce dont les utilisateurs se souviendront systématiquement.
Si cela décrit votre application, et si un service worker fait partie de l'opération, il est préférable de réessayer d'envoyer les requêtes ayant échoué lorsque l'utilisateur est de nouveau en ligne. L'API BackgroundSync permet de résoudre ce problème. Lorsqu'un service worker détecte l'échec d'une requête réseau, il peut s'inscrire pour recevoir un événement sync lorsque le navigateur détecte que la connectivité est renvoyée. L'événement sync peut être diffusé même si l'utilisateur a quitté la page qui l'a enregistré, ce qui le rend plus efficace que les autres méthodes de nouvelle tentative d'exécution des requêtes ayant échoué.
Workbox extrait cette API à l'aide du module workbox-background-sync, qui facilite l'utilisation de l'API BackgroundSync avec les autres modules Workbox. Elle implémente également une stratégie de remplacement pour les navigateurs qui ne sont pas encore compatibles avec BackgroundSync.
Utilisation de base
Le BackgroundSyncPlugin est exporté à partir du module workbox-background-sync. Il peut être utilisé pour mettre en file d'attente les requêtes ayant échoué et les relancer lorsque de futurs événements sync 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 met en correspondance des requêtes POST avec une route d'API qui récupère des données JSON. Si l'utilisateur est hors connexion, BackgroundSyncPlugin réessaiera la requête lorsqu'il se reconnectera, mais seulement pendant une journée maximum.
Utilisation avancée
workbox-background-sync fournit également une classe Queue, à laquelle vous pouvez instancier et 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 essayées lorsque le navigateur pense que la connectivité a été 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 fait partie du nom de la balise créée par la méthode register() fournie par l'SyncManager globale. Il s'agit également du 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 y ajouter les 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 qui ne sont pas 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 de relancer une requête ayant échoué, mais une sorte de solution de secours.
Test de workbox-background-sync...
Il peut être difficile de tester la synchronisation en arrière-plan, mais vous pouvez le faire dans les outils pour les développeurs Chrome. La meilleure approche actuelle est quelque chose comme ceci:
- Chargez une page qui enregistre votre service worker.
- 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 demandes provenant de la page, mais celles du service worker continueront d'être traitées.
- 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 mises en file d'attente en consultantChrome DevTools > Application > IndexedDB > workbox-background-sync > requests. - Restaurez la connectivité réseau ou réactivez votre serveur Web.
- Forcez un événement
syncanticipé en accédant àChrome DevTools > Application > Service Workers. Saisissez le nom de tagworkbox-background-sync:<your queue name>, où<your queue name>correspond au nom de la file d'attente que vous avez définie. - Cliquez sur le bouton "Synchroniser".
- Vous devriez maintenant voir les requêtes réseau ayant échoué, retentées et validées. Par conséquent, le magasin IndexedDB doit être vide, car les requêtes ont bien été relancées.
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 permettre aux utilisateurs de renvoyer les requêtes API ayant échoué pour ne pas perdre les données qu'ils souhaitaient envoyer à votre API. Elle peut également être utilisée pour combler les lacunes dans 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é pour 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 donnant davantage de possibilités d'améliorer l'expérience utilisateur et les fonctionnalités de votre application Web.