iOS 16.4下如何让PWA仅在后台接收Web Push通知？

iOS 16.4对Web Push的实现逻辑确实和Android/桌面端有差异，要统一实现仅后台显示通知，可以通过在Service Worker中判断PWA的前台状态来控制通知的展示：

核心思路 #

在Service Worker的push事件处理逻辑中，先检查当前是否有PWA客户端处于前台（获得焦点），只有当没有前台客户端时，才调用showNotification弹出系统通知；如果处于前台，直接把消息转发给页面内部处理即可。

具体实现代码 #

self.addEventListener('push', (event) => {
  // 解析FCM推送的 payload
  const payload = event.data?.json() || {};
  const notificationContent = payload.notification || {};
  
  const notificationOptions = {
    title: notificationContent.title,
    body: notificationContent.body,
    icon: '/icons/icon-192x192.png', // 替换成你的PWA图标路径
    data: payload.data || {} // 携带自定义数据
  };

  event.waitUntil(
    // 获取所有关联的窗口客户端
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        // 判断是否有客户端处于前台（聚焦状态）
        const isAppInForeground = clientList.some(client => client.focused);

        if (!isAppInForeground) {
          // 后台状态：弹出系统通知
          return self.registration.showNotification(notificationContent.title, notificationOptions);
        }

        // 前台状态：将消息发送给页面，由页面自行处理（比如显示内页提示）
        clientList.forEach(client => {
          client.postMessage({
            type: 'IN_APP_PUSH',
            content: notificationContent,
            data: payload.data
          });
        });
        
        return Promise.resolve();
      })
  );
});

关键细节说明 #

• clients.matchAll({ includeUncontrolled: true })：确保能获取到所有和当前Service Worker关联的客户端，避免遗漏未被Service Worker控制的页面实例
• 前台状态下的处理：通过postMessage把推送消息传递给页面，你可以在页面的message事件监听中，实现内页的消息提示（比如顶部通知栏），和系统通知区分开
• 适配FCM：如果使用Firebase的默认Service Worker，需要自定义Service Worker并在初始化FCM时指定，确保这个push事件能被正确拦截处理

测试注意事项 #

• 必须确保PWA已添加到iOS主屏幕，iOS的Web Push仅对已安装的PWA生效
• 测试前台状态时，要保证PWA处于活跃的前台窗口（不是后台挂起状态）

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