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'elle 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 Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

Dans l'onglet qui vient de s'ouvrir, vérifiez le comportement du site Web en mode hors connexion:

Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Ouvrez les outils pour les développeurs Chrome, puis sélectionnez le panneau "Network".
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 mise en cache préalable, de sorte qu'elle puisse toujours être mise en cache lors de l'événement install du service worker.

Vous devez généralement demander à Workbox d'ajouter ce fichier à la liste de précache 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. C'est ce que fait le code suivant (public/sw.js) :

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

Ajoutez ensuite le code permettant d'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 il ne se rend pas compte que l'appel importScripts() sur la ligne 1 importe la bibliothèque.

Le code :

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

Pour tester cette fonctionnalité:

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

La page HTML de remplacement s'affiche:

Demander une autorisation pour les notifications

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

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 du navigateur par défaut. 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.

Conserver les requêtes hors connexion et réessayer une fois en ligne

Implémentez ensuite la synchronisation en arrière-plan Workbox pour conserver les requêtes hors connexion et les relancer lorsque le navigateur détecte un retour de la connectivité.

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 relancées ultérieurement. Ces requêtes seront conservées dans IndexedDB.
maxRetentionTime indique la durée pendant laquelle une requête peut faire l'objet d'une nouvelle tentative. Dans le cas présent, nous avons choisi 60 minutes (après quoi elles seront supprimées).
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 en file d'attente soient récupérées, puis extraites du réseau.
La réponse du 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 adressées à l'URL de recherche (/search_action) et transmettez le bgSyncPlugin défini précédemment. 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 en bas de public/sw.js afin de définir une stratégie de mise en cache pour les requêtes provenant de notifications. Utilisez une stratégie CacheFirst afin qu'elles puissent être diffusées à 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 permettant d'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.
Dans la liste déroulante Throttling (Limitation de la bande passante), rebasculez sur Online (En ligne).
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 effectuer un actualisation forcée pour vous assurer que votre service worker est à jour.
Dans la liste déroulante Limitation, sélectionnez à nouveau Hors connexion.
Saisissez une requête de recherche, puis cliquez à 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 de recherche, puis cliquez à nouveau sur le bouton Rechercher.
Dans la liste déroulante Throttling (Limitation de la bande passante), rebasculez sur Online (En ligne).

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

Conclusion

Workbox propose de nombreuses fonctionnalités intégrées pour rendre vos PWA plus résilientes et attrayantes. Dans cet atelier de programmation, vous avez découvert comment implémenter l'API Background Sync à l'aide de l'abstraction Workbox, afin de vous assurer que les requêtes des utilisateurs hors connexion ne sont pas perdues et qu'elles peuvent être relancé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 les applications de chat, la publication de messages sur un réseau social, etc.