Experiencias más enriquecedoras sin conexión con la API de sincronización periódica en segundo plano

Sincronice los datos de su aplicación web en segundo plano para una experiencia más nativa

10 de noviembre de 2019
Actualizado 18 de agosto de 2020

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

• Viajar en tren o metro con conectividad inestable o sin conectividad
• Su operador lo aceleró después de ver demasiados videos
• Vivir en un país donde el ancho de banda lucha por mantenerse al día con la demanda

Si es así, seguramente ha sentido la frustración de hacer ciertas cosas en la web y se preguntó por qué las aplicaciones nativas a menudo funcionan mejor en estos escenarios. Las aplicaciones nativas pueden obtener contenido nuevo, como artículos de noticias o información meteorológica, antes de tiempo. Incluso si no hay red en el metro, aún puede leer las noticias.

La sincronización periódica en segundo plano permite que las aplicaciones web sincronicen periódicamente los datos en segundo plano, acercando las aplicaciones web al comportamiento de una aplicación nativa.

Estado actual

La siguiente tabla explica el estado actual de la API de sincronización periódica en segundo plano.

Paso	Estado
1. Crea un explicador	Completar
2. Crear borrador inicial de especificación	Completar
3. Recopile comentarios y repita el diseño	En progreso
4. Prueba de origen	Completar
5. Lanzamiento	Cromo 80

Intentalo

Puede probar la sincronización periódica en segundo plano con el aplicación de demostración en vivo. Antes de usarlo, asegúrese de que:

• Estás usando Chrome 80 o posterior.
• Tú
  Instalar en pc
  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 le permite mostrar contenido nuevo cuando se inicia una aplicación web progresiva o una página respaldada por un trabajador del servicio. Para ello, descarga datos en segundo plano cuando no se utiliza la aplicación o la página. Esto evita que el contenido de la aplicación se actualice después del lanzamiento mientras se está viendo. Mejor aún, evita que la aplicación muestre una ruleta de contenido antes de actualizar.

Sin una sincronización periódica en segundo plano, las aplicaciones web deben utilizar métodos alternativos para descargar datos. Un ejemplo común es el uso de una notificación de inserción para despertar a un trabajador del servicio. El usuario es interrumpido por un mensaje como «nuevos datos disponibles». Actualizar los datos es esencialmente un efecto secundario. Todavía tiene la opción de usar notificaciones automáticas para actualizaciones realmente importantes, como noticias de última hora 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 más comúnmente para reenviar datos a un servidor cuando una solicitud anterior ha fallado.

Conseguir la participación correcta del usuario

Si se hace de forma incorrecta, la sincronización periódica en segundo plano podría suponer un desperdicio de recursos de los usuarios. Antes de lanzarlo, Chrome lo sometió a un período de prueba para asegurarse de que era correcto. Esta sección explica algunas de las decisiones de diseño que tomó Chrome 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 periódica en segundo plano después de que una persona la haya instalado en su dispositivo y la haya lanzado 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 quiere que las aplicaciones web que no se usan o que se usan con poca frecuencia consuman batería o datos de manera gratuita, Chrome diseñó una sincronización periódica en segundo plano para que los desarrolladores tengan que ganársela proporcionando valor a sus usuarios. Concretamente, Chrome está utilizando un puntuación de interacción con el sitio
(chrome://site-engagement/) para determinar si se pueden realizar sincronizaciones periódicas en segundo plano para una aplicación web determinada y con qué frecuencia. En otras palabras, un periodicsync El evento no se activará en absoluto a menos que la puntuación de participación sea mayor que cero, y su valor afecta la frecuencia con la que
periodicsync incendios de eventos. Esto asegura que las únicas aplicaciones que se sincronizan en segundo plano son las que está utilizando activamente.

La sincronización periódica en segundo plano comparte algunas similitudes con las API y las prácticas existentes en plataformas populares. Por ejemplo, la sincronización en segundo plano única y las notificaciones automáticas permiten que la lógica de una aplicación web viva un poco más (a través de su trabajador de servicio) después de que una persona ha cerrado la página. En la mayoría de las plataformas, es común que las personas hayan instalado aplicaciones que acceden periódicamente a la red en segundo plano para brindar una mejor experiencia de usuario para actualizaciones críticas, obtención previa de contenido, sincronización de datos, etc. De manera similar, la sincronización periódica en segundo plano también extiende la vida útil de la lógica de una aplicación web para que se ejecute en períodos regulares durante lo que pueden ser unos pocos minutos a la vez.

Si el navegador permitiera que esto ocurriera con frecuencia y sin restricciones, podría generar algunos problemas de privacidad. Así es como Chrome ha abordado este riesgo de 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 haya conectado previamente. Chrome recomienda conectarse solo a redes operadas por partes confiables.
• Como ocurre con todas las comunicaciones por Internet, la sincronización periódica en segundo plano revela las direcciones IP del cliente, el servidor con el que está hablando y el nombre del servidor. Para reducir esta exposición aproximadamente a lo que sería si la aplicación solo se sincronizara cuando estuviera en primer plano, el navegador limita la frecuencia de las sincronizaciones en segundo plano de una aplicación para alinearse con la frecuencia con la que la persona usa esa aplicación. Si la persona deja de interactuar con frecuencia con la aplicación, la sincronización periódica en segundo plano dejará de activarse. Esta es una mejora neta sobre el status quo en las aplicaciones nativas.

¿Cuándo se puede utilizar?

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

• Una puntuación de participación del usuario en particular.
• Presencia de una red utilizada anteriormente.

Los desarrolladores no controlan el tiempo de las sincronizaciones. La frecuencia de sincronización se alineará con la frecuencia con la que se usa la aplicación. (Tenga en cuenta que las aplicaciones nativas actualmente no hacen esto). También toma en cuenta el estado de energía y conectividad del dispositivo.

¿Cuándo debería usarse?

Cuando su trabajador de servicio se despierta para manejar un periodicsync evento, tienes el
oportunidad para solicitar datos, pero no el obligación para hacerlo. Al manejar el evento, debe tener en cuenta las condiciones de la red y el almacenamiento disponible y, en respuesta, descargar diferentes cantidades de datos. Puede utilizar los siguientes recursos para ayudar:

Permisos

Una vez instalado el trabajador de servicio, utilice el API de permisos para consultar periodic-background-sync. Puede hacer esto desde una ventana o desde un contexto de trabajador de servicio.

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

Registro de una sincronización periódica

Como ya se dijo, la sincronización periódica en segundo plano requiere un trabajador de servicio. Recuperar un PeriodicSyncManager utilizando ServiceWorkerRegistration.periodicSync y llama
register() en eso. El registro requiere tanto una etiqueta como un intervalo mínimo de sincronización (minInterval). La etiqueta identifica la sincronización registrada para que se puedan registrar múltiples sincronizaciones. En el siguiente ejemplo, el nombre de la etiqueta es
'content-sync' y el minInterval es un dia.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    
  }
}

Verificando un registro

Llamada periodicSync.getTags() para recuperar una serie de etiquetas de registro. El siguiente ejemplo utiliza nombres de etiquetas para confirmar que la actualización de la caché está activa para evitar la actualización de nuevo.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  
  updateContentOnPageLoad();
}

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

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, agregue un periodicsync manejador de eventos a su trabajador de servicio. los event El objeto que se le pase contendrá un
tag parámetro que coincide con el valor utilizado durante el registro. Por ejemplo, si se registró una sincronización periódica en segundo plano con el nombre 'content-sync', luego
event.tag estarán 'content-sync'.

self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
event.waitUntil(syncContent());
}
});

Anular el registro de una sincronización

Para finalizar una sincronización registrada, llame periodicSync.unregister() con el nombre de la sincronización que desea anular el registro.

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

Interfaces

Aquí hay un resumen rápido de las interfaces proporcionadas por la API de sincronización periódica en segundo plano.

• PeriodicSyncEvent. Pasado al ServiceWorkerGlobalScope.onperiodicsync controlador de eventos en el momento que elija el navegador.
• PeriodicSyncManager. Registra y anula el registro de sincronizaciones periódicas y proporciona etiquetas para sincronizaciones registradas. Recupere una instancia de esta clase de la propiedad ServiceWorkerRegistration.periodicSync`.
• ServiceWorkerGlobalScope.onperiodicsync. Registra un manejador para recibir el PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Devuelve una referencia al PeriodicSyncManager.

Ejemplo

Actualizando contenido

El siguiente ejemplo utiliza la sincronización periódica en segundo plano para descargar y almacenar en caché artículos actualizados para un sitio de noticias o blog. Observe el nombre de la etiqueta, que indica el tipo de sincronización que es ('update-articles'). La llamada a updateArticles() está envuelto en event.waitUntil() para que el trabajador del servicio no termine antes de que los artículos se descarguen y almacenen.

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 aplicación web existente

Este conjunto de cambios eran necesarios para agregar sincronización periódica en segundo plano a un PWA existente. Este ejemplo incluye una serie de declaraciones de registro útiles que describen el estado de la sincronización periódica en segundo plano en la aplicación web.

Depuración

Puede ser un desafío obtener una vista de un extremo a otro de la sincronización periódica en segundo plano mientras se realiza una prueba local. La información sobre registros activos, intervalos de sincronización aproximados y registros de eventos de sincronización pasados ​​proporcionan un contexto valioso al depurar el comportamiento de su aplicación web. Afortunadamente, puede encontrar toda esa información a través de una función experimental en Chrome DevTools.

Registro de la actividad local

los Sincronización periódica en segundo plano La sección de DevTools está organizada en torno a eventos clave en el ciclo de vida de la sincronización periódica en segundo plano: registrarse para sincronizar, realizar una sincronización en segundo plano y cancelar el registro. Para obtener información sobre estos eventos, haga clic en Empezar a grabar.

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

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

Simulando eventos

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

Puede hacerlo a través del Trabajadores de servicios dentro del panel Aplicación en Chrome DevTools. los Sincronización periódica El campo le permite proporcionar una etiqueta para que use el evento y activarlo tantas veces como desee.

A partir de Chrome 81, verá un Sincronización periódica en segundo plano sección en DevTools Solicitud panel.