PWA（Progressive Web App）是一种新兴的 Web 应用程序模型，它使用现代 Web 技术来创建可靠的、快速的、可安装的应用程序，并具有类似于 Native 应用程序的功能。PWA 在 Android 平台上已经得到了广泛的应用，但在 iOS 平台上却存在一些限制，其中一个就是无法实现 Badge 通知。本文将介绍如何在 iOS 上实现 Badge 通知。
什么是 Badge 通知
Badge 通知是一种 iOS 上的通知类型，它可以在应用程序图标的右上角显示一个小红点，用来提醒用户有未读消息或未处理的任务。在 iOS 上，只有应用程序获得了通知权限并设置了 Badge 数量才能显示 Badge 通知。
PWA 如何实现 Badge 通知
PWA 本身并不支持 Badge 通知，但可以通过 Web Push API 和 Service Worker 来实现。Web Push API 是一种浏览器 API，用于向用户发送推送通知。Service Worker 是一种在后台运行的脚本，用于处理离线缓存、推送通知等任务。
在实现 Badge 通知之前，需要满足以下条件：
- 应用程序必须获得了通知权限。
- 应用程序必须有一个 Service Worker，并且已经注册成功。
- 应用程序必须支持 Web Push API。
以下是实现 Badge 通知的具体步骤：
1. 在 Service Worker 中监听推送通知事件
在 Service Worker 中监听 push 事件，并且在事件处理程序中调用 showNotification() 方法显示通知。showNotification() 方法接受一个对象作为参数，该对象包含通知的标题、图标、正文等信息。
-- -------------------- ---- -------
----------------------------- --------------- -
----- ------- - ---------- - ----------------- - --- ---------
----------------
--------------------------------------- -------------- -
----- --------
----- ---------------------------
------ --------------------------
--
--
---在上述代码中，我们设置了通知的标题为 "New Notification"，正文为推送消息的内容，图标为 192x192 的图片，Badge 图标为 72x72 的图片。
2. 在推送消息中添加 Badge 数量
在推送消息中添加 Badge 数量，可以在应用程序图标上显示红色的小圆点。在推送消息中添加 Badge 数量需要在服务器端生成推送消息，并在消息中添加 Badge 属性。
-- -------------------- ---- -------
----- ------------------- - -
------------- -
------ ---- --------------
----- ---- ---- - --- ---------
----- ---------------------------
------ --------------------------
----- -
---- ----------------------
--
--
----- -
------ --
--
--
-------------------------------------- -------------------------------------在上述代码中，我们在推送消息的 data 属性中添加了一个 badge 属性，它的值为 1。这样，当用户收到推送消息时，就会在应用程序图标上显示一个小红点。
3. 在 Service Worker 中监听通知点击事件
在 Service Worker 中监听 notificationclick 事件，并且在事件处理程序中打开推送消息中指定的 URL。
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(
clients.openWindow(event.notification.data.url)
);
});在上述代码中，我们在通知点击事件处理程序中关闭通知，然后打开推送消息中指定的 URL。
总结
通过 Web Push API 和 Service Worker，我们可以在 iOS 上实现 Badge 通知。这种方法可以让 PWA 更加接近 Native 应用程序，提高用户体验。但是，需要注意的是，Badge 通知只能在用户同意通知权限并且应用程序在前台或后台运行时才能显示。在用户关闭通知权限或者应用程序被关闭时，Badge 通知将不再显示。
示例代码：https://github.com/JimmyLv/pwa-badge-notification-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cefc5aadd4f0e0ff857841