iOS端PWA处于前台时仍显示推送通知的问题求助

问题根源 #

iOS上的PWA在Service Worker中调用clients.matchAll()时，默认不会包含当前处于前台的PWA客户端（即使它在Service Worker作用域内），同时visibilityState的判断逻辑在iOS上存在兼容性差异，导致原本的检查逻辑失效。

修复步骤 #

1. 在clients.matchAll中添加includeUncontrolled: true
   iOS会将前台运行的PWA标记为非受控客户端，必须显式添加该参数才能获取到这些客户端实例。

2. 同时检查visibilityState和focused属性
   部分iOS版本中，前台PWA的visibilityState可能不会正确返回visible，但focused属性会准确标记当前窗口是否处于前台焦点状态。

3. 修复代码中的变量未定义问题
   原代码中直接使用notification变量，但未从推送事件数据中解析，这会导致运行报错，需先解析event.data.json()获取通知内容。

修改后的完整代码 #

self.addEventListener('push', (event) => {
  event.waitUntil(
    // 添加includeUncontrolled: true，确保获取所有窗口客户端
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then(async (clients) => {
      const notificationData = event.data?.json() || {};
      console.log('Push event received', notificationData);

      let hasVisibleClient = false;
      for (const client of clients) {
        // 同时检查visibilityState和focused，兼容iOS的判断逻辑
        if (client.visibilityState === 'visible' || client.focused) {
          hasVisibleClient = true;
          break;
        }
      }

      // 如果有可见/焦点客户端，不显示通知
      if (hasVisibleClient) return;

      // 准备通知数据
      const data = notificationData.data || {};
      data.click_action = notificationData.click_action;
      
      return self.registration.showNotification(`${notificationData.title} test`, {
        body: notificationData.body,
        icon: notificationData.icon,
        badge: notificationData.badge,
        data: data,
        requireInteraction: true,
        actions: notificationData.actions,
        image: notificationData.image,
        click_action: notificationData.click_action
      });
    })
  );
});

async function checkClientIsVisible() {
  const windowClients = await clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  });

  for (const client of windowClients) {
    if (client.visibilityState === 'visible' || client.focused) {
      return true;
    }
  }
  return false;
}

额外说明 #

• iOS的PWA Service Worker在后台存活时间有限，若PWA被系统回收，Service Worker会被终止，此时推送通知会直接由系统展示，这是正常行为。
• 测试时需确保PWA已添加到主屏幕，并且开启了推送通知权限，同时使用HTTPS环境（iOS要求PWA必须在HTTPS下运行）。

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