Sincroniza los datos de tu app web en segundo plano para obtener una experiencia más similar a una app
¿Alguna vez estuviste en alguna de las siguientes situaciones?
- Viajes en tren o subterráneo con conexión inestable o sin conexión
- El operador limitó su alcance después de mirar demasiados videos.
- Vivir en un país donde el ancho de banda tiene dificultades para seguir el ritmo de la demanda
Si es así, seguramente sentiste la frustración de realizar ciertas tareas en la Web y te preguntaste por qué las apps específicas de una plataforma a menudo funcionan mejor en estas situaciones. Las apps específicas de la plataforma pueden recuperar contenido actualizado, como artículos de noticias o información del clima, con anticipación. Incluso si no hay red en el metro, puedes leer las noticias.
La sincronización periódica en segundo plano permite que las aplicaciones web sincronicen datos de forma periódica en segundo plano, lo que las acerca 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 app web antes de habilitar la sincronización periódica en segundo plano.
Conceptos y uso
La sincronización en segundo plano periódica te permite mostrar contenido actualizado cuando se inicia una app web progresiva o una página respaldada por un trabajador de servicio. Para ello, descarga datos en segundo plano cuando la app o la página no está en uso. Esto evita que el contenido de la app se actualice después del lanzamiento mientras se está viendo. Mejor aún, evita que la app muestre una lista de opciones antes de actualizarse.
Sin la sincronización en segundo plano periódica, las apps web deben usar métodos alternativos para descargar datos. Un ejemplo común es usar una notificación push para activar un trabajador de servicio. El usuario recibe un mensaje como "hay datos nuevos disponibles". En esencia, la actualización de datos es un efecto secundario. Aún tienes la opción de usar notificaciones push para actualizaciones realmente importantes, como noticias 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 volver a enviar datos a un servidor cuando falla una solicitud anterior.
Cómo lograr una participación adecuada del usuario
Si se realiza de forma incorrecta, la sincronización periódica en segundo plano podría desperdiciar los recursos de los usuarios. Antes de lanzarlo, Chrome lo sometió a un período de prueba para asegurarse de que fuera correcto. 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 en segundo plano periódica 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 sin usar o que se usen con poca frecuencia para consumir datos o batería de forma injustificada, Chrome diseñó una sincronización periódica en segundo plano de modo que los desarrolladores tengan que obtenerla proporcionando valor a sus usuarios. Específicamente, Chrome usa una puntuación de participación en el sitio (about://site-engagement/) para determinar si se pueden realizar sincronizaciones en segundo plano periódicas y con qué frecuencia para una app web determinada. En otras palabras, no se activará un evento periodicsync, a menos que la puntuación de participación sea mayor que 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 usas de forma activa.
La sincronización en segundo plano periódica comparte algunas similitudes con las prácticas y las APIs existentes en plataformas populares. Por ejemplo, la sincronización en segundo plano única, así como las notificaciones push, permiten que la lógica de una app web dure un poco más (a través de su trabajador de servicio) después de que una persona cierra la página. En la mayoría de las plataformas, es común que las personas hayan instalado apps que acceden periódicamente a la red en segundo plano para proporcionar una mejor experiencia del usuario para actualizaciones críticas, almacenamiento en caché de contenido, sincronización de datos, etcétera. Del mismo modo, la sincronización en segundo plano periódica también extiende la vida útil de la lógica de una app web para que se ejecute en períodos regulares durante 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, se muestra 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 haya conectado anteriormente. Chrome recomienda conectarse solo a redes que operen partes confiables.
- Al igual que con todas las comunicaciones por Internet, la sincronización en segundo plano periódica revela las direcciones IP del cliente, el servidor con el que se comunica y el nombre del servidor. Para reducir esta exposición a aproximadamente 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 se alinee con la frecuencia con la que la persona usa esa app. Si la persona deja de interactuar con la app con frecuencia, se dejará de activar la sincronización periódica en segundo plano. Esta es una mejora neta con respecto al 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:
- Una puntuación de participación del usuario en particular
- La presencia de una red ya usada
Los desarrolladores no controlan los tiempos de sincronización. 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 tiene en cuenta el estado de energía y conectividad del dispositivo.
¿Cuándo debería usarse?
Cuando tu trabajador de servicio 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 en respuesta. Puedes usar los siguientes recursos para obtener ayuda:
- API de Network Information
- Cómo detectar el modo Ahorro de datos
- Cómo estimar el almacenamiento disponible
Permisos
Después de instalar el trabajador de servicio, usa la API de Permissions para consultar periodic-background-sync. Puedes hacerlo desde una ventana o un contexto de trabajador de servicio.
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. Recupera un PeriodicSyncManager con ServiceWorkerRegistration.periodicSync y llama a register() en él. 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.
}
}
Verifica 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 para 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 de sincronización periódica en segundo plano
Para responder a un evento de sincronización en segundo plano periódico, agrega un controlador de eventos periodicsync a tu trabajador de servicio. El objeto event que se le pasa contendrá un parámetro tag que coincida 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 cuya registro deseas cancelar.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
A continuación, se muestra un resumen de las interfaces que proporciona la API de Periodic Background Sync.
PeriodicSyncEvent. Se pasa al controlador de eventosServiceWorkerGlobalScope.onperiodicsyncen un momento que elija el navegador.PeriodicSyncManager: Registra y cancela el registro de sincronizaciones periódicas, y proporciona etiquetas para las sincronizaciones registradas. Recupera una instancia de esta clase de la propiedad ServiceWorkerRegistration.periodicSync.ServiceWorkerGlobalScope.onperiodicsync: Registra un controlador para recibir elPeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Muestra una referencia aPeriodicSyncManager.
Ejemplo
Actualiza el contenido
En el siguiente ejemplo, se usa una sincronización en segundo plano periódica para descargar y almacenar en caché artículos actualizados para un sitio de noticias o un blog. Observa el nombre de la etiqueta, que indica el tipo de sincronización ('update-articles'). La llamada a updateArticles() se une en event.waitUntil() para que el trabajador de servicio no se cancele 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 fue necesario para agregar la sincronización en segundo plano periódica a una PWA existente. En este ejemplo, se incluyen varias instrucciones de registro útiles que describen el estado de la 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 mientras realizas pruebas locales puede ser todo un desafío. 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 durante la depuración del comportamiento de tu app web. Afortunadamente, puedes encontrar toda esa información a través de una función experimental en Chrome DevTools.
Cómo grabar la 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 de sincronización periódico en segundo plano: registro para sincronización, ejecución de sincronización en segundo plano y 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 DevTools correspondientes a los eventos, con el contexto y los metadatos registrados para cada uno.
Después de habilitar la grabación una vez, esta permanecerá habilitada durante un máximo de tres días, lo que permitirá que DevTools capture información de depuración local sobre las sincronizaciones en segundo plano que puedan 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 se active un evento en su cadencia normal.
Puedes hacerlo a través de la sección Service Workers en el panel Application de Chrome DevTools. El campo Sincronización periódica te permite proporcionar una etiqueta para que la use el evento y activarla tantas veces como desees.
Usa la interfaz de DevTools
A partir de Chrome 81, verás una sección Periodic Background Sync en el panel Application de DevTools.
