Cette page a été traduite par l'API Cloud Translation.

Créer des expériences de recherche résilientes avec Workbox

Demián Renzulli

Jeff Posnick

Cet atelier de programmation vous explique comment implémenter une expérience de recherche résiliente avec Workbox. L'application de démonstration qu'il utilise contient un champ de recherche qui appelle un point de terminaison de serveur et redirige l'utilisateur vers une page HTML de base.

Mesurer

Avant d'ajouter des optimisations, il est toujours judicieux d'analyser d'abord l'état actuel de l'application.

Cliquez sur Remixer pour modifier pour rendre le projet modifiable.
Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .

Dans le nouvel onglet qui vient de s'ouvrir, vérifiez le comportement du site Web lorsqu'il est hors connexion:

Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
Cliquez sur l'onglet Réseau.
Ouvrez les outils pour les développeurs Chrome, puis sélectionnez le panneau "Réseau".
Dans la liste déroulante Limitation, sélectionnez Hors connexion.
Dans l'application de démonstration, saisissez une requête de recherche, puis cliquez sur le bouton Rechercher.

La page d'erreur standard du navigateur s'affiche:

Fournir une réponse de remplacement

Le service worker contient le code permettant d'ajouter la page hors connexion à la liste de préchargement. Il peut donc toujours être mis en cache lors de l'événement install du service worker.

En règle générale, vous devez demander à Workbox d'ajouter ce fichier à la liste de préchargement au moment de la compilation, en intégrant la bibliothèque à l'outil de compilation de votre choix (par exemple, webpack ou gulp).

Pour plus de simplicité, nous l'avons déjà fait pour vous. Le code suivant à public/sw.js effectue les opérations suivantes:

const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);

Ajoutez ensuite du code pour utiliser la page hors connexion comme réponse de remplacement:

Pour afficher la source, appuyez sur Afficher la source.
Ajoutez le code suivant en bas de public/sw.js:

workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());

workbox.routing.setCatchHandler(({event}) => {
  switch (event.request.destination) {
    case 'document':
      return caches.match(FALLBACK_HTML_URL);
      break;
    default:
      return Response.error();
  }
});

Remarque : L'interface utilisateur de Glitch indique workbox is not defined, car elle ne réalise pas que l'appel importScripts() de la ligne 1 importe la bibliothèque.

Le code :

Définit une stratégie "Réseau uniquement" par défaut qui s'applique à toutes les requêtes.
Déclarer un gestionnaire d'erreurs global en appelant workbox.routing.setCatchHandler() pour gérer les requêtes ayant échoué. Lorsque les requêtes concernent des documents, une page HTML hors connexion de remplacement est renvoyée.

Pour tester cette fonctionnalité:

Revenez à l'autre onglet qui exécute votre application.
Rétablissez la valeur En ligne dans la liste déroulante Limitation.
Appuyez sur le bouton Retour de Chrome pour revenir à la page de recherche.
Assurez-vous que la case Disable cache (Désactiver le cache) dans DevTools est désactivée.
Appuyez de manière prolongée sur le bouton Actualiser de Chrome, puis sélectionnez Vider le cache et actualiser de manière forcée pour vous assurer que votre service worker est mis à jour.
Rétablissez la valeur Hors connexion dans la liste déroulante Limitation.
Saisissez une requête de recherche, puis cliquez de nouveau sur le bouton Rechercher.

La page HTML de remplacement s'affiche:

Demander une autorisation pour les notifications

Par souci de simplicité, la page hors connexion à views/index_offline.html contient déjà le code permettant de demander des autorisations de notification dans un bloc de script en bas:

function requestNotificationPermission(event) {
  event.preventDefault();

  Notification.requestPermission().then(function (result) {
    showOfflineText(result);
  });
}

Le code :

Lorsque l'utilisateur clique sur S'abonner aux notifications, la fonction requestNotificationPermission() est appelée, qui appelle Notification.requestPermission() pour afficher l'invite d'autorisation par défaut du navigateur. La promesse est résolue avec l'autorisation choisie par l'utilisateur, qui peut être granted, denied ou default.
Transmet l'autorisation résolue à showOfflineText() pour afficher le texte approprié à l'utilisateur.

Persister les requêtes hors connexion et réessayer lorsque vous êtes de nouveau en ligne

Ensuite, implémentez la synchronisation en arrière-plan Workbox pour conserver les requêtes hors connexion afin qu'elles puissent être réessayées lorsque le navigateur détecte que la connectivité est rétablie.

Ouvrez public/sw.js pour le modifier.
Ajoutez le code suivant à la fin du fichier:

const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
  maxRetentionTime: 60,
  onSync: async ({queue}) => {
    let entry;
    while ((entry = await queue.shiftRequest())) {
      try {
        const response = await fetch(entry.request);
        const cache = await caches.open('offline-search-responses');
        const offlineUrl = `${entry.request.url}&notification=true`;
        cache.put(offlineUrl, response);
        showNotification(offlineUrl);
      } catch (error) {
        await this.unshiftRequest(entry);
        throw error;
      }
    }
  },
});

Le code :

workbox.backgroundSync.Plugin contient la logique permettant d'ajouter les requêtes ayant échoué à une file d'attente afin qu'elles puissent être réessayées ultérieurement. Ces requêtes seront conservées dans IndexedDB.
maxRetentionTime indique la durée pendant laquelle une requête peut être réessayée. Dans ce cas, nous avons choisi 60 minutes (après quoi il sera supprimé).
onSync est la partie la plus importante de ce code. Ce rappel sera appelé lorsque la connexion sera rétablie afin que les requêtes mises en file d'attente soient récupérées, puis extraites du réseau.
La réponse réseau est ajoutée au cache offline-search-responses, en ajoutant le paramètre de requête &notification=true, afin que cette entrée de cache puisse être récupérée lorsqu'un utilisateur clique sur la notification.

Pour intégrer la synchronisation en arrière-plan à votre service, définissez une stratégie NetworkOnly pour les requêtes envoyées à l'URL de recherche (/search_action) et transmettez l'bgSyncPlugin précédemment défini. Ajoutez le code suivant en bas de public/sw.js:

const matchSearchUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return url.pathname === '/search_action' && !(notificationParam === 'true');
};

workbox.routing.registerRoute(
  matchSearchUrl,
  new workbox.strategies.NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
);

Cela indique à Workbox de toujours accéder au réseau et, en cas d'échec des requêtes, d'utiliser la logique de synchronisation en arrière-plan.

Ensuite, ajoutez le code suivant au bas de public/sw.js pour définir une stratégie de mise en cache pour les requêtes provenant de notifications. Utilisez une stratégie CacheFirst afin qu'ils puissent être diffusés à partir du cache.

const matchNotificationUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return (url.pathname === '/search_action' && (notificationParam === 'true'));
};

workbox.routing.registerRoute(matchNotificationUrl,
  new workbox.strategies.CacheFirst({
     cacheName: 'offline-search-responses',
  })
);

Enfin, ajoutez le code pour afficher les notifications:

function showNotification(notificationUrl) {
  if (Notification.permission) {
     self.registration.showNotification('Your search is ready!', {
        body: 'Click to see you search result',
        icon: '/img/workbox.jpg',
        data: {
           url: notificationUrl
        }
     });
  }
}

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
     clients.openWindow(event.notification.data.url)
  );
});

Tester la fonctionnalité

Revenez à l'autre onglet qui exécute votre application.
Rétablissez la valeur En ligne dans la liste déroulante Limitation.
Appuyez sur le bouton Retour de Chrome pour revenir à la page de recherche.
Appuyez de manière prolongée sur le bouton Actualiser de Chrome, puis sélectionnez Vider le cache et actualiser de manière forcée pour vous assurer que votre service worker est mis à jour.
Rétablissez la valeur Hors connexion dans la liste déroulante Limitation.
Saisissez une requête de recherche, puis cliquez de nouveau sur le bouton Rechercher.
Cliquez sur S'abonner aux notifications.
Lorsque Chrome vous demande si vous souhaitez autoriser l'application à envoyer des notifications, cliquez sur Autoriser.
Saisissez une autre requête, puis cliquez de nouveau sur le bouton Rechercher.
Rétablissez la valeur En ligne dans la liste déroulante Limitation.

Une fois la connexion rétablie, une notification s'affiche:

Conclusion

Workbox fournit de nombreuses fonctionnalités intégrées pour rendre vos PWA plus résilients et plus attrayants. Dans cet atelier de programmation, vous avez découvert comment implémenter l'API Background Sync via l'abstraction Workbox pour vous assurer que les requêtes utilisateur hors connexion ne sont pas perdues et peuvent être réessayées une fois la connexion rétablie. La démonstration est une application de recherche simple, mais vous pouvez utiliser une implémentation similaire pour des scénarios et des cas d'utilisation plus complexes, y compris des applications de chat, la publication de messages sur un réseau social, etc.