Html 如何卸载服务工作者？

从我的根目录中删除

/serviceworker.js

后，Chrome仍然运行我从webroot中删除的服务工作者。如何从我的网站和Chrome中卸载服务人员，以便我可以重新登录到我的网站

我已经跟踪到了服务工作的缓存机制，我现在只想删除它，直到我有时间调试它。我使用的登录脚本重定向到谷歌服务器，让他们登录到谷歌帐户。但是我从login.php页面得到的只是一条

ERR\u FAILED

消息

以编程方式删除服务工作人员 您可以通过以下方式以编程方式删除服务工作人员：

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

文件：

通过用户界面删除服务工作人员

---

您还可以在Chrome Devtools的“应用程序”选项卡下删除服务人员。

您还可以转到URL:chrome://serviceworker-internals/并从那里注销serviceworker。

在Google Chrome中，您可以转到开发者工具（F12）->Application->Service worker和从特定域的列表中注销服务工作者

---

这种方法在站点的开发模式下是有效的，它们大多运行在

localhost

上，这是您在其他项目开发中可能需要的。

您可以通过Chrome Developer Tool以及编程方式来实现这一点

通过键入查找所有正在运行的实例或服务工作者

chrome://serviceworker-internals/

在新选项卡中，然后选择要注销的serviceworker

打开开发者工具（F12）并选择应用程序。那么

选择清除存储->注销服务人员

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

或

选择服务人员->选择重新加载时更新

程序化

if（window.navigator&&navigator.serviceWorker）{
navigator.serviceWorker.getRegistrations（）
.然后（功能（注册）{
用于（注册登记）{
注册。取消注册（）；
}
});
}

您应该在设备中检测到两个API：和。服务工作者并非在所有平台中都有一组唯一的API。例如，某些浏览器只有

navigator.serviceWorker.getRegistration

，没有

navigator.serviceWorker.getRegistrations

。因此，你应该同时考虑这两个问题。

FYI，如果你使用MaOS:Sturial> Safari <强>浏览器，有一种方法可以强制注销服务工作者（Safari 12.1的步骤和图像）：

Safari>首选项…>隐私>管理网站数据…

输入域名（例如“localhost”），单击“删除”

---

注意：除服务人员外，这还将删除此域的所有缓存、cookie和数据库。

除了已给出的正确答案外，如果还想删除软件缓存，可以调用以下方法：

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();
        }
      });
    }

---

要检测服务人员，请执行以下操作：

navigator.serviceWorker.controller

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);
          }
        });
      }

用于删除服务人员的代码：

navigator.serviceWorker.controller

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);
          }
        });
      }

---

此代码与Internet Explorer兼容：

if (navigator.serviceWorker) {
    navigator.serviceWorker.getRegistrations().then(                
        function(registrations) {
            for (let idx in registrations) {
                registrations[idx].unregister()
            }
        })
}

---

IE不支持“for…of”和“for…of”构造可能导致“'SCRIPT1004:Expected'；”错误

其他答案都会向live网站添加代码以删除服务人员。然而，我不想让实时代码永远运行下去，所以我开发了一个解决方案，该解决方案可以在服务工作者内部工作。步骤如下，我在上面发布了更多细节和解释

删除注册服务工作人员的代码

将service worker脚本替换为以下文件。新代码必须与前一个服务人员所在的URL相同。如果您过去有多个service worker URL，那么应该在所有URL上复制代码

console.log（“清理服务工作人员启动”）；
caches.keys（）
。然后（键=>
我保证(
map（async key=>console.log（“caches.delete”，key，wait caches.delete（key‘‘）’））
。然后（异步（）=>{
log（“registration.unregister”，等待registration.unregister（））；
})
。然后（（）=>console.log（“完成”））
.catch（控制台错误）；

这段代码相当直截了当。首先，它删除所有缓存，然后注销自身

---

用户的浏览器将自动检查更新的服务人员。这意味着现有用户将在下次访问时运行此清理。

也可以通过应用程序选项卡在Chrome中完成：

---

打开此页面：chrome://serviceworker-internals然后单击取消注册按钮

如果要注销所有服务人员，请打开开发者工具，并在上面的页面上运行此代码

document.querySelectorAll("button.unregister").forEach(item=>{ item.click()})

---

如果您的服务人员不允许您更新文件。您需要将serviceworker文件（sw.js/serviceworker.js）替换为下一个代码：

self.addEventListener('install', function(e) {
  self.skipWaiting();
});

self.addEventListener('activate', function(e) {
  self.registration.unregister()
    .then(function() {
      return self.clients.matchAll();
    })
    .then(function(clients) {
      clients.forEach(client => client.navigate(client.url))
    });
});

用铬合金打开

chrome://serviceworker-internals/?devtools

然后是控制台中的F12

---

$$（'.unregister'）.forEach（b=>b.click（））

至于我，我只是使用一个新的不存在的作用域服务工作程序来替换旧的

ServiceWorker: {
        events: true,
        // what range of URLs a service worker can control. Use a nonexistent path to disable ServiceWorker
        scope: '/disable-service-worker/',
      },

至于app.js，我添加了以下代码来注销旧软件：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then(registrations => {
    for (const registration of registrations) {
      // keep only serviceWorker which scope is /disable-service-worker/, The purpose is to make serviceWorker useless
      if (registration.scope.includes('/disable-service-worker/') === false) {
        registration.unregister()
      }
    }
  });
  // clear cache of service worker
  caches.keys().then(keyList => {
    return Promise.all(
      keyList.map(key => {
        return caches.delete(key);
      }),
    );
  });
}

---

我不得不加上“严格使用”；在这段代码生效之前。是否有任何时间基于此？假设一个用户访问过一次，注册了该工作人员，之后就再也没有回来过，我是否需要将此代码段永久保存在我们的代码库中以防万一？详细版本：我有一篇博客文章回顾了此选项和其他服务工作人员删除/卸载选项，这有什么帮助？页面已经是c