Crea experiencias de búsqueda resilientes con Workbox

Demián Renzulli
Demián Renzulli
X GitHub Error
Jeff Posnick

En este codelab, se muestra cómo implementar una experiencia de búsqueda resiliente con Workbox. La app de demostración que usa contiene un cuadro de búsqueda que llama a un extremo del servidor y redirecciona al usuario a una página HTML básica.

Medir

Antes de agregar optimizaciones, siempre se recomienda analizar primero el estado actual de la aplicación.

  • Haz clic en Remix to Edit para que el proyecto sea editable.
  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.

En la nueva pestaña que se acaba de abrir, comprueba cómo se comporta el sitio web cuando está sin conexión:

  1. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  2. Haga clic en la pestaña Red.
  3. Abra las Herramientas para desarrolladores de Chrome y seleccione el panel Red.
  4. En la lista desplegable de Regulación, selecciona Sin conexión.
  5. En la app de demostración, ingresa una búsqueda y, luego, haz clic en el botón Search.

Se muestra la página de error estándar del navegador:

Captura de pantalla de la UX sin conexión predeterminada en el navegador.

Cómo proporcionar una respuesta de resguardo

El service worker contiene el código para agregar la página sin conexión a la lista de almacenamiento previo en caché, de modo que siempre se pueda almacenar en caché en el evento install del service worker.

Por lo general, debes indicarle a Workbox que agregue este archivo a la lista de precaché en el tiempo de compilación. Para ello, integra la biblioteca con la herramienta de compilación que elijas (p. ej., webpack o gulp).

Para simplificar, ya lo hicimos por ti. Puedes hacerlo con el siguiente código en public/sw.js:

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

A continuación, agrega código para usar la página sin conexión como respuesta de resguardo:

  1. Para ver la fuente, presiona Ver fuente.
  2. Agrega el siguiente código al final 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();
  }
});

El código hace lo siguiente:

  • Define una estrategia predeterminada de solo red que se aplicará a todas las solicitudes.
  • Declara un controlador de errores global mediante una llamada a workbox.routing.setCatchHandler() para administrar las solicitudes con errores. Cuando las solicitudes sean de documentos, se mostrará una página HTML sin conexión de resguardo.

Para probar esta función, haz lo siguiente:

  1. Regresa a la otra pestaña que está ejecutando la app.
  2. Vuelve a establecer la lista desplegable Regulación en En línea.
  3. Presiona el botón Atrás de Chrome para volver a la página de búsqueda.
  4. Asegúrate de que la casilla de verificación Inhabilitar caché en Herramientas para desarrolladores esté inhabilitada.
  5. Mantén presionado el botón Volver a cargar de Chrome y selecciona Vaciar la caché y volver a cargar la página de forma forzosa para asegurarte de que se actualice el service worker.
  6. Vuelve a establecer la lista desplegable Regulación en Sin conexión.
  7. Ingresa una búsqueda y vuelve a hacer clic en el botón Buscar.

La página HTML de resguardo se muestra:

Captura de pantalla de la UX sin conexión personalizada en el navegador.

Cómo solicitar permisos de notificaciones

Para simplificar, la página sin conexión en views/index_offline.html ya contiene el código para solicitar permisos de notificación en un bloque de secuencia de comandos en la parte inferior:

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

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

El código hace lo siguiente:

  • Cuando el usuario hace clic en suscribirse a las notificaciones, se llama a la función requestNotificationPermission(), que llama a Notification.requestPermission(), para mostrar el mensaje de permiso predeterminado del navegador. La promesa se resuelve con el permiso que eligió el usuario, que puede ser granted, denied o default.
  • Pasa el permiso resuelto a showOfflineText() para mostrar el texto apropiado al usuario.

Conserva las consultas sin conexión y vuelve a intentarlo cuando vuelvas a estar en línea.

A continuación, implementa la Sincronización en segundo plano de Workbox para conservar las consultas sin conexión, de modo que se puedan volver a intentar cuando el navegador detecte que se devolvió la conectividad.

  1. Abre public/sw.js para editarlo.
  2. Agrega el siguiente código al final del archivo:
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;
      }
    }
  },
});

El código hace lo siguiente:

  • workbox.backgroundSync.Plugin contiene la lógica para agregar solicitudes con errores a una cola de modo que se puedan volver a intentar más tarde. Estas solicitudes se conservarán en IndexedDB.
  • maxRetentionTime indica la cantidad de tiempo que se puede reintentar una solicitud. En este caso, elegimos 60 minutos (después de los cuales se descartarán).
  • onSync es la parte más importante de este código. Se llamará a esta devolución de llamada cuando se restablezca la conexión para que se recuperen las solicitudes en cola y, luego, se recuperen desde la red.
  • Se agrega la respuesta de red a la caché offline-search-responses y se agrega el parámetro de consulta &notification=true, de modo que se pueda obtener esta entrada de caché cuando un usuario haga clic en la notificación.

Para integrar la sincronización en segundo plano con tu servicio, define una estrategia NetworkOnly para las solicitudes a la URL de búsqueda (/search_action) y pasa el bgSyncPlugin definido previamente. Agrega el siguiente código al final 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],
  }),
);

Esto le indica a Workbox que siempre se dirija a la red y, cuando fallen las solicitudes, use la lógica de sincronización en segundo plano.

A continuación, agrega el siguiente código a la parte inferior de public/sw.js con el fin de definir una estrategia de almacenamiento en caché para las solicitudes que provienen de notificaciones. Usa una estrategia CacheFirst para que se puedan entregar desde la caché.

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',
  })
);

Por último, agrega el código para mostrar las notificaciones:

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)
  );
});

Prueba la función

  1. Regresa a la otra pestaña que está ejecutando la app.
  2. Vuelve a establecer la lista desplegable Regulación en En línea.
  3. Presiona el botón Atrás de Chrome para volver a la página de búsqueda.
  4. Mantén presionado el botón Volver a cargar de Chrome y selecciona Vaciar la caché y volver a cargar la página de forma forzosa para asegurarte de que se actualice el service worker.
  5. Vuelve a establecer la lista desplegable Regulación en Sin conexión.
  6. Ingresa una búsqueda y vuelve a hacer clic en el botón Buscar.
  7. Haz clic en suscribirse a las notificaciones.
  8. Cuando Chrome te pregunte si quieres otorgar permiso a la app para enviar notificaciones, haz clic en Permitir.
  9. Ingresa otra búsqueda y vuelve a hacer clic en el botón Buscar.
  10. Vuelve a establecer la lista desplegable Regulación en En línea.

Cuando se restablezca la conexión, se mostrará una notificación:

Captura de pantalla del flujo sin conexión completo.

Conclusión

Workbox proporciona muchas funciones integradas para que tus AWP sean más resistentes y atractivas. En este codelab, exploraste cómo implementar la API de sincronización en segundo plano mediante la abstracción de Workbox, para garantizar que las consultas de los usuarios sin conexión no se pierdan y se puedan volver a intentar una vez que se restablezca la conexión. La demostración es una app de búsqueda simple, pero puedes usar una implementación similar para situaciones y casos de uso más complejos, como apps de chat, publicación de mensajes en una red social, etcétera.