Sincronización en segundo plano es una nueva API web que te permite aplazar acciones hasta que el usuario se conectividad. Esto garantiza que lo que el usuario quiera enviar realmente se envíe.
El problema
Internet es un excelente lugar para perder tiempo. Sin perder tiempo en Internet, no sabríamos que a los gatos no les gustan las flores, a los camaleones les encantan las burbujas, ni que nuestro propio Eric Bidelman es un héroe del putt golf de finales de los años 90.
Pero a veces, solo a veces, no buscamos perder tiempo. El usuario deseado experiencia se parece más a:
- El teléfono sacó el bolsillo.
- Lograr un objetivo menor.
- El teléfono está en el bolsillo.
- Reanuda tu vida.
Lamentablemente, esta experiencia suele verse afectada por una conectividad deficiente. A todos nos ha pasado. Estás mirando una pantalla blanca o una rueda dentada, y sabes que debes renunciar y seguir con tu vida, pero debes esperar 10 segundos más por las dudas. ¿Después de esos 10 segundos? Nada.
Pero ¿por qué renunciar ahora? Ya has invertido tiempo, por lo que alejarte sin nada sería un desperdicio, así que sigues esperando. En este punto, deseas renunciar, pero sabes que el segundo en que lo haces es el segundo antes de que todo se haya cargado si solo hubieras esperado.
Los service workers resuelven la parte de carga de la página permitiéndote entregar contenido desde una caché. Pero ¿qué sucede cuando la página necesita enviar algo al servidor?
Por el momento, si el usuario presiona "Enviar" tienen que mirar un ícono giratorio
hasta que se complete el proceso. Si intenta navegar a otro lugar o cerrar la pestaña, usaremos onbeforeunload para mostrar un mensaje como "No, necesito que mires este ícono giratorio un poco más. Lo siento". Si el usuario no tiene conexión, le decimos "Lo sentimos, debes volver más tarde y volver a intentarlo".
Esto es basura. La sincronización en segundo plano te permite hacer un mejor trabajo.
La solución
En el siguiente video, se muestra Emojoy, una demostración de chat solo con emojis. Es una app web progresiva y funciona primero sin conexión. La app usa notificaciones y mensajes push, además de la sincronización en segundo plano.
Si el usuario intenta enviar un mensaje cuando no tiene conectividad, el mensaje se envía en segundo plano cuando obtiene conectividad.
Desde marzo de 2016, la sincronización en segundo plano está disponible en Chrome a partir de la versión 49. Sigue estos pasos para ver cómo funciona:
- Abre Emojoy.
- Desconéctate (ya sea en el modo de avión o visita tu jaula local de Faraday).
- Escribe un mensaje.
- Regresa a la pantalla principal (si lo deseas, cierra la pestaña o el navegador).
- Conéctate.
- El mensaje se envía en segundo plano.
Poder enviar en segundo plano de esta manera también produce una mejora percibida del rendimiento. La app no necesita hacer tanto hincapié en el envío del mensaje, por lo que puede agregar el mensaje al resultado de inmediato.
Cómo solicitar una sincronización en segundo plano
En el verdadero estilo de la Web extensible, esta es una una función de bajo nivel que te da la libertad de hacer lo que necesitas. Solicitas un evento que se activa cuando el usuario tiene conectividad, lo que ocurre inmediatamente si el usuario ya tiene conectividad. Luego, escuchas ese evento y haces lo que sea que de lo que tenemos que hacer.
Al igual que la mensajería push, utiliza un service worker como destino del evento, lo que le permite funcionar cuando la página no está abierta. En primer lugar, regístrate para realizar una sincronización desde una página:
// Register your service worker:
navigator.serviceWorker.register('/sw.js');
// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('myFirstSync');
});
```
Then listen for the event in `/sw.js`:
```js
self.addEventListener('sync', function(event) {
if (event.tag == 'myFirstSync') {
event.waitUntil(doSomeStuff());
}
});
Eso es todo. En el ejemplo anterior, doSomeStuff() debe mostrar una promesa que indique el éxito o fracaso de lo que intenta hacer. Si se cumple, la sincronización se completa. Si falla, se programará otra sincronización para reintentarlo. Las sincronizaciones de reintento también esperan la conectividad y emplean una retirada exponencial.
El nombre de etiqueta de la sincronización ("myFirstSync" en el ejemplo anterior) debe ser único para una sincronización determinada. Si te registras para una sincronización con la misma etiqueta que una sincronización pendiente, se fusionará con la sincronización existente. Esto significa que puedes registrarte para recibir una solicitud de eliminación. se sincroniza cada vez que el usuario envía un mensaje, pero si envía 5 mensajes sin conexión, solo obtendrás una sincronización cuando se conecte. Si deseas tener 5 eventos de sincronización independientes, usa etiquetas únicas.
Aquí te presentamos una demostración sencilla que hace lo mínimo. usa el evento de sincronización para mostrar una notificación.
¿Para qué puedo usar la sincronización en segundo plano?
Lo ideal es que lo uses para programar el envío de datos que te interesan más allá de la vida útil de la página. Mensajes de chat, correos electrónicos, actualizaciones de documentos, cambios en la configuración, cargas de fotos... todo lo que quieras que llegue al servidor, incluso si el usuario abandona la pestaña o cierra la pestaña. La página podría almacenarlos en una bandeja de salida. en indexDB, y el service worker las recuperaba y las enviaba.
Sin embargo, también podrías usarlo para recuperar pequeños fragmentos de datos...
¡Otra demostración!
Esta es la demostración de wikipedia sin conexión que creé para sobrecargar la carga de páginas. Desde entonces, le agregué un poco de magia de la sincronización en segundo plano.
Pruébalo. Asegúrate de usar Chrome 49 o una versión posterior y, luego, haz lo siguiente:
- Ve a cualquier artículo (por ejemplo, Chrome).
- Desconectarse (ya sea en el modo de avión o unirse a un proveedor de telefonía celular terrible, como el mío)
- Haz clic en un vínculo a otro artículo.
- Deberías recibir un aviso de que la página no se pudo cargar (esto también aparecerá si la página tarda en cargarse).
- Aceptar las notificaciones.
- Cierra el navegador.
- Conectarse
- Recibirás una notificación cuando el artículo se descargue, almacene en caché y esté listo para verlo.
Con este patrón, el usuario puede guardar el teléfono en el bolsillo y continuar con su vida, sabiendo que el teléfono le avisará cuando lo recuperen como que quieran.
Permisos
Las demostraciones que mostré usan notificaciones web, que requieren permiso, pero la sincronización en segundo plano no lo hace.
Los eventos de sincronización a menudo se completan mientras el usuario tiene una página abierta en el sitio, por lo que solicitar el permiso del usuario sería una mala experiencia. En su lugar, limitaremos cuándo se pueden registrar y activar las sincronizaciones para evitar abusos. Por ejemplo:
- Solo puedes registrarte para un evento de sincronización cuando el usuario tenga una ventana abierta en el sitio.
- El tiempo de ejecución del evento está limitado, por lo que no puedes usarlos para hacer ping en un servidor cada x segundos, minar bitcoins o lo que sea.
Por supuesto, estas restricciones pueden flexibilizar o aumentar la rigurosidad según el uso real.
Mejora progresiva
Pasará un tiempo hasta que todos los navegadores admitan la sincronización en segundo plano, especialmente porque Safari y Edge aún no admiten service workers. Sin embargo, la mejora progresiva ayuda aquí:
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready.then(function(reg) {
return reg.sync.register('tag-name');
}).catch(function() {
// system was unable to register for a sync,
// this could be an OS-level restriction
postDataFromThePage();
});
} else {
// serviceworker/sync not supported
postDataFromThePage();
}
Si los service workers o la sincronización en segundo plano no están disponibles, simplemente publica el contenido de la página, como lo harías hoy.
Vale la pena usar la sincronización en segundo plano incluso si el usuario parece tener una buena conectividad, ya que te protege contra las navegaciones y los cierres de pestañas durante el envío de datos.
El futuro
Durante el primer semestre de 2016, intentamos enviar la sincronización en segundo plano a una versión estable de Chrome mientras trabajamos en una variante, la "sincronización periódica en segundo plano". Con la sincronización periódica en segundo plano, puedes solicitar un evento restringido por intervalo de tiempo, estado de la batería y estado de la red. Esto requeriría permiso del usuario, por supuesto, y también dependerá del navegador cuándo y con qué frecuencia se activan estos eventos. En otras palabras, un sitio de noticias podría solicitar una sincronización cada hora, pero el navegador podría saber que solo leíste ese sitio a las 7:00 a.m., por lo que la sincronización se activaría diariamente a las 6:50 a.m. Esta idea está un poco más alejada que la sincronización única, pero pronto lo haremos.
Poco a poco, incorporamos patrones exitosos de iOS y Android a la Web y, al mismo tiempo, conservamos lo que la hace genial.