iOS Safari中Web推送通知点击事件的处理方案求助

核心可行方案：利用Service Worker的notificationclick事件 + Clients API #

iOS Safari虽不支持前端页面中Notification对象的click事件，但Service Worker环境下的notificationclick事件是完全兼容的，且可正常调用Clients API的openWindow()、focus()方法实现跳转。

实现步骤：

1. 在Service Worker脚本中监听notificationclick事件
2. 从通知的data字段中获取预定义的跳转URL
3. 使用Clients API处理页面跳转逻辑
4. （可选）关闭已点击的通知

代码示例：

// service-worker.js
self.addEventListener('notificationclick', (event) => {
  // 关闭当前通知
  event.notification.close();

  // 从通知数据中获取目标跳转URL（推送时需预先传入）
  const targetUrl = event.notification.data?.targetUrl || '/';

  // 等待跳转操作完成
  event.waitUntil(
    // 优先尝试打开/聚焦目标页面
    clients.openWindow(targetUrl)
      .then((client) => {
        if (client) {
          client.focus();
        }
      })
      .catch((err) => {
        // 处理打开失败的情况（如iOS隐私限制）
        console.error('Failed to open window:', err);
      })
  );
});

推送Payload配置（需包含跳转URL）：

推送通知时，要将跳转URL放在notification.data中，示例Payload：

{
  "notification": {
    "title": "新消息提醒",
    "body": "您有一条未读消息",
    "data": {
      "targetUrl": "/messages"
    }
  }
}

Hacky兼容方案（应对特殊iOS版本） #

如果上述方案在部分iOS版本中出现openWindow不生效的情况，可以尝试以下兜底逻辑：

// service-worker.js
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const targetUrl = event.notification.data?.targetUrl || '/';

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        // 查找已打开的窗口，优先导航或聚焦
        for (const client of clientList) {
          if (client.url.includes(targetUrl.split('?')[0]) && 'focus' in client) {
            return client.focus();
          }
          if ('navigate' in client) {
            return client.navigate(targetUrl);
          }
        }
        // 无匹配窗口则打开新窗口
        return clients.openWindow ? clients.openWindow(targetUrl) : Promise.resolve();
      })
  );
});

关键注意事项：

• 确保Service Worker已正确注册并处于激活状态
• 必须在HTTPS环境下运行（本地开发可使用localhost）
• iOS Safari要求用户手动授予推送权限，需提前引导用户授权

内容的提问来源于stack exchange，提问作者Stephan D.