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

Cuando envías datos a un servidor web, a veces las solicitudes fallarán. Integra puede deberse a que el usuario perdió la conectividad el servidor está inactivo; en cualquier caso, con frecuencia, intentas enviar las solicitudes de nuevo más tarde.

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

La sincronización en segundo plano de la caja de trabajo está diseñada para facilitar el uso de la BackgroundSync y, luego, integrar su uso con otros módulos de Workbox. Integra también implementa una estrategia de resguardo para los navegadores Sincronización en segundo plano.

Los navegadores compatibles con la API de BackgroundSync no podrán volver a reproducir el contenido de forma automática. solicitudes en tu nombre en una intervalo administrado por el navegador, probablemente con una retirada exponencial entre los intentos de repetición. En los navegadores que no es compatible de forma nativa con la API de BackgroundSync, la sincronización en segundo plano de Workbox automáticamente una repetición cada vez que se inicia tu service worker.

Uso básico

La forma más fácil de usar la sincronización en segundo plano es usar la Plugin que poner en cola automáticamente las solicitudes fallidas y volver a intentarlo cuando sync se activan los eventos correspondientes.

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 hooks en devolución de llamada del complemento fetchDidFail fetchDidFail solo se invoca si se arroja una excepción, probablemente debido a a una falla de red. Esto significa que las solicitudes no se reintentarán si hay respuesta recibida con un Estado de error 4xx o 5xx. Si deseas reintentar todas las solicitudes que generen, p.ej., un estado 5xx, puedes hacerlo agregar 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 la caja de trabajo también proporciona una clase Queue, que puedes crear instancias y agregarles solicitudes erróneas. Las solicitudes fallidas se almacenan en IndexedDB. y se vuelve 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 crearla con un nombre de cola (que debe ser único para 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 se register() por el SyncManager Es también se usa como el Object Store para la base de datos IndexedDB.

Agrega una solicitud a la cola

Una vez creada tu instancia de cola, puedes agregarle solicitudes con errores. Puedes invocar el método .pushRequest() para agregar solicitudes con errores. Por ejemplo: el siguiente código detecta todas 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 agregada a la cola, la solicitud se reintenta automáticamente cuando service worker recibe el evento sync (que ocurre cuando el navegador considera que se restablece la conectividad). Los navegadores que no admiten la La API de BackgroundSync volverá a intentar la cola cada vez que se active iniciar. Esto requiere que la página que controla el service worker en ejecución, por lo que no será tan eficaz.

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

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

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

1. Carga una página y registra tu service worker.
2. Desactiva la red de la computadora o el servidor web.
   • NO UTILICE LAS HERRAMIENTAS PARA PROGRAMADORES CHROME SIN CONEXIÓN. La casilla de verificación Sin conexión en Las Herramientas para desarrolladores solo afectan las solicitudes de la página. Solicitudes de service worker seguirán funcionando.
3. Realiza solicitudes de red que deben estar en cola con la sincronización en segundo plano de la caja de trabajo.
   • Para verificar si las solicitudes se agregaron a la cola, consulta Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Ahora, activa tu red o servidor web.

5. Para forzar un evento anticipado de sync, accede a Chrome DevTools > Application > Service Workers, ingresando el nombre de la etiqueta de workbox-background-sync:<your queue name>, donde debe estar <your queue name> nombre de la cola que estableciste y, a continuación, haz clic en el botón .

   

6. Deberías ver que las solicitudes de red se procesan para las solicitudes con errores y los datos de IndexedDB deberían estar vacíos, ya que las solicitudes se se volvió a reproducir correctamente.