Descripción general del service worker

Los service workers ofrecen una utilidad increíble, pero puede ser difícil trabajar con ellos al principio. Workbox facilita el uso de los service workers. Sin embargo, debido a que los service workers resuelven problemas difíciles, cualquier abstracción de esa tecnología también será complicada sin comprenderla. Por lo tanto, estos primeros fragmentos de documentación abarcarán esa tecnología subyacente antes de pasar a los detalles específicos de Workbox.

Para ver una lista activa de service workers, ingresa chrome://serviceworker-internals/ en la barra de direcciones.

Una lista activa de service workers.

¿Qué proporcionan los service workers?

Los service workers son recursos especializados de JavaScript que actúan como proxies entre navegadores web y servidores web. Su objetivo es mejorar la confiabilidad mediante el acceso sin conexión, así como mejorar el rendimiento de la página.

Un ciclo de vida similar a una app con mejora progresiva

Los service workers son una mejora de los sitios web existentes. Esto significa que si los usuarios de navegadores que no admiten service workers visitan sitios web que los usan, no habrá problemas con la funcionalidad de referencia. De eso se trata la Web.

Los service workers mejoran progresivamente los sitios web a través de un ciclo de vida similar a las aplicaciones específicas de la plataforma. Piensa en lo que sucede cuando se instala una aplicación nativa desde una tienda de aplicaciones:

  • Se realiza una solicitud para descargar la aplicación.
  • La app se descarga y se instala.
  • La app está lista para usarse y se puede iniciar.
  • Las actualizaciones de la app para nuevos lanzamientos

El ciclo de vida del service worker es similar, pero con un enfoque de mejora progresiva. En la primera visita a una página web que instala un service worker nuevo, la visita inicial a la página proporciona su funcionalidad de referencia mientras se descarga el service worker. Una vez que se instala y activa un service worker, controla la página para ofrecer mayor confiabilidad y velocidad.

Acceso a una API de almacenamiento en caché controlada por JavaScript

Un aspecto indispensable de la tecnología de service worker es la interfaz Cache, que es un mecanismo de almacenamiento en caché completamente independiente de la caché HTTP. Se puede acceder a la interfaz Cache dentro del alcance del service worker y del alcance del subproceso principal. Esto abre muchas posibilidades de interacciones impulsadas por el usuario con una instancia de Cache.

Mientras que la caché HTTP se ve afectada por las directivas de almacenamiento en caché especificadas en los encabezados HTTP, la interfaz Cache se puede programar mediante JavaScript. Esto significa que el almacenamiento en caché de respuestas para las solicitudes de red puede basarse en la lógica que sea mejor para un sitio web determinado. Por ejemplo:

  • Almacena los recursos estáticos en la caché en la primera solicitud y solo entrégalos desde la caché para cada solicitud posterior.
  • El lenguaje de marcado de la página de la tienda en la caché, pero solo entrega el lenguaje de marcado de la caché en situaciones sin conexión.
  • Entrega respuestas inactivas para ciertos elementos desde la caché, pero actualízalas desde la red en segundo plano.
  • Transmite contenido parcial de la red y combínalo con un shell de app desde la caché para mejorar el rendimiento perceptual.

Cada una es un ejemplo de una estrategia de almacenamiento en caché. Las estrategias de almacenamiento en caché posibilitan las experiencias sin conexión y pueden proporcionar un mejor rendimiento evitando las verificaciones de revalidación de alta latencia que se inicia la caché HTTP. Antes de sumergirnos en Workbox, veremos algunas estrategias y el código de almacenamiento en caché que las pone en funcionamiento.

Una API asíncrona y controlada por eventos

La transferencia de datos por la red es intrínsecamente asíncrona. Lleva tiempo solicitar un recurso, que un servidor responda a esa solicitud y que la respuesta se descargue. El tiempo implicado es variado e indeterminado. Los service workers se adaptan a esta asincronía mediante una API controlada por eventos usando devoluciones de llamada para eventos como los siguientes:

Los eventos se pueden registrar con una API de addEventListener conocida. Todos estos eventos pueden interactuar con la interfaz Cache. En particular, la capacidad de ejecutar devoluciones de llamada cuando se envían solicitudes de red es vital para proporcionar la confiabilidad y la velocidad que se buscan.

El trabajo asíncrono en JavaScript implica el uso de promesas. Debido a que las promesas también respaldan async y await, esas funciones de JavaScript también se pueden usar para simplificar el código del service worker (y de Workbox) a fin de brindar una mejor experiencia a los desarrolladores.

Almacenamiento previo en caché y almacenamiento en caché del entorno de ejecución

La interacción entre un service worker y una instancia de Cache implica dos conceptos de almacenamiento en caché distintos: almacenamiento previo en caché y almacenamiento en caché del entorno de ejecución. Cada una de ellas es fundamental para los beneficios que puede ofrecer un service worker.

El almacenamiento previo en caché es el proceso de almacenar recursos en caché con anticipación, por lo general, durante la instalación de un service worker. Con el almacenamiento previo en caché, los elementos y materiales estáticos clave necesarios para el acceso sin conexión se pueden descargar y almacenar en una instancia de Cache. Este tipo de almacenamiento en caché también mejora la velocidad de la página a las páginas posteriores que requieren los elementos prealmacenados en caché.

El almacenamiento en caché en tiempo de ejecución ocurre cuando se aplica una estrategia de almacenamiento en caché a los recursos a medida que se solicitan desde la red durante el tiempo de ejecución. Este tipo de almacenamiento en caché es útil porque garantiza el acceso sin conexión a las páginas y los recursos que el usuario ya visitó.

Cuando se combinan, estos enfoques para usar la interfaz de Cache en un service worker brindan un beneficio enorme a la experiencia del usuario y proporcionan comportamientos similares a los de las apps a páginas web que, de otro modo, serían comunes.

Aislamiento del subproceso principal

El estado del rendimiento de JavaScript es un desafío en evolución para la Web y, desde la perspectiva del usuario, depende de las capacidades del dispositivo y del acceso a Internet de alta velocidad. Cuanto más se usa JavaScript, más difícil resulta crear sitios web rápidos que ofrezcan experiencias del usuario encantadoras.

Los service workers son como los web workers, ya que todo el trabajo que realizan ocurre en sus propios subprocesos. Esto significa que las tareas de los service workers no competirán por la atención con otras tareas del subproceso principal. El diseño de los service workers prioriza al usuario.

La ruta por delante

Esta documentación es solo una descripción general. Hay algunos temas más que se deben abordar sobre los service workers antes de hablar sobre Workbox, pero ten la certeza de que, si tienes un conocimiento sólido de los service workers, el uso de Workbox será una experiencia más fácil y productiva.