API de Background Synchronization

La API de Background Synchronization permite que las aplicaciones web pospongan la sincronización con el servidor a su service worker para que la gestione más tarde, si el dispositivo está sin conexión. Entre sus usos se incluye el envío de solicitudes en segundo plano si no se pudieron enviar mientras se usaba la aplicación.

Por ejemplo, una aplicación de cliente de correo puede dejar que sus usuarios envíen correos cuando quieran, incluso si el dispositivo no tiene conexión de red. El frontend de la aplicación se limita a registrar una solicitud de sincronización y el service worker recibe una alerta cuando la red vuelve a estar presente y se encarga de la sincronización.

La interfaz SyncManager está disponible a través de ServiceWorkerRegistration.sync. Una etiqueta identificadora única se establece para "nombrar" el evento de sincronización, que después se puede escuchar dentro del script ServiceWorker. Una vez el evento se reciba, puedes ejecutar cualquier funcionalidad disponible, como enviar solicitudes al servidor.

Como esta API depende de service workers, la funcionalidad proporcionada por esta API solo está disponible en un contexto seguro.

SyncManager Experimental

Registra las tareas que se ejecutarán en un serviceworker posteriormente con conectividad de red. Estas tareas se denominan solicitudes de sincronización en segundo plano.

SyncEvent Experimental

Representa un evento de sincronización, enviado al ámbito global de un ServiceWorker. Proporciona una manera de ejecutar tareas en el service worker una vez que el dispositivo tenga conectividad de red.

Las siguientes adiciones a la API de Service Worker proporciona un punto de entrada para configurar la sincronización en segundo plano.

ServiceWorkerRegistration.sync Read only

Devuelve una referencia a la interfaz SyncManager para registrar tareas que se ejecutarán una vez que el dispositivo tenga conectividad de red.

Evento sync

Un controlador de eventos que se activa cuando se produce un evento sync. Esto ocurre en cuanto la red está disponible.

Los siguientes ejemplos muestran cómo utilizar la interfaz.

La siguiente función asincrónica registra una sincronización en segundo plano desde un contexto de navegación:

async function syncMessagesLater() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.sync.register("sync-messages");
  } catch {
    console.log("Background Sync could not be registered!");
  }
}

Este código verifica si una tarea de sincronización en segundo plano con una etiqueta determinada está registrada.

navigator.serviceWorker.ready.then((registration) => {
  registration.sync.getTags().then((tags) => {
    if (tags.includes("sync-messages")) {
      console.log("Messages sync already requested");
    }
  });
});

El siguiente ejemplo muestra cómo responder a un evento de sincronización en segundo plano en el service worker.

self.addEventListener("sync", (event) => {
  if (event.tag === "sync-messages") {
    event.waitUntil(sendOutboxMessages());
  }
});

• Presentamos la sincronización en segundo plano