如何卸载 Service Worker？

Question

从我的根目录中删除 /serviceworker.js 后，Chrome 仍然运行我从我的 webroot 中删除的 service worker。如何从我的网站卸载 Service Worker 并 Chrome 以便我可以重新登录我的网站？

我已经将问题追溯到 Service Work 的缓存机制，我现在只想删除它，直到我有时间调试它。我正在使用的登录脚本重定向到 Google 的服务器，以便他们登录到他们的 Google 帐户。但我从 login.php 页面得到的只是一条 ERR_FAILED 消息。

Answer 1

以编程方式删除 Service Worker

您可以像这样以编程方式删除服务工作者：

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

文档：getRegistrations, unregister

通过用户界面删除 Service Worker

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

Answer 2

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

Answer 3

在 Google Chrome 中，您可以转到 开发人员工具 (F12) -> 应用程序 -> Service worker 和注销该特定域列表中的服务工作者。

此方法在站点的开发模式下很有效，并且大多数情况下运行在 localhost 上，您可能需要其他项目的开发。

Answer 4

您可以通过 Chrome 开发人员工具 以及以编程方式。

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

chrome://serviceworker-internals/

在新选项卡中，然后select您要注销的 serviceworker。
打开开发人员工具 (F12) 和 Select 应用程序。然后

Select Clear Storage -> Unregister service worker

或

Select Service Workers -> Choose Update on Reload
程序化

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

Answer 5

您应该在您的设备中检测到两个 API：getRegistrations and getRegistration。 service-worker 在所有平台上都没有一组唯一的 API。例如，有些浏览器只有 navigator.serviceWorker.getRegistration，没有 navigator.serviceWorker.getRegistrations。所以你应该考虑两者。

Answer 6

仅供参考，如果您使用的是 MacOS Safari 浏览器，有一种方法可以强制注销服务工作者（Safari 12.1 的步骤和图片）：

Safari > 首选项...> 隐私 > 管理网站数据...
输入域名（例如'localhost'），点击"Remove"

注意：除了 service worker 之外，这还将清除该域的所有缓存、cookie 和数据库。

Answer 7

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

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

更多in this article（段落："Unregister a service worker"）

另一种可能性是通过浏览器访问 "Cache Storage" 部分并单击 "Clear Site Data" 按钮：

Answer 8

安全卸载 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();
        }
      });
    }

Answer 9

检测服务工作者：

navigator.serviceWorker.controller

用于删除 service worker 的代码：

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

Answer 10

此代码与 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 ';'”错误

Answer 11

其他回答都是在live网站添加代码去除service worker。然而，我不想永远留下那个实时代码运行ning，所以我开发了一个在 service worker 本身内部工作的解决方案。步骤如下，我在my blog.

上发布了更多细节和解释

删除注册service worker的代码。
用以下文件替换服务工作者脚本。新代码必须可从之前 service worker 所在的同一 URL 获得。如果你过去有多个 service worker URLs 你应该复制所有的代码。

console.log("Cleanup Service Worker Starting");

caches.keys()
    .then(keys =>
        Promise.all(
            keys.map(async key => console.log("caches.delete", key, await caches.delete(key)))))
    .then(async () => {
        console.log("registration.unregister", await registration.unregister());
    })
    .then(() => console.log("DONE"))
    .catch(console.error);

这段代码相当简单。首先它删除所有缓存，然后注销自己。

用户的浏览器将自动检查更新的 Service Worker the next time they load your website, or the next event 24h after the last service worker check。这意味着现有用户将在下次访问时运行此清理。

Answer 12

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

Answer 13

打开此页面：chrome://serviceworker-internals 并单击注销按钮。

如果您想注销所有服务工作者，请打开 开发人员工具 和运行上面页面中的代码。

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

Answer 14

如果您的服务人员不允许您更新文件。您需要将 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))
    });
});

Source here

Answer 15

在 Chrome

中打开

chrome://serviceworker-internals/?devtools

然后在控制台中按 F12

$$('.unregister').forEach(b => b.click())

Answer 16

至于我，我只是用一个新的不存在的范围服务工作者来替换旧的，

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

Answer 17

如果您想注销浏览器中所有已注册的服务工作者，你可以打开 ex.

Chrome: chrome://serviceworker-internals/
勇敢brave://serviceworker-internals/

打开 DevTools > 控制台并粘贴：

$$('.unregister').forEach(b => b.click())

如何卸载 Service Worker？

How do I uninstall a Service Worker?

html

google-chrome

service-worker

以编程方式删除 Service Worker

通过用户界面删除 Service Worker