PWA中多ServiceWorker搭配不同推送服务商的可行性及iOS/Safari支持

方案有效性 #

这个方案是有效的。每个ServiceWorker注册时指定了独立的作用域，对应的PushSubscription会与该ServiceWorker的注册信息绑定——订阅对象的scope属性会匹配对应的ServiceWorker作用域。当推送服务商发送通知时，浏览器会根据通知的目标作用域，将其路由到对应的ServiceWorker中处理，两个推送通道不会互相干扰，可以分别对接不同的推送服务商。

潜在问题 #

• 作用域规则限制：浏览器对ServiceWorker的作用域有严格限制，默认情况下，ServiceWorker的作用域只能是其脚本文件所在目录的子路径。如果你的注册代码中，/scope-1不是/src/sw-1.js所在目录（/src/）的子路径，注册会失败。要突破这个限制，需要在服务器上为ServiceWorker脚本配置Service-Worker-Allowed响应头，指定允许的作用域范围。
• 资源冗余与冲突风险：两个独立的ServiceWorker会占用更多客户端内存和存储资源。如果两者的缓存策略、后台同步逻辑没有做好隔离，可能会出现资源冗余或者逻辑冲突的情况。
• 站点级权限限制：Web Push的权限是站点全局级别的，而非作用域级别。用户一旦允许推送权限，所有ServiceWorker都能创建订阅；如果用户后续关闭推送权限，所有订阅都会失效，无法单独为某个作用域的ServiceWorker保留权限。

iOS和Safari的支持情况 #

Safari 16.4及以上版本（包括iOS 16.4+的Safari）已经支持ServiceWorker和Web Push功能，也支持多作用域ServiceWorker的注册，但需要满足以下条件：

1. 同样需要服务器配置Service-Worker-Allowed响应头，确保作用域规则符合要求；
2. 必须将PWA添加到主屏幕，否则后台可能无法正常接收推送通知；
3. 目前没有明确的ServiceWorker数量限制，只要作用域独立且符合规则，就能成功注册并绑定各自的PushSubscription，实现独立推送。

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