Comment désinstaller un Service Worker?

161

Après la suppression /serviceworker.jsde mon répertoire racine, Chrome exécute toujours le service worker que j'ai supprimé de ma racine Web. Comment désinstaller le technicien de service de mon site Web et de Chrome pour pouvoir me reconnecter à mon site Web?

J'ai suivi le problème jusqu'au mécanisme de cache de Service Work et je veux simplement le supprimer pour l'instant jusqu'à ce que j'aie le temps de le déboguer. Le script de connexion que j'utilise redirige vers les serveurs de Google pour qu'ils se connectent à leur compte Google. Mais tout ce que je reçois de la page login.php, c'est un ERR_FAILEDmessage.

Mark Tomlin
la source
2
J'ai le même problème dans Firefox.
Costa

Réponses:

309

Suppression des techniciens de service par programme

Vous pouvez supprimer les techniciens de service par programme comme ceci:

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

Docs: getRegistrations , désinscription

Suppression des techniciens de service via l'interface utilisateur

Vous pouvez également supprimer des techniciens de service sous l'onglet Application dans Chrome Devtools.

Daniel Herr
la source
2
J'ai dû ajouter "use strict"; avant ce code pour le faire fonctionner.
codeKonami le
8
Y a-t-il un moment basé sur le temps? Disons qu'un utilisateur a visité une fois, a enregistré le collaborateur et n'est pas revenu depuis, dois-je conserver cet extrait de code dans notre base de code pour toujours au cas où?
loganfsmyth
3
Version verbeuse
mrienstra
10
J'ai un article de blog examinant ceci et d'autres options de suppression / désinstallation de service worker love2dev.com/blog/how-to-uninstall-a-service-worker
Chris Love
3
Comment cela aiderait-il? La page est déjà mise en cache par le worker installé et votre nouveau script ne sera jamais récupéré par les utilisateurs.
riv
107

Vous pouvez également accéder à l'URL: chrome: // serviceworker-internals / et désinscrire un serviceworker à partir de là.

k00k
la source
9
Vous pouvez taper ceci dans la console de développement pour les désinscrire tous d'un seul coup. document.querySelectorAll(".unregister").forEach(item=>item.click())
senbon
Cependant, si vous avez d'autres visiteurs dont vous devez également vous désinscrire (amis, utilisateurs, chefs de projet, etc.), la réponse ci-dessus (par Daniel Herr) est plus une solution efficace. Vous avez également Firefox, Edge et Safari, dans les versions iOS, Android, macOS, Windows 10 pour chacun à tester.
Steven Ventimiglia
$$ ('. unregister'). forEach (item => item.click ())
Travnikov.dev
37

Vous pouvez le faire grâce à Chrome Developer outil ainsi que Programatically .

  1. Trouvez toutes les instances en cours d'exécution ou les techniciens de service en tapant

    chrome: // serviceworker-internals /

    dans un nouvel onglet, puis sélectionnez le technicien de service que vous souhaitez désinscrire.

  2. Ouvrez les outils de développement (F12) et sélectionnez l'application. Puis l'un ou l'autre

    Sélectionnez Effacer le stockage -> Désinscrire le technicien de service

    ou

    Sélectionnez Service Workers -> Choisissez la mise à jour lors du rechargement

  3. Par programme

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

Sakshi Nagpal
la source
22

Dans Google Chrome, vous pouvez accéder aux outils de développement (F12) -> Application -> Service worker et désinscrire les techniciens de service de la liste de ce domaine spécifique.

Capture d'écran

Cette méthode est efficace en mode de développement d'un site et la plupart du temps, ils s'exécutent sur localhostlesquels vous pourriez avoir besoin pour le développement d'un autre projet.

Asim KT
la source
5

Vous devez détecter deux API dans vos appareils: getRegistrations et getRegistration . Le technicien de service n'a pas un ensemble unique d'API sur toutes les plates-formes. Par exemple, certains navigateurs n'ont qu'un navigator.serviceWorker.getRegistration, non navigator.serviceWorker.getRegistrations. Vous devriez donc envisager les deux.

GuoX
la source
3

Pour info, si vous utilisez le navigateur MacOS Safari , il existe un moyen de désinscrire de force un technicien de service (étapes et images pour Safari 12.1):

  1. Safari> Préférences ...> Confidentialité> Gérer les données du site Web… Préférences Safari: Confidentialité

  2. Entrez le nom de domaine (ex. 'Localhost'), cliquez sur "Supprimer" Préférences Safari: Confidentialité: gérer les données du site Web

Remarque: en plus des techniciens de service, cela effacera également tous les caches, cookies et bases de données de ce domaine.

terrymorse
la source
Il semble que cela ne fonctionne pas si les techniciens de service ont été installés via une fenêtre privée.
aris
3

En plus des réponses déjà correctes données, si vous souhaitez également supprimer le cache SW, vous pouvez invoquer la méthode suivante:

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


Plus d'informations dans cet article (Paragraphe: «Désinscrire un technicien de service»)


Une autre possibilité, via le navigateur, est d'accéder à la section "Stockage du cache" et de cliquer sur le bouton "Effacer les données du site":

entrez la description de l'image ici

Francesco
la source
0

désinstaller en toute sécurité 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
la source
0

pour détecter le technicien de service:

navigator.serviceWorker.controller

Code à pour la suppression du technicien de service:

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
la source