Construir aplicaciones que funcionan fuera de línea

Feb 4, 2026

Cómo

[dieciséis]

Durante mucho tiempo, la funcionalidad sin conexión, la sincronización de fondo y las notificaciones de push tienen aplicaciones nativas diferenciadas de sus contrapartes web. los API del trabajador de servicio Es una tecnología que cambia de juego que evita el campo de juego. En este tutorial, lo usaremos para construir una página que pueda servir contenido incluso mientras no haya conexión a Internet.

Descarga el código de Filesilo

01. Un servidor HTTPS

La forma más fácil de pensar en los trabajadores de servicio es como una pieza de código que está instalada por un sitio en una máquina cliente, se ejecuta en segundo plano, y posteriormente permite que las solicitudes se envíen a ese sitio a interceptar y manipular. Debido a que esta es una capacidad tan poderosa, para trabajar con los trabajadores de servicio en un entorno en vivo, debe ejecutarse a través de HTTPS. Esto asegura que no puedan ser explotados, asegurándose de que el trabajador del servicio que el navegador reciba de una página sea genuino.

Sin embargo, para fines de desarrollo, podemos correr sin HTTPS ya que http: // localhost / Está permitido como una excepción a esta regla. La forma más sencilla de comenzar es con el NPM. http-server paquete.

 NPM Instale http-server -g
http-server -p 8000 -C-1

02. Configurar una página básica.

No hay nada en el servidor en este momento, así que hagamos una página básica para servir. Crearemos un nuevo archivo index.html, y cuando ejecutamos el servidor ahora será accesible en http: // localhost: 8000 .

En esta etapa, encontrará que si termina el servidor HTTP y actualiza la página en el navegador, obtendrá una página de error desde que no se puede llegar al sitio. Esto es totalmente esperado ya que aún no hemos almacenado en caché ningún contenido fuera de línea.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; cabeza y gt;
  & lt; meta charset = "UTF-8" / & GT;
  & lt; title & gt; Service Worker & Lt; / Title & GT;
  & lt; script src = "site.js" & gt; / lt; / script & gt;
  & lt; link rel = "stylesheet" tipo = "texto / css" href = "custom.csss" & gt;
  & lt; / cabeza y gt;
  & lt; cuerpo y gt;
  & lt; encabezado y gt;
  & lt; H1 & GT; BIENVENIDO Y LT; / H1 & GT;
  & lt; / encabezado y gt;
  & lt; div id = "contenido" & gt;
  & lt; p & gt; contenido aquí & lt; / p & gt;
  & lt; img src = "kitty.jpg" ancho = "100%" & gt;
  & lt; / DIV & GT;
  & lt; / body & gt;
& lt; / html & gt;

03. Registrar un trabajador de servicio

Ahora hemos recibido una página bastante transmitible en funcionamiento, y es hora de comenzar a pensar en la implementación de un trabajador de servicios. Antes de que obtengan la codificación, vale la pena tomar un momento para comprender el ciclo de vida de los trabajadores del servicio.

El proceso comienza con el 'registro' de un trabajador de servicio en su Javascript, que le dice al navegador que comience a instalar al trabajador, el primer paso de su ciclo de vida. A lo largo de su ciclo de vida, un trabajador de servicios estará en uno de los siguientes estados:

Instalación: Una vez que se haya registrado un trabajador de servicio, su instalación se utiliza normalmente para descargar y almacenar en caché. Contenido estático
Instalado: El trabajador está teóricamente listo para su uso, pero no se activa de inmediato.
Activando: Un trabajador de servicio instalado se activará si no hay ningún trabajador de servicio existente, o ciertas condiciones lideran el existente para caducar; La activación se usa normalmente para borrar archivos antiguos desde el contenido fuera de línea en caché
Activado: El trabajador de servicios ahora tiene control sobre el documento, y puede manejar solicitudes.
Redundante: Si el trabajador de servicio no se instaló o se activó, o si es reemplazado por un nuevo trabajador de servicio

04. Revisa que estás registrado

Vamos a registrar un trabajador de servicio. Esto señala efectivamente el navegador al archivo JavaScript que define el comportamiento del trabajador del servicio. El registro se realiza utilizando el objeto del trabajador de servicio, que es el punto de entrada a la API. También verificaremos que la API está presente en el navegador antes de intentarlo.

los Registrarse() La función se puede llamar de manera segura cada vez que la página carga, y el navegador determinará si el trabajador de servicio ya se ha registrado.

Si ('ServiceWorker' en Navigator) {
  ventana.addeventlistener ('carga', función () {
  navegator.serviceworker.register ('serviceworker.js', {scope: './'1 ).then(function(registration) {
  console.log ("trabajador de servicio registrado con éxito");
  }, función (error) {
  console.log ("Error al registrar al trabajador de servicio:" + error);
  });
  });
}

05. Implementar trabajador de servicio.

A continuación necesitamos implementar el propio trabajador de servicio. Los trabajadores de servicio pueden escuchar una serie de eventos relacionados con su propio ciclo de vida y actividad en la página. Los más importantes son instalar, activar y recuperarse.

Vamos a empezar creando un oyente para el Instalar en pc El evento, que se desencadena una vez que se completa la instalación del trabajador. Esto nos permite instruir al trabajador del servicio que agregue algún contenido fuera de línea en la carpeta actual a un caché. También debemos nombrar nuestro caché, ya que los cachés antiguos pueden persistir, actualizar / versionar este nombre de caché le permite cumplir con versiones más recientes de contenido más adelante.

 var currentcache = 'Demo-cache';
self.addeventlistener ('install', evento = & gt; {
  evento.waituntil (
  cachés.open (Currentcache). Entonces (función (caché) {
  console.log ("agregando contenido a caché");
  devuelve el cache.addall ([
  '. /index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  )
});

06. Fetch event

Nuestra página ahora escondrá el contenido cuando se cargará, pero necesitamos algún mecanismo para interceptar las solicitudes y redirigirlos a este caché. Para hacer esto, tenemos que escuchar por ha podido recuperar eventos, que se activan cuando una solicitud, como la obtención de nuestro index.html El archivo se realiza en toda la red. Luego coincidimos con la solicitud contra el caché, y sirven el recurso en caché si se encuentra. De lo contrario, volvemos a una solicitud de API de recuperación al servidor.

En este punto, vale la pena señalar que tenemos una fuerte dependencia de las promesas de JavaScript para trabajar. Estos pueden ser un poco complicados, por lo que vale la pena familiarizarse con si no los has usado antes.

 self.addeventlistener ('fetch', evento = & gt; {
  evento.Responderwith (
  cachés.match (evento.Request) .Ten (respuesta = & gt; {
  Respuesta de retorno || fetch (evento.Request);
  })
   )
    });

07. Extender el evento de búsqueda

Si lo prueba ahora (termine el servidor HTTP y actualice la página), debe encontrar que su página funciona en línea y fuera de línea. Sin embargo, es probable que desee un comportamiento sin conexión más inteligente, con diferentes contenidos o funcionalidades disponibles cuando el servidor no está disponible.

Para lograr esto, podemos extender nuestro ha podido recuperar Respuesta del evento adicional para verificar específicamente las solicitudes de navegación y responder con una página fuera de línea diferente cuando se detecta. Esta index_offline.html El archivo puede ser una variación de su página en línea, o algo completamente diferente, y también puede usar otros recursos que ha almacenado en caché, como custom.css .

 self.addeventlistener ('fetch', evento = & gt; {
  if (event.request.mode === 'Navigate') {
  evento.Responderwith (
  Fetch (Event.Request) .catch (error = & gt; {
  console.log ("página no disponible. Devolviendo contenido fuera de línea");
  devuelva los cachés.match ('./ index_offline.html');
  })
  )
  } demás {
  evento.Responderwith (
  cachés.match (evento.Request) .Ten (respuesta = & gt; {
  Respuesta de retorno || fetch (evento.Request);
  })
  )
  }
});

08. Eliminar caché

Hay una cosa más que necesitamos. Si ahora intenta modificar su contenido fuera de línea, descubrirá que no se actualiza cuando pruebe su página, ¡aún obtiene la versión anterior! Esto se debe a que los archivos más antiguos todavía están en caché.

Debe implementar algo para limpiar archivos desactualizados desde el caché para evitar que se sirvan. Esto se hace respondiendo a un activar Evento y eliminación de todos los cachés que no coinciden con el nombre especificado en CurrentCache. Luego, puede agregar un número de versión a CurrentCache cada vez que modifique su contenido fuera de línea, para asegurarse de que esté actualizado.

 esto.addeventlistener ('activate', evento = & gt; {
  var activecaches = [Currentcache];
  console.log ("trabajador de servicio activado. Comprobar el caché está actualizado");
  evento.waituntil (
  cachés.keys (). Entonces (keylist = & gt; {
  Devolver Promise.Tod (keylist.map (clave = & gt; {
  if (activecaches.indexof (clave) === -1) {
  console.log ("Eliminar la tecla de caché antiguo" +);
  devolver cachés.delete (clave);
  }
  })))
  })
  )
});

Este artículo se publicó en la revista Web Designer Magazine Nº 268. Suscríbase ahora.

Leer más:

Una guía de codificador para apis.
Comienza con Webgl usando tres.js
12 enormes tendencias de diseño web para 2018

Construir aplicaciones que funcionan fuera de línea

01. Un servidor HTTPS

02. Configurar una página básica.

03. Registrar un trabajador de servicio

04. Revisa que estás registrado

05. Implementar trabajador de servicio.

06. Fetch event

07. Extender el evento de búsqueda

08. Eliminar caché

Cómo - Artículos más populares

Cómo agregar energía a sus dibujos de vida

Crea efectos de ondulación con Pixijs

Cómo enfatizar el punto focal de una imagen

Cómo crear activos digitales

Cómo hacer tus propios tableros de lienzo

Cómo pintar reflexiones convincentes

Cómo obtener más de GIFS

Prototipo de un botón de acción flotante en Pixate

Categorías