Como usar Service Workers en páginas que funcionen offline

Explico en este artículo el uso elemental de Service Workers, para crear páginas que funcionen sin conexión a internet.
Comparto el código necesario con ejemplos.

¿Qué es un Service Worker?

Service Workers es una tecnología implementada en los navegadores modernos, tanto para escritorio o dispositivos móviles.
Un "service worker" es un script que el navegador web ejecuta en segundo plano y hace posible diversas funcionalidades sin la interacción del usuario.
Actualmente estas funcionalidades incluyen las Notificaciones Web Push (avisos que se reciben en el navegador o en Windows), Aplicaciones Web Progresivas (Progressive Web App) para Android y paginas creadas para funcionar sin conexión.
Un ejemplo básico de una aplicación web offline, es https://squoosh.app/, sitio creado por Google para comprimir imágenes.

Hacer que una página funcione sin conexión con Service Workers

En la práctica Service Workers se puede implementar en una o varias páginas de un sitio, para lograr que pueda funcionar sin conexión a internet y de forma secundaria elevar su velocidad de carga.
Para eso solo basta con especificar en el script del service worker, la lista de elementos que el navegador debe guardar la cache o memoria del navegador (Cache Storage).
Pueden ser archivos HTML o estáticos (imágenes, CSS o scripts).
Para lograr lo anterior son necesarios dos requisitos:
Para implementar esta tecnología en una o varias páginas, sigue los siguientes pasos.

Crear una PWA (página que funcione offline) con Service Workers

Crear el Service Worker

El script con las instrucciones para implementar la función de Service Workers, es solo un archivo de texto plano con la extensión. JS
Puede tener cualquier nombre.
Usa el siguiente código.

self.addEventListener('install', function(event) {
// Instalar de inmediato
if (self.skipWaiting) { self.skipWaiting(); }
  event.waitUntil(
    caches.open('cache01').then(function(cache) {
      return cache.addAll([
        './',
  'index.html',
  'otra-pagina.html',
  '../img/main/norfipc-movil.webp',
  '../img/logo.jpg',
  '../img/portada.jpg'
      ]);
    })
  );
});
// Cache, falling back to network
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
 // Elimina archivos de cache viejos
  var cacheWhitelist = ['cache01'];
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    });
	caches.keys().then(function(cacheKeys) {
	// Muestra en la consola la cache instalada 
	console.log('Versión SW: '+cacheKeys);
});  

En él se listan las páginas o archivos auxiliares que el navegador debe guardar en cache.
Las paginas deben ser servidas en formato HTML, en PHP algunos navegadores no las muestran correctamente.
En caso que solo se incluyan archivos HTML, estos se verán en el navegador sin ningún estilo, al cargar la página offline.
Del mismo modo en caso que no se incluyan las imágenes de la página, estas no se verán.
Todas las funciones del script están comentadas (líneas que comienzan con los caracteres //).

Enlazar la página al archivo del Service Worker

Incluye en la parte inferior de la página, antes del cierre de la etiqueta </body> el siguiente código.

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('worker.js?'+Math.random()+'')
  });
}
</script>

Especifica el nombre del script del Service Worker, llamado en este ejemplo: "worker.js"

Eliminar o reemplazar la cache guardada en el navegador

La página asi creada o modificada, funcionará usando la cache local, hasta que el usuario manualmente use la opción de borrar los datos guardados en su Configuración.
Cada vez que se cargue dicha página estando conectamos a internet, el navegador revisa el archivo del Service Worker buscando algún cambio.
Para que se elimine y reemplacen estos datos, necesitamos en el archivo del Service Worker, especificar otro nombre de cache.
En este ejemplo, bastará con reemplazar "cache01" por "cache02", en las dos líneas donde aparece este dato.

Probar el funcionamiento del Service Worker online

Después de subir la página modificada al servidor y el archivo auxiliar, cárgala en un navegador (PC o móvil), desconéctate de internet y vuelve a cargarla para comprobar su funcionamiento offline.

Probar Service Worker offline en la computadora

ServiceWorkers solo funciona mediante HTTPS, pero no es necesario subir las páginas a internet para probarlas.
Podemos hacerlo desde la computadora, usando la aplicación de Google Chrome Web Server for Chrome
Para eso después de instalar la aplicación e iniciarla, debemos de indicar el directorio donde se encuentran los archivos.

A continuación solo necesitamos cargar en el navegador la siguiente dirección URL: http://127.0.0.1:8887/
Desde este momento podemos visualizar la página como si estuviera en internet y hacer las pruebas necesarias.
Para eso podemos valernos de la Herramienta para Desarrolladores de Chrome (Control + Shift + J) en su sección Aplicación.
Comprobar funcionamiento del Service Worker en la Consola de desarrolladores del navegador Google Chrome

Ver a mayor tamaño
Para comprobar cómo se ve realmente una página en un dispositivo sin conexión, en el panel Aplicación, en la barra lateral selecciona "Service Workers", marca la casilla "Offline" y recarga.
Para comprobar su validez y los parámetros necesarios, también podemos emplear la extensión para Google Chrome "Lighthouse".
Lighthouse es una herramienta de Auditoria, con la sección "Progressive Web App", creada para probar Aplicaciones Web Progresivas.

Usos prácticos de Service Workers en un sitio web

Acelerar y mejorar la velocidad de carga de las páginas con Service Workers

Después de cargar por vez primera la página donde se incluya el Service Workers, en lo adelante el navegador usará los archivos guardados en cache que se le hayan indicado, sin tener que acceder a l servidor.
Esto eleva considerablemente el tiempo de carga de dicha página y beneficia a ambos, lectores y propietarios del sitio, sin que se sacrifiquen recursos como la publicidad o el script que indica las visitas a dicha página.

Uso de Service Workers en NorfiPC

He experimentado con los usos prácticos de Service Workers y lo he implementado en este sitio con dos objetivos.
1- Facilitar a los lectores el funcionamiento de toda una sección, con información de sobre diversos temas, que resultan de mucha utilidad poder consultarlas sin conexión.
La sección NorfiPC Móvil funciona como una verdadera Aplicación Web Progresiva.
2- Acelerar al máximo la velocidad de carga de la página principal de este sitio y otras auxiliares, permitiendo adicionalmente que los lectores puedan explorar su contenido sin conexión a internet.

Crear una Aplicación Web Progresiva (Progressive Web App) para Android

Las Web Apps que solo funcionan en dispositivos móviles con Android, usan el mismo sistema anterior, con otras instrucciones adicionales.
Estas permiten que al cargar la página online, salte un cuadro que indique Agregar a la pantalla principal (Add to homescreen).
Al presionar en el, la página con los archivos auxiliares es almacenada en cache y creado un acceso directo en la pantalla del dispositivo.
Explico en otro artículo como crear una de ellas: Como crear una Aplicación Web Progresiva para móviles

Uso en la práctica de las Aplicaciones Web Progresivas (PWA)

Las Aplicaciones Web Progresivas (PWA), además de ahorrarnos consumo de internet, nos evitan tener que instalar aplicaciones o programas en la computadora o en la Laptop de la forma tradicional.
Yo personalmente uso varias de ellas en mi navegador.
Lee más información detallada: Aplicaciones Web Progresivas (PWA) que uso
Directorio de Aplicaciones Web Progresivas (PWA) en internet

Más información sobre el uso de Service Workers

Service Workers: an Introduction en Desarrolladores de Google.

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales