PWA 技术探索:如何利用 Web Push API 实现 PWA 的消息推送?

阅读时长 15 分钟读完

随着移动互联网的快速发展,越来越多的网站和应用开始采用 PWA 技术。PWA(Progressive Web App)是一种新型的 Web 应用程序模型,它可以让 Web 应用程序具有更好的性能、更高的可靠性和更好的用户体验,同时还可以离线访问和安装在用户的设备上,类似于原生应用程序。

PWA 技术的核心是 Service Worker,它可以拦截和处理网络请求,以及缓存和离线存储网页内容。但是,PWA 还有一个非常重要的特性,就是消息推送。通过消息推送,Web 应用程序可以在后台向用户发送通知,以便及时提醒用户重要的信息或事件。

在本文中,我们将探讨如何利用 Web Push API 实现 PWA 的消息推送。Web Push API 是一种新的浏览器 API,它可以让 Web 应用程序在后台向用户发送通知。我们将介绍 Web Push API 的工作原理、使用方法和示例代码,帮助开发者了解如何利用 Web Push API 实现 PWA 的消息推送。

Web Push API 的工作原理

在介绍 Web Push API 的工作原理之前,我们需要了解一些基本概念。

Push Service

Push Service 是一个中间件服务,它负责将推送消息从 Web 应用程序发送到用户的设备。Push Service 通常由浏览器厂商或第三方服务提供商提供,例如 Google 的 Firebase Cloud Messaging(FCM)、Apple 的 APNs(Apple Push Notification service)等。

Push Subscription

Push Subscription 是 Web Push API 中的一个重要概念,它代表用户设备与 Push Service 之间的连接。当用户首次访问 Web 应用程序时,应用程序可以请求用户订阅推送服务,然后将 Push Subscription 对象存储在服务器端。之后,服务器可以使用 Push Subscription 对象向用户发送推送消息。

Service Worker

Service Worker 是 PWA 技术的核心,它可以在后台拦截和处理网络请求。在 Web Push API 中,Service Worker 也扮演着重要的角色。当用户订阅推送服务时,Service Worker 可以获取 Push Subscription 对象,并将其发送到服务器端保存。当服务器需要向用户发送推送消息时,Service Worker 可以接收到推送消息,并将其显示给用户。

了解了这些基本概念之后,我们可以开始介绍 Web Push API 的工作原理了。

Web Push API 的工作流程如下图所示:

  1. 用户打开 Web 应用程序,并请求订阅推送服务。
  2. Web 应用程序向 Push Service 发送订阅请求,并获取 Push Subscription 对象。
  3. Web 应用程序将 Push Subscription 对象发送到服务器端保存。
  4. 当服务器需要向用户发送推送消息时,向 Push Service 发送推送消息。
  5. Push Service 将推送消息发送到用户设备。
  6. Service Worker 接收到推送消息,并显示给用户。

需要注意的是,Web Push API 的消息推送是基于 Push Service 的,因此用户必须同意接收推送消息,并且必须保持与 Push Service 的连接。如果用户关闭了浏览器或者与 Push Service 的连接中断,那么推送消息将无法送达。

Web Push API 的使用方法

了解了 Web Push API 的工作原理之后,我们可以开始介绍如何使用 Web Push API 实现 PWA 的消息推送了。

1. 生成 VAPID 公钥和私钥

在使用 Web Push API 之前,我们需要生成 VAPID 公钥和私钥。VAPID(Voluntary Application Server Identification)是一种用于标识服务器的机制,它可以让 Push Service 确认推送消息的来源。我们可以使用以下命令生成 VAPID 公钥和私钥:

执行完上述命令之后,会生成两个文件:vapid_private.pem 和 vapid_public.pem。vapid_private.pem 是 VAPID 私钥,vapid_public.pem 是 VAPID 公钥。我们需要将 VAPID 公钥保存在服务器端,用于发送推送消息。

2. 订阅推送服务

在 Web 应用程序中,我们可以使用以下代码请求用户订阅推送服务:

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

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

在上述代码中,我们首先使用 navigator.serviceWorker.register() 方法注册 Service Worker。然后,我们调用 registration.pushManager.subscribe() 方法请求用户订阅推送服务。其中,userVisibleOnly 参数表示是否只显示用户可见的通知,applicationServerKey 参数表示服务器的 VAPID 公钥。

当用户订阅推送服务成功后,pushManager.subscribe() 方法会返回 Push Subscription 对象。我们可以将 Push Subscription 对象发送到服务器端保存,以便服务器向用户发送推送消息。

需要注意的是,用户必须同意接收推送消息才能成功订阅推送服务。如果用户拒绝了订阅请求,或者浏览器不支持推送服务,那么订阅推送服务将失败。

3. 发送推送消息

在服务器端,我们可以使用以下代码发送推送消息:

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

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

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

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

在上述代码中,我们首先调用 webpush.setVapidDetails() 方法设置 VAPID 公钥和私钥。然后,我们创建 Push Subscription 对象,并将其作为参数调用 webpush.sendNotification() 方法发送推送消息。推送消息的内容可以是任意格式的字符串,例如 JSON 格式。

需要注意的是,推送消息必须是加密的,否则无法送达用户设备。Web Push API 使用 ECDH(Elliptic Curve Diffie-Hellman)算法来加密推送消息。在发送推送消息之前,我们必须将 Push Subscription 对象的 auth 和 p256dh 字段发送到服务器端,以便服务器可以使用 ECDH 算法加密推送消息。

示例代码

下面是一个完整的示例代码,演示如何使用 Web Push API 实现 PWA 的消息推送。

service-worker.js

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

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

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

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

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

index.html

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

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

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

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

server.js

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

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

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

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

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

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

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

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

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

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

在上述示例代码中,我们创建了一个简单的 PWA 应用程序,用户可以在网页上订阅推送服务,然后服务器可以向用户发送推送消息。需要注意的是,示例代码中的 VAPID 公钥和私钥是伪造的,实际使用时需要替换成自己的 VAPID 公钥和私钥。

结论

Web Push API 是一种非常有用的浏览器 API,它可以让 Web 应用程序在后台向用户发送通知。通过 Web Push API,我们可以实现 PWA 的消息推送功能,提高用户体验和用户留存率。在实际使用 Web Push API 时,我们需要了解其工作原理、使用方法和注意事项,以避免出现问题。

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

纠错
反馈