在 Angular 6 网站中删除 PWA 后如何从客户端浏览器中删除 PWA 服务工作者及其缓存

Question

我已将 PWA 功能和服务工作者添加到我的 Angular 网站。发布到实时服务器后，许多用户开始遇到问题，例如：“无法访问此站点”，但是当用户单击 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

您使用的代码是正确的，可以取消注册 Service Worker 并从客户端删除其缓存。

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

在最坏的情况下，您的 Service Worker 将在 24 小时内检查是否有更新的版本可用。此功能称为故障安全，将由浏览器触发。

你的代码已经不错了，但是如果你想了解更多关于Service Workers and caching strategies的信息，我写了一篇关于它们的文章。

Answer 2

浏览器将在其生命周期后禁用服务工作者。

我曾经遇到过这个问题，真的很痛苦。

Hack：在您的 app.component.ts 中使用以下行 ngAfterViewInit();

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

这是一个肮脏的 hack，不是一个坏习惯，让这段代码保持几天，直到你知道你的用户拥有你的 angular-app 的最新版本。

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

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

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

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

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

如果您仍然遇到任何问题，请告诉我，这可能是一个有趣的问题需要解决。