在angular 6网站中删除PWA后，如何从客户端浏览器中删除PWA service worker及其缓存

Question

我已经在我的网站上添加了PWA功能和服务人员。在发布到live server之后，许多用户开始遇到问题，例如：“无法访问此站点”，但当用户单击CTRL F5时，它就可以正常工作。

为了立即解决问题，我已将PWA和服务人员从我的释放中移除。然而，许多用户都面临着同样的问题，或者服务人员出现了“未找到索引页”错误。

如何从最终用户的浏览器中删除或注销旧的服务工作人员？

我尝试使用以下代码删除service worker缓存：

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

要删除服务人员，我添加了以下内容：

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

Answer 1

浏览器将在服务辅助进程的生存期后禁用该服务辅助进程。

我曾经面对过这个问题，真的很痛苦。

黑客：在你的应用程序中。组成部分ts在ngAfterViewInit（）内使用以下行；

ngAfterViewInit() {
   window.location.reload(); 
}

这是一个肮脏的黑客，不是一个糟糕的做法，让这段代码持续几天，直到你知道你的用户拥有你的角应用的最新版本。

之后，如果您希望对PWA使用Service-Worker，请使用以下代码自动更新您的客户端。

在构造函数中注入private swUpdate:swUpdate，private snackbar:matsnakbar，并在其中编写以下代码。

this.swUpdate.available.subscribe(evt => {
        let snack = this.snackbar.open('Update Available', 'Reload Please.');

        snack.onAction().subscribe(() => {
            window.location.reload();
        });

        setTimeout(() => {
            snack.dismiss();
        }, 10000);
    });

如果你仍然面临任何问题，让我知道这可能是一个有趣的问题来解决。

Answer 2

您使用的代码正确，可以注销service worker并从客户端删除其缓存。

您的软件是否正在处理任何长期任务？因为如果是这样，它将在被删除之前等待完成该任务。

在最坏的情况下，您的服务人员将在24小时内检查是否有更新的版本可用。此功能称为故障保护，将由浏览器触发。

您的代码已经很好了，但是如果您想了解更多关于服务工作者和缓存策略的信息，我写了一篇关于它们的文章。