PWA IOS 推送通知在应用程序处于前台时显示

Question

我有一个服务工作者，它有一个用于推送消息的事件侦听器。

这是代码

self.addEventListener('push', (event) => {
  event.waitUntil(clients.matchAll({ type: 'window' }).then((clients) => {
    console.log('Push event 3', event.data.json())
    for (let i = 0; i < clients.length; ++i) {
      if (clients[i].visibilityState === 'visible') return // there is a visible window
    }
    // continue with showing a notification
    const data = notification.data || {}
    data.click_action = notification.click_action
    return registration.showNotification(notification.title + " test ", {
      body: notification.body,
      icon: notification.icon,
      badge: notification.badge,
      data: data,
      requireInteraction: true,
      actions: notification.actions,
      image: notification.image,
      click_action: notification.click_action
    })
  }))
})

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

  for (var i = 0; i < windowClients.length; i++) {
    if (windowClients[i].visibilityState === 'visible') {
      return true
    }
  }

  return false
}

监听器函数检查在 sw 范围内是否有任何窗口/选项卡显示该网站。

它在桌面 PWA（Windows/Mac）和 Android PWA 上也能正常工作，但在 IOS 上，即使 PWA 窗口位于前台，推送通知也会显示，我想要的是，当 PWA 处于前台时，通知不会出现在前台，仅关闭/背景。

谢谢！

Answer 1

虽然推送通知对于吸引用户并让他们了解情况非常宝贵，但它们出现在 iOS 上的渐进式 Web 应用程序 (PWA) 的前台可能会引起人们的注意。与 Android 不同，iOS 目前仅支持在通知中心显示 PWA 的推送通知，无论应用程序的状态如何。这种行为虽然是为了保持一致性，但可能会显得具有侵入性并破坏用户体验。

了解原因：

Safari 限制：与其他浏览器不同，iOS 上的 Safari 目前缺乏对 PWA 中本地前台通知的 API 支持。这意味着开发人员无法在应用程序本身中利用其他选项，例如 toast 消息或横幅。 保持平台一致性：Apple 优先考虑跨平台的用户体验一致性。显示 PWA 的前台通知会偏离本机应用程序的行为，可能会造成混乱和不一致。 应对挑战：

虽然我们无法完全消除前台通知，但有一些创造性的方法可以最大限度地减少其影响并优化用户参与度：

内容定制：调整通知内容，使其与用户当前在 PWA 中的活动相关。这创造了一种连续性并减少了干扰。 深层链接：利用通知中的深层链接，用户点击后可以直接导航到应用程序中的特定部分。这增强了可操作性并减少了不必要的来回导航。 优先级：利用通知类别和优先级来区分关键警报和信息更新。这有助于用户优先考虑他们的响应并避免感到不知所措。 应用内消息传递：探索替代的应用内消息传递选项，例如横幅或叠加层，以适应需要立即引起用户注意的情况。 PWA 通知的未来：

iOS 上 PWA 中前台通知的限制正在被积极讨论和争论。为 PWA 引入本地通知 API 的多项提议正在开发者社区中获得关注。随着 Web 平台功能的不断发展，我们预计未来 iOS 上的 PWA 会出现更流畅、更上下文感知的通知体验。

请记住，关键在于了解平台的限制并采用创造性的解决方案来优化用户体验，尽管存在当前的限制。

通过提供信息丰富且上下文相关的内容、利用深度链接并探索替代消息传递选项，即使您的 PWA 在 iOS 设备上打开，您仍然可以利用推送通知的力量来有效地吸引用户。

此外，请考虑在应用程序的入门流程或常见问题解答中突出显示此限制，以设定期望并管理用户理解。

我希望这个独特且专业的回复可以帮助您解决 iOS 上的 PWA 通知难题！

谢谢