iOS 16.5下PWA推送通知无法跳转指定URL问题求助

问题根源 #

iOS 16.5的PWA在notificationclick事件处理上存在特定行为差异：相对路径调用clients.openWindow无法触发页面导航，绝对URL会跳转到Safari，而postMessage仅后台有效是因为前台页面与Service Worker的通信时机未对齐。

解决方案一：优先复用现有窗口并调用navigate #

直接用clients.openWindow的相对路径在iOS上导航失效，建议先匹配已打开的PWA窗口，调用navigate方法实现页面跳转，找不到窗口再打开新窗口：

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        // 查找已存在的PWA窗口
        for (const client of clientList) {
          // 匹配应用根路径或目标页面路径
          if (client.url === self.location.origin + '/' || client.url.includes('/messages')) {
            // 调用navigate跳转并聚焦窗口
            return client.navigate('/messages').then(() => client.focus());
          }
        }
        // 无现有窗口时，基于origin构造路径打开
        return clients.openWindow(`${self.location.origin}/messages`);
      })
  );
});

解决方案二：优化postMessage全场景监听 #

针对postMessage仅后台有效问题，区分应用前台/后台状态处理消息发送，并给冷启动场景增加延迟：

1. Service Worker端处理

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        const foregroundClient = clientList.find(c => c.visibilityState === 'visible');
        if (foregroundClient) {
          // 应用在前台，直接发消息让页面自行导航
          foregroundClient.postMessage({ type: 'NAV_TO', path: '/messages' });
          foregroundClient.focus();
        } else {
          // 应用在后台/未启动，打开根页面后延迟发消息
          clients.openWindow(self.location.origin).then((client) => {
            if (client) {
              setTimeout(() => {
                client.postMessage({ type: 'NAV_TO', path: '/messages' });
              }, 1000);
            }
          });
        }
      })
  );
});

2. app.component.ts端监听

import { Router } from '@angular/router';
// ...
constructor(private router: Router) {}

ngOnInit() {
  if ('serviceWorker' in navigator) {
    // 监听Service Worker消息
    navigator.serviceWorker.addEventListener('message', (event) => {
      if (event.data?.type === 'NAV_TO') {
        this.router.navigate([event.data.path]);
      }
    });
    // 页面加载完成后主动与Service Worker建立通信
    navigator.serviceWorker.ready.then(reg => {
      reg.active?.postMessage({ type: 'CLIENT_READY' });
    });
  }
}

解决方案三：确保Manifest配置正确 #

绝对URL跳Safari大概率是PWA的scope范围未覆盖目标路径，检查manifest.json：

{
  "scope": "/", // 确保覆盖/messages路径
  "start_url": "/",
  "display": "standalone",
  "name": "你的PWA名称",
  // 其他配置...
}

解决方案四：更新Service Worker并强制激活 #

iOS 16.5对Service Worker的缓存机制有特殊处理，确保新Worker立即生效：

self.addEventListener('install', (event) => {
  // 跳过等待，直接激活新Worker
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    // 接管所有已打开的客户端
    clients.claim()
  );
});

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