Como usar Service Workers en páginas que funcionen offline

viernes mayo 6, 2022

¿Qué es un Service Worker?

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

Crear una página offline con Service Workers

Crear el Service Worker

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.php',
  'otra-pagina.html',
  '/img/main/infoudo-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);
});  

Enlazar la página al archivo del Service Worker

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

Eliminar o reemplazar la cache guardada en el navegador

Probar el funcionamiento del Service Worker online

Probar Service Worker offline en la computadora

Usos prácticos de Service Workers en un sitio web

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

Uso de Service Workers en InfoUDO

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

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

— @SergioAleman1

Categorías: #Web, #

---

[0] Atrás | Directorio

 Inicio

Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!

[»] Las mejores Apps para tu celular

[»] Imágenes Gratis

---