前言
Progressive Web Apps (PWA) 是一种 Web 应用程序的开发模式,它允许开发者创建具有像本地应用程序一样的体验的 Web 应用程序。其中一个重要的特性是能够通过 push 消息提醒用户新的消息或更新。但在 iPhone 上,PWA 运行于 Safari 浏览器中时,开发者会遇到一个问题,iOS 浏览器并不支持 PWA 推送通知,因为缺少可供编程的 API。在本文中,我们将探讨如何解决 PWA 在 iPhone 上无法获取 Push 消息的问题。
解决方案
有一种方法可以在 PWA 中使用 Push 消息,那就是通过一些常规的技术手段,包括 Service Workers 和 Websockets。这在 Android 设备上是可行的,但在 iOS 上最好的解决方法是使用第三方解决方案。
使用 OneSignal
OneSignal 是一家基于云的 SaaS(软件即服务)提供商,提供 Push 消息和 Web 通知服务。我们可以通过注册一个 OneSignal 账号和一个应用程序来解决 PWA 在 iPhone 上无法获取 Push 消息的问题。
注册 OneSignal 账号
- 打开 https://onesignal.com/signup 账户注册页
- 输入邮箱和密码并勾选“我是开发者”选项
- 点击“注册”按钮
创建应用程序
- 登录 OneSignal 账户
- 点击“新应用程序”按钮
- 输入应用程序名称并选择平台
- 点击“创建应用程序”按钮
集成 OneSignal SDK
- 在应用程序设置页面中,下载 iOS 的 SDK 文件
- 在代码中引入 OneSignal SDK
-- -------------------- ---- ------- ------- ---------------------------------------------------- ------------------ -------- --- --------- - ---------------- -- --- ------------------------- - ---------------- ------ -------------- --- --- ---------
- 将
YOUR_APP_ID
替换为 OneSignal 应用程序中提供的应用程序 ID
推送通知
- 在 OneSignal 应用程序中创建一条通知
- 在代码中发送推送通知
-- -------------------- ---- ------- ------------------------- - ------------------------------- -- ----- --------- -- ------ -- ----- -------------- -- ------- --------- -- ------ -- ----- -- -- ------- --------------- -- --- --------- -- ------ -- ----------------------- -- ------------ ----- --- --------- -- ------ -- ------------------------------------ -- ----------- ----- --- --------- -- ------ -- ------------------------------------- -- ------ ------- -- -- -- ------ ------ -- ----- ------ ------- ------- -- -------- --- ----- -- ----- ------ -- ---- ------------ -- -- --------------------- ----- -- ----- -------------------- ---- --- ------ -- ------- ------ ----------------------- -- -- ---
- 刷新 PWA 应用程序
验证推送通知
- 在 Safari 浏览器中打开 PWA 应用程序
- 等待几秒钟,确保 OneSignal 推送通知已经到达
- 查看是否收到了推送通知
结论
在 iPhone 上,PWA 可以使用 OneSignal 服务来获取 Push 消息,而不需要使用 Service Workers 和 Websockets。通过以上步骤可以快速将 OneSignal 集成入你的 PWA 应用程序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/671459a2ad1e889fe2135cb8