Service Worker API

Conceptos y uso de service workers

Un service worker es un worker controlado por eventos, registrado para un origen y una ruta. Consiste en un archivo JavaScript que puede controlar la pgina web o sitio con el que est asociado, interceptando y modificando las peticiones de navegacin y recursos, y almacenando en cach los recursos de manera muy granular para ofrecer un control completo sobre cmo se comporta la aplicacin en ciertas situaciones (la ms obvia es cuando la red no est disponible).

Los service workers se ejecutan en un contexto worker: por lo tanto, no tienen acceso al DOM y se ejecutan en un hilo distinto al JavaScript principal que alimenta la aplicacin. Son no bloqueantes y estn diseados para ser completamente asncronos. Como consecuencia, APIs como XHR sncrono y Web Storage no se pueden usar dentro de un service worker.

Los service workers no pueden importar mdulos JavaScript dinmicamente, y import() lanzar un error si se invoca en el mbito global de un service worker. Las importaciones estticas usando la sentencia import s estn permitidas.

Los service workers solo estn disponibles en contextos seguros: esto significa que su documento se sirve sobre HTTPS, aunque los navegadores tambin tratan http://localhost como un contexto seguro para facilitar el desarrollo local. Las conexiones HTTP son susceptibles a inyeccin de cdigo malicioso mediante ataques de intermediario, y tales ataques podran ser peores si se permitiera acceso a estas potentes APIs.

Registro

Un service worker se registra primero mediante el mtodo ServiceWorkerContainer.register(). Si tiene xito, el service worker se descargar en el cliente e intentar la instalacin/activacin (ver ms abajo) para las URLs accedidas por el usuario dentro de todo el origen, o un subconjunto especificado.

Descarga, instalacin y activacin

En este punto, el service worker seguir el siguiente ciclo de vida:

1. Descarga
2. Instalacin
3. Activacin

El service worker se descarga inmediatamente cuando un usuario accede por primera vez a un sitio/pgina controlados por un service worker.

Despus de eso, se actualiza cuando:

• Se produce una navegacin a una pgina dentro del alcance.
• Se dispara un evento en el service worker y no se ha descargado en las ltimas 24 horas.

La instalacin se intenta cuando el archivo descargado resulta ser nuevo, ya sea diferente a un service worker existente (comparado byte a byte), o el primer service worker encontrado para esta pgina/sitio.

Si es la primera vez que un service worker est disponible, se intenta la instalacin; tras una instalacin exitosa, se activa.

Si ya hay un service worker existente disponible, la nueva versin se instala en segundo plano, pero an no se activa; en ese momento se le llama worker en espera. Solo se activa cuando ya no hay pginas cargadas que an usen el service worker antiguo. En cuanto no quedan ms pginas por cargar, el nuevo service worker se activa (convirtindose en el worker activo). La activacin puede ocurrir antes usando ServiceWorkerGlobalScope.skipWaiting() y las pginas existentes pueden ser reclamadas por el worker activo usando Clients.claim().

Se puede escuchar el evento install; una accin estndar es preparar el service worker para su uso cuando se dispara, por ejemplo creando una cach usando la API de almacenamiento incorporada, y colocando dentro los recursos que se necesitarn para ejecutar la aplicacin sin conexin.

Tambin existe un evento activate. El momento en que se dispara este evento es generalmente un buen momento para limpiar cachs antiguas y otras cosas asociadas con la versin anterior del service worker.

El service worker puede responder a peticiones usando el evento FetchEvent. Se puede modificar la respuesta a estas peticiones de cualquier manera deseada, usando el mtodo FetchEvent.respondWith().

Para un tutorial completo que muestra cmo construir un primer ejemplo bsico, lea Uso de Service Workers.

Uso de enrutamiento esttico para controlar cmo se obtienen los recursos

Los service workers pueden incurrir en un costo de rendimiento innecesario: cuando una pgina se carga por primera vez despus de un tiempo, el navegador tiene que esperar a que el service worker se inicie y ejecute para saber qu contenido cargar y si debe provenir de una cach o de la red.

Si ya se sabe de antemano de dnde deben obtenerse ciertos contenidos, se puede omitir el service worker por completo y obtener los recursos de forma inmediata. El mtodo InstallEvent.addRoutes() se puede usar para implementar este caso de uso y ms.

Otras ideas de casos de uso

Los service workers tambin estn pensados para usarse en cosas como:

• Sincronizacin de datos en segundo plano.
• Responder a peticiones de recursos desde otros orgenes.
• Recibir actualizaciones centralizadas de datos costosos de calcular, como geolocalizacin o giroscopio, de manera que mltiples pginas puedan usar un mismo conjunto de datos.
• Compilacin del lado del cliente y gestin de dependencias de CoffeeScript, Less, mdulos CJS/AMD, etc., para desarrollo.
• Hooks para servicios en segundo plano.
• Plantillas personalizadas basadas en ciertos patrones de URL.
• Mejoras de rendimiento, por ejemplo, pre-obtencin de recursos que el usuario probablemente necesitar pronto, como las siguientes imgenes de un lbum de fotos.
• Simulacin de APIs.

En el futuro, los service workers podrn hacer varias cosas tiles para la plataforma web que la acercarn a la viabilidad de aplicaciones nativas. Resulta interesante que otras especificaciones pueden y van a empezar a hacer uso del contexto de service workers, por ejemplo:

• Sincronizacin en segundo plano: Iniciar un service worker aunque no haya usuarios en el sitio, para que las cachs se puedan actualizar, etc.
• Reaccin a mensajes push: Iniciar un service worker para enviar a los usuarios un mensaje indicando que hay nuevo contenido disponible.
• Reaccin ante una fecha y hora determinadas.
• Entrada en una geocerca.

Interfaces

Cache

Representa el almacenamiento para pares de objetos Request / Response que se almacenan en cach como parte del ciclo de vida del ServiceWorker.

CacheStorage

Representa el almacenamiento para objetos Cache. Proporciona un directorio maestro de todas las cachs nombradas a las que puede acceder un ServiceWorker, y mantiene una correspondencia de nombres de cadena a los objetos Cache correspondientes.

Client

Representa el mbito de un cliente de service worker. Un cliente de service worker es un documento en un contexto de navegador o un SharedWorker, controlado por un worker activo.

Clients

Representa un contenedor para una lista de objetos Client; la va principal para acceder a los clientes de service worker activos en el origen actual.

ExtendableEvent

Extiende el tiempo de vida de los eventos install y activate despachados en el ServiceWorkerGlobalScope, como parte del ciclo de vida del service worker. Esto asegura que los eventos funcionales (como FetchEvent) no se despachan al ServiceWorker hasta que actualiza los esquemas de base de datos, elimina entradas de cach obsoletas, etc.

ExtendableMessageEvent

El objeto de evento de un evento message disparado en un service worker (cuando se recibe un mensaje de canal en el ServiceWorkerGlobalScope desde otro contexto), extiende el tiempo de vida de tales eventos.

FetchEvent

El parmetro pasado al controlador onfetch, FetchEvent representa una accin de fetch despachada en el ServiceWorkerGlobalScope de un ServiceWorker. Contiene informacin sobre la peticin y la respuesta resultante, y proporciona el mtodo FetchEvent.respondWith(), que permite proporcionar una respuesta arbitraria a la pgina controlada.

InstallEvent

El parmetro pasado a la funcin controladora de un evento install, la interfaz InstallEvent representa una accin de instalacin despachada en el ServiceWorkerGlobalScope de un ServiceWorker. Como hijo de ExtendableEvent, asegura que los eventos funcionales como FetchEvent no se despachan durante la instalacin.

NavigationPreloadManager

Proporciona mtodos para gestionar la precarga de recursos con un service worker.

ServiceWorker

Representa un service worker. Mltiples contextos de navegacin (por ejemplo, pginas, workers, etc.) pueden estar asociados con el mismo objeto ServiceWorker.

ServiceWorkerContainer

Proporciona un objeto que representa el service worker como una unidad global en el ecosistema de red, incluyendo servicios para registrar, dar de baja y actualizar service workers, y acceder al estado de los service workers y sus registros.

ServiceWorkerGlobalScope

Representa el contexto de ejecucin global de un service worker.

ServiceWorkerRegistration

Representa un registro de service worker.

WindowClient

Representa el mbito de un cliente de service worker que es un documento en un contexto de navegador, controlado por un worker activo. Es un tipo especial de objeto Client, con algunos mtodos y propiedades adicionales disponibles.

Extensiones a otras interfaces

Window.caches y WorkerGlobalScope.caches

Devuelve el objeto CacheStorage asociado al contexto actual.

Navigator.serviceWorker y WorkerNavigator.serviceWorker

Devuelve un objeto ServiceWorkerContainer, que proporciona acceso al registro, eliminacin, actualizacin y comunicacin con los objetos ServiceWorker para el documento asociado.

Especificaciones

Specification
Service Workers Nightly

Vase tambin

• Uso de Service Workers
• Ciclo de vida de Service Worker
• Ejemplo bsico de cdigo de service worker
• APIs web relacionadas con Service Worker API:
  • Background Fetch API
  • Background Synchronization API
  • Content Index API
  • Cookie Store API
  • Notifications API
  • Web-based Payment Handler API
  • Push API
  • Web Periodic Background Synchronization API