Experiencias sin conexión enriquecidas con la API de Periodic Background Sync

Sincroniza los datos de tu app web en segundo plano para obtener una experiencia similar a la de las apps

¿Has estado alguna vez en alguna de las siguientes situaciones?

  • Viajar en un tren o metro con baja conectividad o sin conexión
  • El operador limitó el servicio después de mirar demasiados videos.
  • Vivir en un país donde el ancho de banda tiene dificultades para satisfacer la demanda

Si es así, sin duda sentiste la frustración de realizar ciertas tareas en la Web y te preguntaste por qué las apps específicas de la plataforma a menudo funcionan mejor en esas situaciones. Las apps específicas de la plataforma pueden recuperar contenido actualizado, como artículos de noticias o información meteorológica, con anticipación. Aunque no haya ninguna red en el metro, puedes leer las noticias.

La sincronización periódica en segundo plano permite que las aplicaciones web sincronicen de forma periódica datos en segundo plano, de modo que las apps web se acerquen al comportamiento de una app específica de una plataforma.

Probar

Puedes probar la sincronización periódica en segundo plano con la app de demostración en vivo. Antes de usarla, asegúrate de lo siguiente:

  • Estás usando Chrome 80 o una versión posterior.
  • Debes instalar la aplicación web antes de habilitar la sincronización periódica en segundo plano.

Conceptos y uso

La sincronización periódica en segundo plano te permite mostrar contenido actualizado cuando se inicia una app web progresiva o una página respaldada por service worker. Para ello, descarga datos en segundo plano cuando la app o la página no se usa. De esta manera, se evita que el contenido de la app se actualice después del inicio durante la visualización. Mejor aún, evita que la app muestre una lista de opciones de contenido antes de actualizarla.

Sin la sincronización periódica en segundo plano, las apps web deben usar métodos alternativos para descargar datos. Un ejemplo común es usar una notificación push para activar un service worker. El usuario se ve interrumpido por un mensaje como "nuevos datos disponibles". La actualización de los datos es, básicamente, un efecto secundario. Aún tienes la opción de usar notificaciones push para actualizaciones realmente importantes, como noticias de último momento importantes.

La sincronización periódica en segundo plano se confunde fácilmente con la sincronización en segundo plano. Si bien tienen nombres similares, sus casos de uso son diferentes. Entre otras cosas, la sincronización en segundo plano se usa con mayor frecuencia para reenviar datos a un servidor cuando falla una solicitud anterior.

Lograr una participación adecuada del usuario

Si se hace de forma incorrecta, la sincronización periódica en segundo plano podría consumir los recursos de los usuarios. Antes de lanzarlo, Chrome lo sometió a un período de prueba para asegurarse de que estuviera bien. En esta sección, se explican algunas de las decisiones de diseño que tomó Chrome para que esta función fuera lo más útil posible.

La primera decisión de diseño que tomó Chrome es que una app web solo puede usar la sincronización periódica en segundo plano después de que una persona la instala en su dispositivo y la inicia como una aplicación distinta. La sincronización periódica en segundo plano no está disponible en el contexto de una pestaña normal en Chrome.

Además, dado que Chrome no desea que las aplicaciones web que no se usan o que se usan con poca frecuencia consuman batería o datos de forma injustificada, Chrome diseñó una sincronización periódica en segundo plano de modo que los desarrolladores deban obtenerla proporcionando valor a sus usuarios. Concretamente, Chrome usa una puntuación de participación en el sitio (about://site-engagement/) para determinar si pueden ocurrir sincronizaciones periódicas en segundo plano para una app web determinada y con qué frecuencia. En otras palabras, no se activará un evento periodicsync, a menos que la puntuación de participación sea superior a cero, y su valor afecta la frecuencia con la que se activa el evento periodicsync. Esto garantiza que las únicas apps que se sincronicen en segundo plano sean las que uses activamente.

La sincronización periódica en segundo plano comparte algunas similitudes con las APIs existentes y las prácticas de plataformas populares. Por ejemplo, la sincronización única en segundo plano y las notificaciones push permiten que la lógica de una app web dure un poco más (a través de su service worker) después de que una persona cierra la página. En la mayoría de las plataformas, es común que las personas tengan apps instaladas que acceden periódicamente a la red en segundo plano para proporcionar una mejor experiencia del usuario de actualizaciones críticas, carga previa de contenido, sincronización de datos, etcétera. De forma similar, la sincronización periódica en segundo plano también extiende la vida útil de la lógica de una app web para que se ejecute en períodos regulares durante lo que podría ser de unos minutos a la vez.

Si el navegador permitiera que esto ocurriera con frecuencia y sin restricciones, podría generarse algunos problemas de privacidad. A continuación, te mostramos cómo Chrome abordó este riesgo de la sincronización periódica en segundo plano:

  • La actividad de sincronización en segundo plano solo se produce en una red a la que el dispositivo se conectó anteriormente. Chrome recomienda conectarse solo a redes operadas por terceros de confianza.
  • Al igual que con todas las comunicaciones de Internet, la sincronización periódica en segundo plano revela las direcciones IP del cliente, el servidor con el que se comunica y el nombre del servidor. Para reducir esta exposición aproximadamente a la que sería si la app solo se sincronizara cuando estuviera en primer plano, el navegador limita la frecuencia de las sincronizaciones en segundo plano de una app para alinearse con la frecuencia con la que la persona usa esa app. Si la persona deja de interactuar con frecuencia con la app, se dejará de activar la sincronización periódica en segundo plano. Se trata de una mejora neta sobre el statu quo en las apps específicas de la plataforma.

¿Cuándo se puede usar?

Las reglas de uso varían según el navegador. En resumen, Chrome establece los siguientes requisitos para la sincronización periódica en segundo plano:

  • Es una puntuación de participación del usuario en particular.
  • Presencia de una red usada con anterioridad.

Los desarrolladores no controlan la sincronización de las sincronizaciones. La frecuencia de sincronización se alineará con la frecuencia con la que se usa la app. (ten en cuenta que, por el momento, las apps específicas de la plataforma no hacen esto). También toma en cuenta el estado de conectividad y energía del dispositivo.

¿Cuándo se debe usar?

Cuando tu service worker se activa para controlar un evento periodicsync, tienes la oportunidad de solicitar datos, pero no la obligación de hacerlo. Cuando controles el evento, debes tener en cuenta las condiciones de la red y el almacenamiento disponible, y descargar diferentes cantidades de datos como respuesta. Puedes usar los siguientes recursos como ayuda:

Permisos

Después de instalar el service worker, usa la API de Permissions para consultar sobre periodic-background-sync. Puedes hacerlo desde una ventana o un contexto de service worker.

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

Cómo registrar una sincronización periódica

Como ya se indicó, la sincronización periódica en segundo plano requiere un service worker. Recupera un PeriodicSyncManager con ServiceWorkerRegistration.periodicSync y llama a register(). El registro requiere una etiqueta y un intervalo de sincronización mínimo (minInterval). La etiqueta identifica la sincronización registrada para que se puedan registrar varias sincronizaciones. En el siguiente ejemplo, el nombre de la etiqueta es 'content-sync' y el minInterval es un día.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

Cómo verificar un registro

Llama a periodicSync.getTags() para recuperar un array de etiquetas de registro. En el siguiente ejemplo, se usan nombres de etiquetas para confirmar que la actualización de caché esté activa y evitar que se vuelva a actualizar.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

También puedes usar getTags() para mostrar una lista de registros activos en la página de configuración de tu app web, de modo que los usuarios puedan habilitar o inhabilitar tipos específicos de actualizaciones.

Cómo responder a un evento periódico de sincronización en segundo plano

Para responder a un evento periódico de sincronización en segundo plano, agrega un controlador de eventos periodicsync a tu service worker. El objeto event que se le pase contendrá un parámetro tag que coincidirá con el valor que se usó durante el registro. Por ejemplo, si se registró una sincronización periódica en segundo plano con el nombre 'content-sync', event.tag será 'content-sync'.

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

Cómo cancelar el registro de una sincronización

Para finalizar una sincronización registrada, llama a periodicSync.unregister() con el nombre de la sincronización que quieras cancelar.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

Interfaces

A continuación, se incluye un resumen rápido de las interfaces que proporciona la API de Periodic Background Sync.

  • PeriodicSyncEvent. Se pasa al controlador de eventos ServiceWorkerGlobalScope.onperiodicsync en el momento que el navegador elija.
  • PeriodicSyncManager: Registra y cancela el registro de sincronizaciones periódicas, y proporciona etiquetas para sincronizaciones registradas. Recupera una instancia de esta clase desde la propiedad ServiceWorkerRegistration.periodicSync.
  • ServiceWorkerGlobalScope.onperiodicsync. Registra un controlador para recibir el PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync. Muestra una referencia a PeriodicSyncManager.

Ejemplo

Actualización de contenido

En el siguiente ejemplo, se usa la sincronización periódica en segundo plano para descargar y almacenar en caché artículos actualizados de un sitio de noticias o blog. Observa el nombre de la etiqueta, que indica el tipo de sincronización que es esta ('update-articles'). La llamada a updateArticles() se une en event.waitUntil() para que el service worker no finalice antes de que se descarguen y almacenen los artículos.

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

Cómo agregar una sincronización periódica en segundo plano a una app web existente

Este conjunto de cambios era necesario para agregar la sincronización periódica en segundo plano a una AWP existente. En este ejemplo, se incluye una serie de instrucciones de registro útiles que describen el estado de la sincronización periódica en segundo plano en la app web.

Depuración

Puede ser difícil obtener una visualización de extremo a extremo de la sincronización periódica en segundo plano mientras se realiza la prueba local. La información sobre los registros activos, los intervalos de sincronización aproximados y los registros de eventos de sincronización anteriores proporcionan un contexto valioso mientras se depuran el comportamiento de tu aplicación web. Afortunadamente, puedes encontrar toda esa información a través de una función experimental en las Herramientas para desarrolladores de Chrome.

Registrando actividad local

La sección Sincronización periódica en segundo plano de Herramientas para desarrolladores se organiza en torno a eventos clave del ciclo de vida periódico de la sincronización en segundo plano: el registro para la sincronización, la realización de una sincronización en segundo plano y la cancelación del registro. Para obtener información sobre estos eventos, haz clic en Iniciar grabación.

El botón de grabación de Herramientas para desarrolladores
El botón de grabar en Herramientas para desarrolladores

Durante el registro, las entradas aparecerán en las Herramientas para desarrolladores correspondientes a los eventos, con el contexto y los metadatos registrados para cada una.

Un ejemplo de datos periódicos registrados de sincronización en segundo plano
Ejemplo de datos periódicos registrados de sincronización en segundo plano

Después de habilitar la grabación una vez, permanecerá habilitada por hasta tres días, lo que permitirá a Herramientas para desarrolladores capturar información de depuración local sobre las sincronizaciones en segundo plano que podrían ocurrir, incluso horas en el futuro.

Cómo simular eventos

Si bien registrar la actividad en segundo plano puede ser útil, hay ocasiones en las que querrás probar tu controlador periodicsync de inmediato, sin esperar a que un evento se active en su cadencia normal.

Puedes hacerlo a través de la sección Service Workers del panel Application en las Herramientas para desarrolladores de Chrome. El campo Sincronización periódica te permite proporcionar una etiqueta para que la use el evento y lo actives tantas veces como desees.

La sección “Service Workers” del panel Application muestra un campo de texto y un botón de “Periodic Sync” (Sincronización periódica).

Cómo usar la interfaz de Herramientas para desarrolladores

A partir de Chrome 81, verás la sección Sincronización periódica en segundo plano en el panel Aplicación de Herramientas para desarrolladores.

El panel Application muestra la sección Periodic Background Sync