Safari关闭时Web应用后台推送通知实现方案咨询

核心结论 #

Safari支持浏览器关闭后的后台通知，但不能仅依赖Service Worker方案，需要结合Firebase Messaging与APNS（Apple Push Notification Service）的集成来实现，无需完全切换到原生APNS。

你的Periodic Sync方案失效的原因 #

• Safari对Service Worker的限制：当标签页或浏览器关闭时，Safari会立即终止Service Worker，Periodic Sync仅能在浏览器处于后台（但未完全关闭）时触发，且触发频率由系统严格调度，远达不到实时通知的要求。
• 代码逻辑问题：messaging.onBackgroundMessage()是Firebase在Service Worker中监听推送消息的回调，一旦Service Worker被终止，这个监听就会失效。Periodic Sync触发时，无法通过该方法获取实时推送的消息——Firebase不会将消息本地存储供你主动拉取，而是通过推送通道直接下发。

正确实现Safari后台通知的步骤 #

Firebase Messaging原生支持通过APNS为Safari推送通知，只需完成以下配置：

1. 配置APNS证书 #

在Apple开发者后台生成Web Push专用的APNS证书（注意是用于网站的，不是iOS app的），并将证书上传到Firebase控制台的「Cloud Messaging」模块下的「Apple app configuration」区域。这一步是让Firebase能够通过APNS向Safari发送通知。

2. 前端适配Safari的Web Push流程 #

Safari的Web Push API与Chrome等浏览器不同，它使用window.safari.pushNotification而非标准的Service Worker Push API。Firebase Messaging已经封装了这一差异，但需要确保初始化代码正确：

// 初始化Firebase Messaging
const messaging = firebase.messaging();

// 针对Safari的特殊处理
if (window.safari !== undefined) {
  messaging.requestPermission().then(() => {
    return messaging.getToken({ vapidKey: '你的VAPID密钥' });
  }).then(token => {
    // 将token发送到你的服务器，用于后续推送
    console.log('Safari Push Token:', token);
  }).catch(err => {
    console.error('Safari授权失败:', err);
  });
}

注意：Safari要求用户必须手动授权通知权限，且你的域名需要在Apple开发者后台配置为允许接收Web Push的域名。

3. 验证推送流程 #

当配置完成后，Firebase发送的通知会先转发到APNS，再由APNS推送到用户的Mac设备，即使Safari完全关闭，也能收到桌面通知。

关键注意事项 #

• Safari的Web Push仅支持MacOS上的Safari浏览器，iOS上的Safari目前不支持后台Web Push（只能在标签页打开时接收）。
• 确保用户已在系统设置中允许Safari接收来自你网站的通知，否则即使配置正确也无法收到。

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