El trabajador de servicio no funciona en modo sin conexión con el servidor node js

  • Estoy tratando de construir un PWA con una primera política fuera de línea.
    • El servidor para los archivos de origen es un servidor NodeJS .
    • Actualmente estoy probando esto en un servidor de nodo localhost (¿no estoy seguro de que tenga un impacto?).
    • El trabajador de servicio + almacenamiento en caché parece estar bien, pero en el modo sin conexión solo obtengo la página sin conexión de Chrome .

Vamos a entrar en detalles:

La página que se sirve (a través de http: // localhost: 8080 / place / test url) tiene algún JS del lado del cliente, en el que registro a un trabajador de servicio:

cliente.js

if ('serviceWorker' in navigator) { navigator.serviceWorker .register(rootPath+'/js/service-worker.js') .then(function() { console.log('Service Worker Registered'); }); } 

service-worker.js (basado en el tutorial de Google PWA)

 var cacheName = 'myCacheVersion'; var filesToCache = [ '../', '../place/test', '../js/client.js', '../js/service-worker.js', "../css/style.css" ]; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); }); self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key !== cacheName) { console.log('[ServiceWorker] Removing old cache', key); return caches.delete(key); } })); }) ); return self.clients.claim(); }); self.addEventListener('fetch', function(e) { console.log('[ServiceWorker] Fetch', e.request.url); e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); }); 

En la consola de Dev Tools, todo parece estar bien:

  • El SW está registrado
  • El caché contiene los elementos que quería almacenar.

Pero cuando selecciono la checkbox Modo sin conexión y actualizo la url de mi página: http: // localhost: 8080 / place / test , solo obtengo la página web sin conexión de Google Chrome .

=> ¿Qué me estoy perdiendo allí? (¿Tiene que ver con nodeJs? ¿Con el entorno localhost? ¿Con mi implementación?)

He estado luchando con este por un tiempo ahora …

He comprobado en la pestaña “Aplicación” y mi trabajador de servicio aparece como activado y se está ejecutando.

Nota: si encuentra una pregunta similar aquí, pero no hay una respuesta satisfactoria allí: el trabajador de servicio no se ejecuta en modo fuera de línea usando el servidor nodejs

Fundamentalmente, este es el mismo problema que se responde aquí: el trabajador de servicios está almacenando archivos en caché, pero el evento de recuperación nunca se activa

Si mira en su consola, verá que mientras la instalación, la activación, el almacenamiento en caché y el registro suceden, la “búsqueda” no lo hará. Esto se debe a que usted localizó al trabajador de servicios bajo js , por lo que, por razones de seguridad, Chrome (etc.) no lo usará para ninguna URL, excepto las que se encuentran en el mismo directorio o a continuación.

Si coloca su client.js y service-worker.js en el mismo nivel en lugar de en un subdirectorio js , todo comenzará a funcionar. Eso requerirá la actualización del contenido de los archivos, que se muestra a continuación como referencia.

Una pequeña advertencia: usé tontamente IIS en una caja de Windows para trabajar en esto, y entre eso y Chrome se aferraron como una muerte sombría a los archivos HTML en caché con ubicaciones de archivos JS obsoletas. Tuve que copiarlos en un subdirectorio, haciendo URLs nuevas, para probar la solución.

index.html :

     link to ct  

https://stackoverflow.com/questions/45907686/service-worker-not-working-in-offline-mode-with-node-js-server/cachetest.html :

    cachetest 

client.js :

 if ('serviceWorker' in navigator) { navigator.serviceWorker .register('service-worker.js') .then(function() { console.log('Service Worker Registered'); }); } 

serviceworker.js :

 var cacheName = 'myCacheVersion'; var filesToCache = [ '', 'https://stackoverflow.com/questions/45907686/service-worker-not-working-in-offline-mode-with-node-js-server/cachetest.html', 'client.js', 'service-worker.js', // "css/style.css" ]; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); }); self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key !== cacheName) { console.log('[ServiceWorker] Removing old cache', key); return caches.delete(key); } })); }) ); return self.clients.claim(); }); self.addEventListener('fetch', function(e) { console.log('[ServiceWorker] Fetch', e.request.url); e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); }); 

solo haz esto

en app.js

 app.use(express.static(path.join(__dirname, '/'))) 

y pon tus sw.js en la root