如何在Chrome中处理pushsubscriptionchange事件更新推送订阅

截至目前，Chrome浏览器不会监听pushsubscriptionchange事件，因此基于该事件编写的标准Web推送订阅更新代码，在Chrome环境下无法正常生效。

支持pushsubscriptionchange事件的浏览器，可在Service Worker中使用如下代码实现订阅自动更新：

self.addEventListener('pushsubscriptionchange', function(event) {
  event.waitUntil(
    fetch('/pushsubscriptionchange', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        old_endpoint: event.oldSubscription ? event.oldSubscription.endpoint : null,
        new_endpoint: event.newSubscription ? event.newSubscription.endpoint : null,
        new_p256dh: event.newSubscription ? event.newSubscription.toJSON().keys.p256dh : null,
        new_auth: event.newSubscription ? event.newSubscription.toJSON().keys.auth : null
      })
    })
  );
});

这段代码的运行逻辑很直接：当浏览器检测到推送订阅发生变更时，Service Worker会自动把旧订阅的失效端点、新订阅的推送端点和加密密钥上报给服务端，替换掉旧的订阅记录，避免后续推送消息无法送达。

Chrome环境下需要做额外兼容处理：

• 因为事件监听机制不生效，没法依赖自动触发完成订阅更新
• 可以在用户每次访问站点页面时，主动获取当前浏览器生效的推送订阅信息
• 把拿到的订阅信息和服务端存储的对应用户订阅记录做比对，如果端点或密钥存在差异，主动调用更新接口替换服务端的旧记录即可

该功能缺失的修复进度，可以在Chromium官方问题追踪平台查询编号753163的工单跟进。

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