javascript - property - title label html

¿Cómo actualizar la página después de una actualización de ServiceWorker?

Question

He consultado muchos recursos sobre los Trabajadores de Servicios:

• Actualizando su ServiceWorker
• ServiceWorker: Revolución de la plataforma web
• La encantadora SVGOMG Jake Archibald.

Sin embargo, durante mi vida no puedo descubrir cómo actualizar la página después de que se haya instalado un nuevo ServiceWorker. No importa lo que haga, mi página está atascada en una versión anterior, y solo una actualización (Cmd-Shift-R) la arreglará. Ninguna combinación de 1) cerrar la pestaña, 2) cerrar Chrome o 3) location.reload(true) servirá el nuevo contenido.

Tengo una aplicación de ejemplo súper simple basada principalmente en SVGOMG. En la instalación, cache.addAll() caché un montón de recursos usando cache.addAll() , y también hago skipWaiting() si el número de versión principal de la versión actual no coincide con el número de la versión activa (basado en una búsqueda de IndexedDB):

self.addEventListener(''install'', function install(event) {
  event.waitUntil((async () => {
    var activeVersionPromise = localForage.getItem(''active-version'');
    var cache = await caches.open(''cache-'' + version);
    await cache.addAll(staticContent);
    var activeVersion = await activeVersionPromise;
    if (!activeVersion ||
      semver.parse(activeVersion).major === semver.parse(version).major) {
      if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around
        self.skipWaiting();
      }
    }
  })());
});

Estoy usando un sistema inspirado en semver en el que el número de versión principal indica que el nuevo ServiceWorker no puede intercambiarse en caliente por el anterior. Esto funciona en el lado de ServiceWorker: un salto de v1.0.0 a v1.0.1 hace que el trabajador se instale inmediatamente en una actualización, mientras que de v1.0.0 a v2.0.0, espera que la pestaña se cierre y se vuelva a abrir antes de instalado.

De vuelta en el hilo principal, actualizo manualmente el ServiceWorker después del registro; de lo contrario, la página ni siquiera recibe la nota de que hay una nueva versión del ServiceWorker disponible (curiosamente, encontré muy pocas menciones de esto en la documentación del ServiceWorker):

navigator.serviceWorker.register(''/sw-bundle.js'', {
  scope: ''./''
}).then(registration => {
  if (typeof registration.update == ''function'') {
    registration.update();
  }
});

Sin embargo, el contenido que se sirve en el subproceso principal siempre está atascado en una versión anterior de la página ("Mi versión es 1.0.0"), independientemente de si incremento la versión a 1.0.1 o 2.0.0.

Estoy un poco perplejo aquí. Esperaba encontrar una solución elegante semver-y para el control de versiones de ServiceWorker (de ahí mi uso de require(''./package.json'').version ), pero en mi implementación actual, el usuario está permanentemente atascado en una versión antigua de página, a menos que se actualicen o borren manualmente todos sus datos. : /

Answer 1

En Chrome Canary puede hacer todo tipo de perfiles y administración de Service Worker como anular el registro, claro en la pestaña Aplicaciones:

Combina eso con chrome: // devices / para depurar con tu dispositivo físico.

Answer 2

Encontró el problema: debe evitar los encabezados de caché en el propio archivo JS de ServiceWorker. La configuración de la memoria caché en max-age=0 resolvió inmediatamente el problema: https://github.com/nolanlawson/serviceworker-update-demo/pull/1

Saludos a Jake Archibald por aclararme: https://twitter.com/jaffathecake/status/689214019308224513

Answer 3

Externo: detener y anular el registro de un trabajador del servicio usando chrome: // serviceworker-internals /

Interno del propio trabajador de servicios: https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim y https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting