撤消 PWA - Javascript

在开发 Progressive Web Apps(PWA)时，可能需要撤消一些已经安装的服务工作(Service Worker)或缓存的文件，以重新编写它们或者退出这个应用。

撤消 Service Worker

如果你想要撤消已经安装的服务工作，可以通过以下步骤：

1. 在项目根目录下创建一个空白的 sw.js 文件，用于覆盖之前的服务工作。
2. 在 index.html 中添加以下代码，用于注销当前的服务工作：

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

这样，当用户打开这个应用时，之前的服务工作将会被注销并覆盖为一个空白的服务工作，以后再进行更改和重新安装。

撤消缓存文件

如果你想要撤消之前缓存的文件，可以通过以下步骤：

1. 在 sw.js 中添加一个 event listener，用于拦截 fetch 请求，在缓存中查找并返回已缓存的文件，如果没有被缓存过，则发送原始请求并更新缓存。删除缓存一般是直接删除对应的 key 值即可。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request).then(function(response) {
        return caches.open('my-cache').then(function(cache) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

// 删除缓存文件
caches.delete('my-cache').then(function(boolean) {
  console.log(boolean);
});

2. 在浏览器控制台输入以下代码，手动删除缓存：

caches.keys().then(function(keys) {
  keys.forEach(function(key) {
    caches.delete(key);
  })
});

以上步骤可以轻松地删除自己存储的所有缓存文件，并重新进行更新和管理。

总结：

撤消 PWA 主要是通过撤消服务工作或缓存文件来实现，同时通过一些特定的操作和删除命令来操作，开发者根据项目实际情况进行使用。