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 más similar a la de una app

Joe Medley
Joe Medley

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

  • Un viaje en tren o metro con conectividad débil o nula
  • El proveedor limitó la app 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 cada plataforma suelen tener un mejor rendimiento en esas situaciones. Las apps específicas de la plataforma pueden recuperar contenido nuevo, como artículos de noticias o información meteorológica, con anticipación. Puedes leer las noticias incluso si no hay una red en el metro.

La sincronización periódica en segundo plano permite que las aplicaciones web sincronicen datos de forma periódica en segundo plano, lo que acerca las apps web al comportamiento de una app específica de la 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:

  • Usas Chrome 80 o una versión posterior.
  • Instala 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 mientras se está viendo. Mejor aún, evita que la app muestre un ícono giratorio de contenido antes de actualizarse.

Sin 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. Puedes usar las notificaciones push para recibir actualizaciones 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. Aunque 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 realiza de forma incorrecta, la sincronización periódica en segundo plano podría consumir los recursos de los usuarios. Antes de lanzarla, Chrome la 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. En concreto, Chrome usa una puntuación de participación en el sitio (about://site-engagement/) para determinar si se pueden realizar 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 sincronizan en segundo plano sean las que usas de forma activa.

La sincronización periódica en segundo plano comparte algunas similitudes con las APIs existentes y las prácticas en plataformas populares. Por ejemplo, la sincronización en segundo plano única 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 para actualizaciones críticas, carga previa de contenido, sincronización de datos, etcétera. De manera 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 por lo que podría ser de unos pocos minutos a la vez.

Si el navegador permite que esto suceda con frecuencia y sin restricciones, se podrían generar 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 ocurre 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 al que se comunica y el nombre del servidor. Para reducir esta exposición aproximadamente a lo 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 que coincida con la frecuencia con la que la persona usa esa app. Si la persona deja de interactuar con frecuencia con la app, se detendrá la sincronización periódica en segundo plano. Esta es una mejora neta en el statu quo de las apps específicas de plataformas.

¿Cuándo se puede usar?

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

  • Una puntuación de participación del usuario específica.
  • Presencia de una red usada anteriormente.

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, actualmente, las apps específicas de la plataforma no hacen esto). También toma en cuenta el estado de alimentación y conectividad 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 realizar consultas sobre periodic-background-sync. Puedes hacerlo desde un contexto de ventana o 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 la 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 la 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 al service worker. El objeto event que se le pasa contendrá un parámetro tag que coincide 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.
});

Cancela el registro de una sincronización

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

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 elige el navegador.
  • 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 PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync. Muestra una referencia a PeriodicSyncManager.

Ejemplo

Actualizando contenido

En el siguiente ejemplo, se usa una sincronización periódica en segundo plano a fin de descargar y almacenar en caché artículos actualizados para un blog o sitio de noticias. Observa el nombre de la etiqueta, que indica el tipo de sincronización ('update-articles'). La llamada a updateArticles() está unida a 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());
  }
});

Agrega sincronización periódica en segundo plano a una app web existente

Se necesitaba este conjunto de cambios para agregar 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

Obtener una vista integral de la sincronización periódica en segundo plano mientras se realiza pruebas locales puede ser un desafío. La información sobre registros activos, intervalos de sincronización aproximados y registros de eventos de sincronización pasados proporcionan un contexto valioso mientras se depura el comportamiento de tu app web. Afortunadamente, puedes encontrar toda esa información a través de una función experimental en las Herramientas para desarrolladores de Chrome.

Grabando actividad local

La sección Sincronización periódica en segundo plano de Herramientas para desarrolladores está organizada en torno a eventos clave en el ciclo de vida de sincronización periódica en segundo plano: registrarse para la sincronización, realizar una sincronización en segundo plano y cancelar el registro. Para obtener información sobre estos eventos, haz clic en Start recording.

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

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

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 las 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 grabar la actividad en segundo plano puede ser útil, a veces querrás probar tu controlador periodicsync de inmediato, sin esperar a que un evento se active con 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 se 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".

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 las Herramientas para desarrolladores.

El panel Application que muestra la sección Periodic Background Sync