¿Cómo desinstalo un Service Worker?

161

Después de eliminar /serviceworker.jsde mi directorio raíz, Chrome aún ejecuta el trabajador de servicio que eliminé de mi raíz web. ¿Cómo desinstalo el trabajador de servicio de mi sitio web y Chrome para poder volver a iniciar sesión en mi sitio web?

He rastreado el problema hasta el mecanismo de caché de Service Work y solo quiero eliminarlo por ahora hasta que tenga tiempo de depurarlo. El script de inicio de sesión que estoy usando redirige a los servidores de Google para que puedan iniciar sesión en su cuenta de Google. Pero todo lo que obtengo de la página login.php es un ERR_FAILEDmensaje.

Mark Tomlin
fuente
2
Tengo el mismo problema en Firefox.
Costa

Respuestas:

309

Retirar a los trabajadores del servicio mediante programación

Puede eliminar trabajadores del servicio mediante programación de esta manera:

navigator.serviceWorker.getRegistrations().then(function(registrations) {
 for(let registration of registrations) {
  registration.unregister()
} })

Documentos: getRegistrations , cancelar registro

Eliminación de trabajadores del servicio a través de la interfaz de usuario

También puede eliminar trabajadores del servicio en la pestaña Aplicación en Chrome Devtools.

Daniel Herr
fuente
2
Tuve que agregar "uso estricto"; antes de este código para que funcione.
codeKonami
8
¿Hay algún momento basado en esto alrededor? Digamos que un usuario visitó una vez, registró al trabajador y no ha regresado desde entonces, ¿necesito mantener este fragmento en nuestra base de código para siempre por si acaso?
loganfsmyth
10
Tengo una publicación de blog que revisa esta y otras opciones de eliminación / desinstalación de trabajadores de servicios love2dev.com/blog/how-to-uninstall-a-service-worker
Chris Love
3
¿Cómo ayudaría eso? El trabajador instalado ya ha almacenado la página en caché y los usuarios nunca recuperarán su nuevo script.
riv
107

También puede ir a la URL: chrome: // serviceworker-internals / y cancelar el registro de un serviceworker desde allí.

k00k
fuente
9
Puede escribir esto en la consola de desarrollo para anular el registro de todos ellos de una sola vez. document.querySelectorAll(".unregister").forEach(item=>item.click())
senbon
Sin embargo, si tiene otros visitantes que también debe anular (amigos, usuarios, gerentes de proyecto, etc.), la respuesta anterior (por Daniel Herr) es una solución más efectiva. También tienes Firefox, Edge y Safari, también, en versiones de iOS, Android, macOS, Windows 10 para cada prueba.
Steven Ventimiglia
$$ ('. unregister'). forEach (item => item.click ())
Travnikov.dev
37

Puede hacerlo a través de la Herramienta para desarrolladores de Chrome , así como Programatic .

  1. Encuentre todas las instancias en ejecución o trabajadores de servicio escribiendo

    chrome: // serviceworker-internals /

    en una pestaña nueva y luego seleccione el trabajador de servicio que desea anular.

  2. Abra Herramientas de desarrollo (F12) y seleccione Aplicación. Entonces tambien

    Seleccione Borrar almacenamiento -> Anular registro de trabajador de servicio

    o

    Seleccione Service Workers -> Choose Update on Reload

  3. Programáticamente

if(window.navigator && navigator.serviceWorker) {
  navigator.serviceWorker.getRegistrations()
  .then(function(registrations) {
    for(let registration of registrations) {
      registration.unregister();
    }
  });
}

Sakshi Nagpal
fuente
22

En Google Chrome, puede ir a Herramientas para desarrolladores (F12) -> Aplicación -> Trabajador de servicio y anular el registro de los trabajadores de servicio de la lista para ese dominio específico.

Captura de pantalla

Este método es efectivo en el modo de desarrollo de un sitio y, en su mayoría, se ejecuta en el localhostque puede necesitar para el desarrollo de otro proyecto.

Asim KT
fuente
5

Debe detectar dos API en sus dispositivos: getRegistrations y getRegistration . El trabajador de servicio no tiene un conjunto único de API en todas las plataformas. Por ejemplo, algunos navegadores solo tienen un navigator.serviceWorker.getRegistration, no navigator.serviceWorker.getRegistrations. Entonces deberías considerar con ambos.

GuoX
fuente
3

Para su información, en caso de que esté utilizando el navegador Safari de MacOS , hay una forma de cancelar el registro de un trabajador de servicio (pasos e imágenes para Safari 12.1):

  1. Safari> Preferencias ...> Privacidad> Administrar datos del sitio web ... Preferencias de Safari: Privacidad

  2. Ingrese el nombre de dominio (ej. 'Localhost'), haga clic en "Eliminar" Preferencias de Safari: Privacidad: administrar datos del sitio web

Nota: Además de los trabajadores del servicio, esto también borrará todas las cachés, cookies y bases de datos para este dominio.

Terrymorse
fuente
Parece que esto no funciona si los trabajadores del servicio se instalaron a través de una ventana privada.
Aris
3

Además de las respuestas ya correctas dadas, si también desea eliminar la caché de SW, puede invocar el siguiente método:

if ('caches' in window) {
    caches.keys()
      .then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
              return caches.delete(key);
          }));
      })
}


Más en este artículo (Párrafo: "Dar de baja un trabajador de servicio")


Otra posibilidad, a través del navegador, es acceder a la sección "Almacenamiento en caché" y hacer clic en el botón "Borrar datos del sitio":

ingrese la descripción de la imagen aquí

Francesco
fuente
0

desinstalar de forma segura Service Worker

if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function (registrations) {
        for (const registration of registrations) {
          // unregister service worker
          console.log('serviceWorker unregistered');
          registration.unregister();
        }
      });
    }
Pankaj Rupapara
fuente
0

para detectar trabajador de servicio:

navigator.serviceWorker.controller

Código para la eliminación del trabajador de servicio:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister();
    })
  });

  navigator.serviceWorker.getRegistrations().then(function(registrations) {
   for(let registration of registrations) {
    registration.unregister()
  } })

  if(window.navigator && navigator.serviceWorker) {
    navigator.serviceWorker.getRegistrations()
    .then(function(registrations) {
      for(let registration of registrations) {
        registration.unregister();
      }
    });
  }

  if ('caches' in window) {
      caches.keys()
        .then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                return caches.delete(key);
            }));
        })
  }

  if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
          for (const registration of registrations) {
            // unregister service worker
            console.log('serviceWorker unregistered');
            registration.unregister();

            setTimeout(function(){
              console.log('trying redirect do');
              window.location.replace(window.location.href); // because without redirecting, first time on page load: still service worker will be available
            }, 3000);
          }
        });
      }
Vital
fuente