开发者问题收集

为 Angular PWA 项目实现适用于 iOS 和 Android 的推送通知

2022-10-18
1678

我已使用 Angular 的 service-worker lib 成功适配 Android 推送通知:

json 包:

"@angular/service-worker": "~12.2.16"

导入:

import { SwPush } from '@angular/service-worker';

前端代码:

public subscribe() {
// my endpoint
this.httpClient.get(`${this.baseURL}/backgroundPush/subscriptions/key`, { responseType: 'text' })
.subscribe(publicKey => {
  this.swPush.requestSubscription({
    serverPublicKey: publicKey
  }).then((subscription) => {
      this.endpoint = subscription.endpoint;
      //my endpoint
      this.httpClient.post(`${this.baseURL}/backgroundPush/subscriptions/add`, subscription).subscribe(() => {
       },
        error => this.handleSubscriptionFailure(error))
    })
    .catch((error) => this.handleSubscriptionFailure(error));
},
  error => this.handleSubscriptionFailure(error));

>

在后端,我使用 c# 和以下库来发送推送消息:

<PackageReference Include="Lib.Net.Http.WebPush" Version="3.2.1" />

它可以完美地为 Android 设备发送消息!

但是,此解决方案不适用于 iOS 设备。 当有人尝试订阅推送消息时,控制台中出现以下错误:

TypeError: undefined is not an object (evaluating t.pushManager)
  1. 考虑到我已经使用 service-worker,有哪些可能性可以扩展推送通知以使其在 iOS/Safari 上运行?
  2. 除了 service-worker,您还建议使用什么?为什么?
2个回答

根据此来源:

https://pushalert.co/blog/ios-web-push-notifications-safari-available/

目前无法使用服务工作线程发送网络推送通知 ,但明年可以实现:


更新 - 2022 年 6 月:

Apple 现已在 WWDC 2022 上确认,它将在 2023 年初随 iOS 16 一起为 iOS 上的 Safari 添加网络推送通知支持。 您可以预期 iPhone 和 iPad 上的所有浏览器都将在明年初支持网络推送通知。

更新 - 2 月2022 年:

Apple 终于在 iOS 上的 Safari 和 Chrome 和 Firefox 等其他浏览器中添加了实验性的网络推送支持。 因此,到 2022 年底,我们应该会在 iPhone 和 iPad 上看到网络推送通知 - 更多详情请点击此处。

Jacob
2022-10-18

回答您提出的具体问题。

1. 考虑到我已经使用了 service-worker,扩展推送通知以使其在 iOS/Safari 上工作的可能性是什么?

在 iOS Safari 中,您不能(截至目前)。但 Apple 确认此功能将于 2023 年随 iOS16 更新推出 - https://engagespot.co/blog/send-web-push-notification-ios-safari

2. 除了 service-worker,您还建议使用什么,为什么? 其他任何方法都不适用于 Web 推送通知。您需要等到 iOS 中提供 Web 推送。

anand
2022-12-04