Service workers para páginas offline

Transcript

1. Service workers para offline pages
2. Omar Vázquez 
 Software Engineer @vzqzac vzqzac
3. ¿Qué son los service workers? • Scripts que corren en segundo plano en el navegador (un tipo de workers) • Actúan como proxies entre las aplicaciones web, la red, y el navegador • Impulsados por eventos, registrados contra un origen y un camino (domain/path)
4. ¿Qué pueden hacer? • Interceptar y modificar la navegación y peticiones de recursos a la red • Almacenar en caché (del browser) recursos de manera granular (definiendo accesos mediante paths)
5. GOTCHAs de service workers • Los service workers corren en el contexto de un worker normal: • No tiene acceso al DOM • Corre en un hilo diferente al del JavaScript que corre en nuestra aplicación • Su diseño es completamente asíncrono: • XHR (XMLHttpRequest -> Ajax) no funciona dentro de service workers • La API de localStorage no funciona dentro de un service worker • Sólo pueden ser usados mediante conexiones HTTPS por razones de seguridad (susceptibles a ataques man in the middle)
6. Casos de uso • Offline pages • Sincronización de datos en segundo plano • Responder a peticiones de recursos desde diferentes origenes • Recibir actualizaciones centralizadas de datos exhaustivos de calcular • Compilado del lado del cliente y administración de dependencias (para CoffeeScript, less, módulos CJS/ AMD con fines de desarrollo) • Hooks para servicios en segundo plano • Plantillas basadas en patrones dentro de la URL • Mejoras de rendimiento con prefetching de recursos, como fotografías de un álbum
7. Ciclo de vida 1. El navegador registra el service worker 2. Descarga el archivo al almacenamiento del browser 3. Instalación 1. Si el service worker no ha sido registrado antes 2. Si el coding fuente del código ha cambiado (comparado por cada byte) 4. Activación 1. Si no hay otro service worker activo 2. Si self.skipWaiting() fue llamado en el manejador de evento para install 3. El usuario actualiza la pagina
8. ¡Ejemplo práctico!
9. Para qué tener una página disponible fuera de línea?
10. Otros ejemplos