如何阻止旧的 service worker？

8 个月前提问

6 个月前修改

浏览次数105次

2个答案

在实际应用开发中，确保service worker的正确更新和替换是非常重要的。当我们需要阻止一个旧的service worker时，通常是因为我们已经有了一个更新版本的service worker，或者现有的service worker存在一些问题。以下是一些步骤和技术可以用来阻止一个旧的service worker：

1. 更新 Service Worker 文件

首先，确保你的service worker文件 (service-worker.js 或其他命名的文件) 已经被更新。在文件中，你可以修改service worker的版本号或者直接修改service worker的代码逻辑。

2. 触发 Service Worker 更新

浏览器在访问托管service worker的站点时，会对比已保存的service worker文件和服务器上的文件。如果文件有所不同，浏览器会认为service worker已经更新，并开启更新过程。这个过程包括以下几个步骤：

安装阶段：新的service worker会开始安装。在这个阶段，你可以编写代码来处理缓存更新等逻辑。
激活阶段：新的service worker激活后，会取代旧的service worker。在这个阶段，可以实现旧缓存的清理等操作。

3. 自动化更新触发

如果希望用户无需手动刷新页面就更新service worker，可以在service worker代码中使用 self.skipWaiting() 来强制当前处于等待状态的service worker立即激活和取代旧的service worker。

javascript
self.addEventListener('install', function(event) {
    event.waitUntil(
        self.skipWaiting() // 强制等待中的Service Worker立即激活
    );
});

4. 清理旧缓存

在新的service worker激活时，确保清除由旧service worker创建的所有缓存。这可以通过在激活事件中删除不再需要的缓存实现：

javascript
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(cacheName => {
          return cacheName !== expectedCacheName;
        }).map(cacheName => {
          return caches.delete(cacheName);
        })
      );
    }).then(() => self.clients.claim())
  );
});

5. 通知用户

在某些情况下，更新service worker可能会对应用的功能产生较大影响。这时，可以考虑在页面上添加通知逻辑，告知用户有新的更新，并提供刷新页面的选项。

javascript
navigator.serviceWorker.addEventListener('controllerchange', () => {
  // 显示通知逻辑
  console.log('Service Worker 已更新。请刷新页面以应用更新。');
});

通过上述步骤，可以有效地阻止并替换旧的service worker，确保用户总是使用最新的代码和功能。在开发中，也应该注意测试service worker的更新过程，确保新的service worker能够正确地替换旧的service worker，并且应用功能正常运行。

2024年6月29日 12:07 回复

阻止旧的service worker通常涉及以下几个步骤：

注销旧的Service Worker：

您可以通过调用 ServiceWorkerRegistration.unregister()方法来注销service worker。例如，在您的网站上运行以下代码可以注销当前注册的service worker：
```
javascript
navigator.serviceWorker.getRegistrations().then(function(registrations) {
  for(let registration of registrations) {
    registration.unregister();
  } 
});
```
这段代码遍历当前所有注册的service workers，并逐个注销它们。注销后，旧的service worker将不再控制任何页面，新的service worker可以取而代之。
更新Service Worker脚本：

在service worker的代码中，如果您作出任何更新，即使是一个小改动，浏览器都会视其为一个新的service worker。这是因为service worker的更新机制是基于字节对比的。一旦发现文件有所变化，浏览器就会开始安装新的service worker。

当新的service worker开始安装时，它将进入 install状态。安装完毕后，如果有旧的service worker正在运行，新的service worker将进入 waiting状态。
激活新的Service Worker：

要激活新的service worker，您可以自动让它在旧的service worker不再控制任何页面时接管，或者强制当前页面关闭后，下次访问时使用新的service worker。您也可以在新的service worker安装后编程激活它：
```
javascript
self.addEventListener('install', function(event) {
  // 强制立即接管控制
  self.skipWaiting();
});

self.addEventListener('activate', function(event) {
  // 清理旧资源，确保新的Service Worker被激活
  event.waitUntil(
    clients.claim()
    .then(function() {
      // 告知客户端更新完毕
    })
  );
});
```
使用 skipWaiting()可以使新service worker跳过等待状态直接进入activate状态。而 clients.claim()则可以让新的service worker立即控制所有客户端。

举个例子，如果我之前在一个项目中使用了一个service worker来缓存资源，并且我现在需要更新缓存策略。我首先会更新service worker的代码，比如修改缓存列表或者缓存逻辑，然后部署这个变更。这样，当用户再次访问网站时，浏览器会发现service worker有更新，进而安装新的service worker。在新的service worker的 install事件中，我会调用 skipWaiting()来确保它能立即激活。在 activate事件中，我会清理旧的缓存，并使用 clients.claim()来让这个service worker控制所有页面，确保所有用户都使用的是最新的service worker版本。

这种更新策略可以确保用户能够尽快接收到新的更新，同时也保证了网站的功能正常运行。