PWA 实现 Push Notification 的方法及在浏览器中的展示

阅读时长 5 分钟读完

伴随着移动设备的普及,Web 应用逐渐成为人们生活必备的组成部分。PWA(Progressive Web Apps)作为 Web 应用的一种新形态,正在逐渐被广泛认可和使用。其中,Push Notification 作为衔接 Web 应用和用户的桥梁,也在 PWA 中扮演着重要的角色。本文将会介绍 PWA 实现 Push Notification 的方法以及在浏览器中的展示,并附有代码示例。

实现 Push Notification

PWA 实现 Push Notification 主要依赖于两个 API:Push API 和 Notification API。

其中,Push API 负责推送消息给用户的浏览器,而 Notification API 则负责在浏览器中展示通知消息。两者的相互配合才能实现完整的 Push Notification。

Push API

Push API 提供了向用户浏览器推送消息的能力。具体而言,它提供了以下两个主要对象:

  • PushManager:推送管理器,负责管理订阅信息以及推送消息。
  • PushSubscription:推送订阅,代表了浏览器对某个服务器的消息推送订阅。

下面是一个简单的 PushManager 示例:

-- -------------------- ---- -------
-- --- -----------
----------------------------------------------- -- -
  ------------------------------------------------------------ -- -
    -- -------------- -
      -- -----
      --------------------------
    - ---- -
      -- ------------
      ------------------------------------ ---------------- ---- --
        --------------------- -- -
          -----------------------------
        --
        ------------ -- -
          --------------------
        ---
    -
  ---
---
展开代码

上述代码中,通过 navigator.serviceWorker.ready 获取到 Service Worker 的 registration,再通过 registration.pushManager 获取到 PushManager。随后,使用 pushManager.getSubscription() 来检查是否已经订阅过。如果已经订阅过,直接用 console.log() 输出订阅信息;否则,使用 pushManager.subscribe() 来发起订阅请求,并将 userVisibleOnly 设置为 true,表示当前仅推送可见的通知。

Notification API

Notification API 负责在浏览器中展示通知消息。为了保证用户体验和隐私安全,现代浏览器对通知消息的展示和交互都有了更加精细的规定。

在 Chrome(版本 80+)和 Edge(版本 84+)中,通知消息必须经过用户的许可才能展示。具体而言,需要在页面中请求 permission,用户授权后才能进行展示:

-- -------------------- ---- -------
-- -- ----------
------------------------------------------------ -- -
  ------------------------
---

-- ----
-- ------------------------ --- ---------- -
  --- -------------------- -------- -
    ----- ----- -- - ---- ---------------
    ----- --------------------------
  ---
-
展开代码

在 Safari 中,通知消息必须是 HTTPS 环境下的 Web App,且必须经过用户的许可或者具有合法的交互操作。

在浏览器中的展示

Push Notification 通知消息在浏览器中的展示分为三种情况:用户当前在浏览器页面内、用户当前在系统使用其他应用程序、用户当前处于系统锁屏状态。各种情况下的通知消息展示方式如下:

用户当前在浏览器页面内

推送消息时,如果用户的浏览器页面有打开,则当前页面会同时收到消息并在通知栏中展示通知。

用户当前在系统使用其他应用程序

如果用户当前不在浏览器页面,则系统将自动弹出通知消息,通知用户有新消息到达。

用户当前处于系统锁屏状态

如果用户当前处于系统锁屏状态,则通知栏会展示消息摘要和应用程序图标,同时会提供通知预览功能:

总结

本文介绍了 PWA 如何实现 Push Notification 的方法以及在浏览器中的展示方式,并附有代码示例。在实现 Push Notification 的过程中,需要注意考虑用户体验和隐私安全等方面的问题。推送消息时,尽量给用户提供有价值的内容,最大程度地避免对用户造成骚扰。同时,为了确保用户的隐私安全,推送消息也需要满足浏览器的要求和规定。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65ae146dadd4f0e0ff7a0c8c

纠错
反馈

纠错反馈