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 una app

Jeff Posnick

Joe Medley

¿Alguna vez tuviste alguna de las siguientes situaciones?

• Viajar en un tren o metro con conectividad inestable o nula
• El proveedor limitó su alcance después de mirar demasiados videos.
• Vivir en un país donde el ancho de banda tiene dificultades para satisfacer la demanda

Si lo has hecho, seguramente has sentido la frustración de recibir ciertas cosas que se hacen en la Web, y se pregunta por qué las apps específicas de cada plataforma suelen funcionar mejor en estas situaciones. Las apps específicas de una plataforma pueden recuperar contenido actualizado, como artículos de noticias o el clima información anticipadamente. Incluso si no hay una red en el metro, puedes leer la noticias.

La sincronización periódica en segundo plano permite que las aplicaciones web se sincronicen periódicamente datos en segundo plano, lo que acerca las aplicaciones web al comportamiento de una configuración .

Probar

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

• Usas Chrome 80 o una versión posterior.
• Tú 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 nuevo cuando una app web progresiva o una página respaldada por service worker. Para ello, descarga datos en el fondo cuando la aplicación o página no está en uso. Esto evita que la app que el contenido se actualice después del lanzamiento mientras se visualiza. Mejor aún, Impide que la app muestre un ícono giratorio de contenido antes de actualizarse.

Sin la sincronización periódica en segundo plano, las aplicaciones web deben usar métodos alternativos para descargar datos. Un ejemplo común es usar una notificación push para activar un servicio trabajador. El usuario se ve interrumpido por un mensaje como "nuevos datos disponibles". En esencia, la actualización de datos es un efecto secundario. Aún tienes la opción de usando notificaciones push para actualizaciones verdaderamente importantes, como las noticias de último momento.

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 una falló la solicitud anterior.

Cómo lograr una participación adecuada del usuario

No se realiza de forma correcta. La sincronización periódica en segundo plano podría perjudicar la capacidad de los usuarios. de Google Cloud. Antes de lanzarla, Chrome lo puso en un período de prueba para que que estaba en lo correcto. En esta sección, se explican algunas de las decisiones de diseño para que esta función sea lo más útil posible.

La primera decisión de diseño que tomó Chrome es que una aplicación web solo puede usar la sincronización en segundo plano después de que una persona la instala en su dispositivo y la lanzó 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 aplicaciones web que se usan o que rara vez se usan para ofrecer consumir batería o datos, la sincronización periódica en segundo plano diseñada por Chrome de modo que los desarrolladores tendrán que ganarla proporcionando valor a sus usuarios. En concreto, Chrome utiliza una puntuación de participación en el sitio (about://site-engagement/) para determinar si se pueden realizar sincronizaciones periódicas en segundo plano y con qué frecuencia para una aplicación web determinada. En otras palabras, un evento periodicsync no se activará en absoluto, a menos que la participación superior a cero y su valor afecta la frecuencia con la que Se activa el evento periodicsync. Esto garantiza que las únicas aplicaciones que se sincronizan en la los antecedentes son los que estás usando activamente.

La sincronización periódica en segundo plano comparte algunas similitudes con las APIs y en plataformas populares. Por ejemplo, una única sincronización en segundo plano, así como las notificaciones push permiten que la lógica de una aplicación 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 es común que las personas tengan instaladas aplicaciones que acceden periódicamente a la red en los antecedentes a fin de proporcionar una mejor experiencia del usuario para las actualizaciones críticas carga previa de contenido, sincronización de datos, etcétera. Del mismo modo, 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 para qué puede ser de unos minutos a la vez.

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

• La actividad de sincronización en segundo plano solo ocurre en una red que tiene el dispositivo a la que te conectaste anteriormente. Chrome recomienda conectarse únicamente a redes operadas por personas de confianza.
• Al igual que con todas las comunicaciones por Internet, la sincronización periódica en segundo plano revela la dirección IP del cliente, el servidor con el que se comunica y el nombre del servidor. Para reducir esta exposición a más o menos lo que sucedería si la app solo sincronizada cuando estaba en primer plano, el navegador limita la frecuencia de una la app en segundo plano se sincroniza para alinearse con la frecuencia con la que la persona usa esa app. Si la persona deja de interactuar frecuentemente con la aplicación, se sincroniza periódicamente en segundo plano dejará de activarse. Esta es una mejora neta con respecto al statu quo en plataformas de Google Chat.

¿Cuándo se puede usar?

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

• Una puntuación de participación del usuario específica.
• La presencia de una red ya usada

Los desarrolladores no controlan el momento de las sincronizaciones. El la frecuencia de sincronización se alineará con la frecuencia con la que se usa la app. (Ten en cuenta que las aplicaciones específicas de la plataforma actualmente no hacen esto). También consume energía del dispositivo y estado de conectividad.

¿Cuándo debería usarse?

Cuando tu service worker se activa para controlar un evento periodicsync, tienes lo siguiente: oportunidad de solicitar datos, pero no la obligación de hacerlo. Al manejar En el evento, deberías tomar las condiciones de red y el almacenamiento disponible y descargar diferentes cantidades de datos como respuesta. Puedes usar los siguientes recursos para ayudarte:

• API de Network Information
• Cómo detectar el modo Ahorro de datos
• Cómo estimar el almacenamiento disponible

Permisos

Luego de instalar el service worker, usa el permiso Permisos API para consultar para periodic-background-sync. Puedes hacerlo desde una ventana o el contexto de un 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 se indicó anteriormente, la sincronización periódica en segundo plano requiere un service worker. Recuperar un PeriodicSyncManager con ServiceWorkerRegistration.periodicSync y llama register(). El registro requiere una etiqueta y un mínimo intervalo de sincronización (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 La 'content-sync' y la minInterval son de 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.
  }
}

Verifica un registro

Llama a periodicSync.getTags() para recuperar un array de etiquetas de registro. El en el siguiente ejemplo, se usan nombres de etiquetas para confirmar que la actualización de la caché está activa para evitar actualizando de nuevo.

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 los registros activos en tu Web la página de configuración de la app para que los usuarios puedan habilitar o inhabilitar tipos específicos de actualizaciones.

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

Para responder a un evento de sincronización periódico en segundo plano, agrega un evento periodicsync al service worker. El objeto event que se le pase contendrá un El parámetro tag coincide con el valor que se usó durante el registro. Por ejemplo, si un se registró la sincronización periódica en segundo plano con el nombre 'content-sync' y, luego, event.tag serán '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.
});

Cancelando el registro de una sincronización

Para finalizar una sincronización registrada, llama a periodicSync.unregister() con el nombre del de registros que quieres 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 breve de las interfaces proporcionadas por el fondo periódico API de sincronización.

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

Ejemplo

Actualizando 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 ('update-articles'). La llamada a updateArticles() se une 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());
  }
});

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

Este conjunto de cambios era necesario para agregar sincronización periódica en segundo plano con una AWP existente. Este ejemplo incluye un número de instrucciones de registro útiles que describen el estado de sincronización periódica en segundo plano de la app web.

Depuración

Obtener una vista de extremo a extremo de la sincronización periódica en segundo plano puede ser todo un desafío. mientras realizas pruebas locales. Información sobre registros activos, sincronización aproximada intervalos y registros de eventos de sincronización pasados proporcionan un contexto valioso durante la depuración el comportamiento de tu app web. Por suerte, puedes encontrar toda esa información a través de una función experimental en las Herramientas para desarrolladores de Chrome.

Se registra la actividad local

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

.

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

.

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

Simula eventos

Si bien grabar la actividad en segundo plano puede ser útil, hay momentos en los que lo harás querrá probar tu controlador periodicsync de inmediato, sin esperar un que el evento se active con su cadencia normal.

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

Cómo usar la interfaz de Herramientas para desarrolladores

A partir de Chrome 81, aparecerá la sección Sincronización periódica en segundo plano en Panel Application de Herramientas para desarrolladores.