iOS 16.5下PWA推送notificationclick事件运行/后台时未触发求助

问题重现 #

使用simple-push-demo测试时，桌面端功能正常，但iOS 16.5上出现异常：PWA处于终止状态时，点击推送通知能正常触发notificationclick事件；但应用处于前台或后台运行状态时，该事件完全不触发。

针对性修复方案 #

1. 适配iOS客户端窗口处理逻辑 #

iOS在PWA后台/前台状态下，直接调用clients.openWindow可能无法正确触发notificationclick事件的后续逻辑，需要先尝试匹配现有客户端窗口并聚焦，再考虑打开新窗口。修改notificationclick事件代码如下：

self.addEventListener('notificationclick', function(event) {
    console.log('Notification clicked.');
    event.notification.close();

    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true })
            .then(function(clientList) {
                // 先尝试聚焦已打开的同源窗口
                for (let i = 0; i < clientList.length; i++) {
                    const client = clientList[i];
                    if ('focus' in client) {
                        return client.focus();
                    }
                }
                // 没有现有窗口则打开新窗口
                if (event.notification.data && event.notification.data.url) {
                    return clients.openWindow(event.notification.data.url);
                }
                return Promise.resolve();
            })
    );
});

2. 确保Service Worker注册的作用域正确 #

检查你的PWA中Service Worker的注册代码，确保作用域覆盖了通知跳转的目标页面。示例注册代码如下（根据实际文件路径调整）：

navigator.serviceWorker.register('/sw.js', { scope: '/' })
    .then(function(registration) {
        console.log('ServiceWorker registration successful');
    })
    .catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });

3. 验证通知payload兼容性 #

iOS对推送通知的payload格式有特殊要求，确保推送服务发送的payload符合APNs规范，避免使用iOS不支持的字段。同时确认notificationOptions中的data字段结构正确，无嵌套过深或无效值。

4. 前台状态下补充客户端监听（备选方案） #

如果上述方案无效，可在PWA前台页面中额外监听等效行为（iOS前台时可能不会将通知点击事件传递给Service Worker）：

// 前台页面脚本中添加
if ('Notification' in window) {
    Notification.requestPermission().then(function(permission) {
        if (permission === 'granted') {
            navigator.serviceWorker.addEventListener('message', function(event) {
                if (event.data.type === 'notification-click') {
                    window.location.href = event.data.url;
                }
            });
        }
    });
}

同时修改Service Worker中的notificationclick事件，检测到前台客户端时通过postMessage传递事件：

self.addEventListener('notificationclick', function(event) {
    console.log('Notification clicked.');
    event.notification.close();

    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true })
            .then(function(clientList) {
                const targetUrl = event.notification.data?.url;
                if (!targetUrl) return Promise.resolve();

                // 检查是否有前台客户端
                const foregroundClient = clientList.find(client => client.visibilityState === 'visible');
                if (foregroundClient) {
                    return foregroundClient.postMessage({
                        type: 'notification-click',
                        url: targetUrl
                    });
                } else {
                    return clients.openWindow(targetUrl);
                }
            })
    );
});

说明 #

iOS 16.x系列的PWA推送通知存在一些已知行为差异，上述方案是针对该版本系统的常见修复手段。若问题仍未解决，可尝试升级iOS至最新稳定版，苹果后续版本逐步完善了PWA的事件触发逻辑。

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