sincronización-en segundo plano-de-la-caja de trabajo

Cuando envías datos a un servidor web, a veces las solicitudes fallarán. Puede deberse a que el usuario perdió conectividad o a que el servidor no funciona. En cualquier caso, a menudo querrás volver a intentar enviar las solicitudes más tarde.

La nueva API de BackgroundSync es una solución ideal para este problema. Cuando un service worker detecta que falló una solicitud de red, se puede registrar para recibir un evento sync, que se entrega cuando el navegador considera que se devolvió la conectividad. Ten en cuenta que el evento de sincronización se puede entregar incluso si el usuario abandonó la aplicación, lo que lo hace mucho más eficaz que el método tradicional de reintentar solicitudes con errores.

La sincronización en segundo plano de Workbox se diseñó para facilitar el uso de la API de BackgroundSync y la integración de su uso con otros módulos de Workbox. También implementa una estrategia de resguardo para navegadores que aún no implementan BackgroundSync.

Los navegadores compatibles con la API de BackgroundSync reproducirán automáticamente las solicitudes fallidas en tu nombre en un intervalo administrado por el navegador, que probablemente use una retirada exponencial entre los intentos de repetición. En los navegadores que no admiten de forma nativa la API de BackgroundSync, la sincronización en segundo plano de Workbox intentará volver a reproducirla automáticamente cada vez que se inicie el service worker.

Uso básico

La forma más fácil de usar la sincronización en segundo plano es utilizar Plugin, que pondrá automáticamente en cola las solicitudes con errores y las volverá a intentar cuando se activen los eventos sync futuros.

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

BackgroundSyncPlugin se conecta a la devolución de llamada del complemento fetchDidFail y solo se invoca a fetchDidFail si se produce una excepción, probablemente debido a una falla de la red. Esto significa que no se reintentarán las solicitudes si se recibe una respuesta con un estado de error 4xx o 5xx. Si deseas reintentar todas las solicitudes que generan, p.ej., un estado 5xx, puedes hacerlo agregando un complemento fetchDidSucceed a tu estrategia:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

Uso avanzado

La sincronización en segundo plano de Workbox también proporciona una clase Queue, de la que puedes crear una instancia y agregarle solicitudes con errores. Las solicitudes erróneas se almacenan en IndexedDB y se vuelven a intentar cuando el navegador considera que se restableció la conectividad (es decir, cuando recibe el evento de sincronización).

Cómo crear una cola

Para crear una cola de sincronización en segundo plano de Workbox, debes construirla con un nombre de cola (que debe ser único de tu origen):

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

const queue = new Queue('myQueueName');

El nombre de la cola se usa como parte del nombre de la etiqueta que el SyncManager global agrega a register(). También se usa como nombre de Object Store para la base de datos IndexedDB.

Agrega una solicitud a la cola

Una vez que hayas creado tu instancia de cola, puedes agregarle solicitudes fallidas. Para agregar una solicitud con errores, invoca el método .pushRequest(). Por ejemplo, el siguiente código detecta las solicitudes que fallan y las agrega a la cola:

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

Una vez que se agrega a la cola, se vuelve a intentar automáticamente la solicitud cuando el service worker recibe el evento sync (que sucede cuando el navegador considera que se restableció la conectividad). Los navegadores que no admiten la API de BackgroundSync volverán a intentar la cola cada vez que se inicie el service worker. Esto requiere que se ejecute la página que controla el service worker, por lo que no será tan eficaz.

Prueba la sincronización en segundo plano de Workbox

Lamentablemente, probar BackgroundSync es un poco poco intuitivo y difícil por varias razones.

El mejor enfoque para probar tu implementación es hacer lo siguiente:

1. Carga una página y registra tu service worker.
2. Apaga la red de tu computadora o el servidor web.
   • NO UTILICE LAS HERRAMIENTAS DE DISPOSITIVOS CHROME SIN CONEXIÓN. La casilla de verificación sin conexión en Herramientas para desarrolladores solo afecta las solicitudes de la página. Las solicitudes de los service worker seguirán en proceso.
3. Realiza solicitudes de red que deben estar en cola con la sincronización en segundo plano de Workbox.
   • Para verificar que las solicitudes se colocaron en cola, consulta Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests.
4. Ahora enciende tu red o servidor web.

5. Para forzar un evento sync temprano, ve a Chrome DevTools > Application > Service Workers, ingresa el nombre de la etiqueta de workbox-background-sync:<your queue name>, donde <your queue name> debe ser el nombre de la cola que configuraste y, luego, haz clic en el botón "Sincronizar".

   

6. Deberías ver que las solicitudes de red se procesaron para las solicitudes con errores y que los datos de IndexedDB deberían estar vacíos, ya que las solicitudes se volvieron a reproducir con éxito.