如何为现有Web Push订阅用户更新Service Worker？

问题背景 #

我开发了一个基于Web Push和Notification API的Web应用，用FCM发送消息，通过JS编写的Service Worker接收消息并展示通知。最近更新了Service Worker文件（新增图片+图标支持，之前只展示图标），但变更没生效。我知道Service Worker要么24小时自动更新，要么关闭最后一个使用它的页面时更新，想确认这个机制是针对单个用户还是所有订阅用户？现在已经超过24小时，1000多名订阅用户还是看不到带图标+图片的通知，请问怎么“强制”他们更新Service Worker？能不能远程操作，还是必须用户重新访问网站？我了解过.update()和.skipWaiting()方法，但不知道怎么应用在现有订阅用户身上。

当前使用的firebase-messaging-sw.js代码：

self.addEventListener("push", (event) => {
    const notif = event.data.json().notification;
    event.waitUntil(self.registration.showNotification(notif.title, {
        body: notif.body,
        icon: notif.data.icon,
        image: notif.image,
        data: {
            url: notif.click_action
        }
    }));
});

self.addEventListener("notificationclick", (event) => {
    const clickedNotification = event.notification;
    clickedNotification.close();
    event.WaitUntil(clients.openWindow(event.notification.data.url));
});

问题解答 #

1. Service Worker更新机制的适用范围 #

Service Worker的更新逻辑是针对单个用户的浏览器实例，不是全局所有用户。每个用户的浏览器会独立检查Service Worker的更新，24小时的自动更新计时器也是每个用户本地单独计算的。

2. 超过24小时未更新的可能原因 #

• 浏览器的Service Worker更新检查可能因缓存策略、网络环境延迟触发；
• 用户的浏览器始终保持着你的网站页面（比如后台标签页），没有关闭最后一个关联页面，导致旧的Service Worker一直处于激活状态，无法被替换。

3. 强制用户更新Service Worker的可行方案 #

目前没有完全远程的强制更新手段，必须依赖用户与网站的交互，结合以下方法实现：

（1）在主页面脚本中主动触发更新检查

在用户访问网站时，主页面的JS代码里调用注册方法后，主动触发更新检查：

// 主页面的JS代码
navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then(registration => {
    // 主动检查Service Worker更新
    registration.update().then(() => {
      console.log('已触发Service Worker更新检查');
    });
  });

这样用户每次访问网站时，浏览器都会立即检查Service Worker的新版本，无需等待24小时的自动检查。

（2）在Service Worker中添加skipWaiting()

修改你的firebase-messaging-sw.js，新增install事件监听，调用skipWaiting()让新版本Service Worker立即激活，无需等待旧版本的所有客户端关闭。同时注意修正原代码中event.WaitUntil的大小写错误（大写W会导致报错）：

// 新增install事件，跳过等待直接激活新版本
self.addEventListener('install', (event) => {
  self.skipWaiting();
});

// 原有的push事件监听
self.addEventListener("push", (event) => {
    const notif = event.data.json().notification;
    event.waitUntil(self.registration.showNotification(notif.title, {
        body: notif.body,
        icon: notif.data.icon,
        image: notif.image,
        data: {
            url: notif.click_action
        }
    }));
});

// 修正后的notificationclick事件监听
self.addEventListener("notificationclick", (event) => {
    const clickedNotification = event.notification;
    clickedNotification.close();
    event.waitUntil(clients.openWindow(event.notification.data.url));
});

（3）引导用户重新访问网站

可以通过FCM发送一条通知，告知用户需要访问网站以获取通知功能的更新，引导他们打开你的网站页面——只要用户访问，主页面的更新检查代码就会触发，新版本Service Worker就会被安装并激活。

4. 关键注意事项 #

• 无法完全远程强制更新：Service Worker的生命周期完全由用户浏览器控制，必须用户触发网站访问或交互，才能触发更新流程；
• skipWaiting()的作用是让新版本Service Worker在安装完成后立即激活，但前提是浏览器已经下载了新版本的Service Worker（这需要用户访问网站触发更新检查）；
• 确保Service Worker文件的缓存策略正确：服务器不要对firebase-messaging-sw.js设置过长的缓存时间，建议设置Cache-Control为no-cache或max-age=0，强制浏览器每次都检查最新版本。

内容的提问来源于stack exchange，提问作者depi