Workbox, tu primera vez

Recientemente estuve revisando documentación sobre como funciona todo este mundo increíble que nos prometen los Service Workers.

Creamos una carpetica llamada working-with-workbox y dentro la siguiente estructura. Es simple por fines didácticos, solo quiero demostrar como funciona. Posteriormente agregare mas complejidad.

1. Crear la estructura básica para la prueba

 working-with-workbox
├── index.html (Pagina principal)
├── styles.css (Hoja de estilos principal)
└── app.js (App principal)
└── sw.js (Service worker)

Creare un archivo index.html simple importando styles.css y app.js que despues seran manipulados por el service worker.

Mi archivo styles.css es super simple con fines didacticos como comentaba.

Y finalmente el archivo app.js tambien super simple.

En este punto me pregunto si siquiera vale la pena super estos pequeños archivos a gist 😅 pero bueno, sigamos.

2. Primera prueba

Para esta primera prueba vamos a levantar un servidor sencillito. Asumo que tiene python3 instalado en tu sistema operativo (En la mayoria de distros de Linux viene pre-instalado) y en macOS también.

Abre tu consola favorita y ubícate en la carpeta de tu proyecto. Y utilizaremos el comando:

python3 -m http.server 8002

Deberías tener un resultado como el siguiente:

Abrimos Google Chrome y colocamos la url que nos indica la consola (http://0.0.0.0:8002) y pulsamos ENTER.

Inspeccionando la pagina podemos ver en la pestana Network que los archivos styles.css y app.js vienen directamente de la red

Lo sabemos porque en la columna que dice Size aparece el peso de las archivos en lugar de Service Worker.

3. Agregando la magia de los service workers

Llenamos el archivo sw.js con lo siguiente

Volvemos a revisar nuestra pagina en el browser y si inspeccionamos el Network nuevamente veremos que ahora los archivos css y js ya no vienen del Network sino de ServiceWorker. Asegúrate de tener marcado el checkbox “Disable cache” porque sino el browser intentara servir estos archivos desde la cache del browser y no es exactamente lo queremos. Te ha de quedar algo como esto:

Felicidades! Has implementado de manera exitosa cache para los archivos css y js. Ahora tu browser utilizara la versión que tiene guardada en la cache y estos son accesibles mucho mas rápido que pedirlos hasta el servidor, por ende tu pagina cargara mucho rápido y el usuario estará muy contento.

Hemos visto apenas la punta del iceberg. En el siguiente tutorial veremos como utilizar el Service Worker que hemos creado para tener soporte “offline” en nuestra pagina.

Aun nos falta ver muchas formas de como implementar service workers, con webpack se integra de manera distinta aunque esto esta mas orientado a aplicaciones web.

Con este sencillo ejemplo te bastaría para tu sitio personal. Estamos todos unidos para crear cada vez mejores experiencias para nuestros usuarios y la velocidad de carga de nuestras paginas y aplicaciones siempre sera una variable muy importante en esa ecuación.

Hasta la próxima!

More From Medium

Also tagged Service Worker

Also tagged Progressive Web App

Also tagged Progressive Web App

The Case for Mobile Web Apps

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade