Un service worker responde cuando no hay red
Un service worker es un script que el navegador guarda aparte de la página. Puede contestar las peticiones de la app desde una copia guardada. Gracias a él, una app web puede abrirse sin conexión.
Piensa en el metro: entre dos estaciones no hay cobertura, y la app de horarios debería seguir abriéndose.
Al terminar esta lección
Nota
Puedo explicar cómo una app web abre sin conexión.
Palabras clave
| Palabra | Qué significa |
|---|---|
| Service worker | un script que el navegador guarda y que puede responder a las peticiones |
| Caché | un almacén de copias de archivos |
| Estrategia | la regla que decide si se responde con la caché o con la red |
| Petición | el mensaje con el que la página pide un archivo |
| Sin conexión | sin red: la app solo puede usar lo que ya tiene guardado |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un service worker se instala y luego intercepta
El navegador registra el service worker la primera vez que se abre la app. En la instalación, el script guarda en la caché los archivos que la app necesita.
Después, cada petición de la página pasa primero por él. Él decide si contesta con una copia o si la pide a la red.
Un service worker con dos eventos
const CACHE = "comedor-v1";
const FILES = ["/", "/style.css", "/app.js"];
self.addEventListener("install", (event) => {
event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(FILES)));
});
self.addEventListener("fetch", (event) => {
event.respondWith(caches.match(event.request).then((hit) => hit || fetch(event.request)));
});El laboratorio tiene un service worker real
La app del laboratorio trae su sw.js. Guarda una lista de ocho archivos en la caché habits-v1. El script siguiente comprueba que cada archivo de la lista existe.
Sus palabras están en inglés: exists es "existe" y MISSING es "falta". Piensa qué pasaría si falta un archivo: la instalación guarda la lista entera de una vez.
Comprobar la lista de archivos del service worker
docker exec jupyter python3 steps/offline.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Contar los eventos que escucha sw.js
docker exec jupyter grep -c addEventListener app/sw.jsSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
La estrategia decide entre caché y red
Una estrategia es la regla que elige qué respuesta dar. Con caché primero, se mira la copia y solo se va a la red si no está. Con red primero, se pide a la red y la copia es el plan B.
Con copia y actualiza, se responde ya con la copia y, a la vez, se pide la versión nueva para la próxima vez.
Ejemplo resuelto: qué estrategia va con cada petición
| Petición | Estrategia | Por qué |
|---|---|---|
| /style.css, /icon-192.png | cache-first | Cambian poco y se quiere rapidez |
| /api/horarios | network-first | Se quiere el dato nuevo, y la copia vale si no hay red |
| /index.html | stale-while-revalidate | Abre ya y se renueva para la próxima vez |
| POST /api/reservas | network-only | Escribir datos no se puede contestar desde una copia |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un error frecuente
Advertencia
Mucha gente cree que el service worker funciona en cualquier dirección. Un navegador solo lo admite en una conexión segura, y la vista previa del laboratorio puede no serlo. La consola del navegador dice si lo ha rechazado. En una dirección segura, mira la pestaña de aplicación de las herramientas del navegador.