PWA 中的 push notification API 初探-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA？

PWA（Progressive Web App）指的是即将兴起的渐进式 Web 应用程序，简单来说，就是一种在浏览器上运行的应用程序，具备了原生应用程序的功能和体验。与原生应用程序相比，PWA 不需要安装即可运行，并且在使用过程中可以离线缓存，用户可在主屏幕添加快捷方式。

什么是 push notification api ？

Push Notification API 是允许您向用户发送通知消息的浏览器 API。这些通知可以提醒用户您的网站的新内容、促销和其他重要信息。push notifications 的出现可以有效地增加客户忠诚度和提高用户体验。

如何在 PWA 中使用 push notification api？

要在 PWA 中启用推送通知,您需要执行以下几个步骤：

首先，您需要获取 push notification API 的许可，以允许发送通知消息到用户的设备。
然后，您需要在 client 端注册 service worker，以便在您的网站接收到订阅消息时运行 worker。
然后，您需要引导用户订阅推送通知，以允许您向他们发送消息。
最后，在用户订阅消息后，您可以使用 web-push 库将通知消息发送给用户。

获取 push notification API 的许可

要获取 push notification API 的许可，您需要向浏览器请求许可使用 Notification 对象。这样只会在用户首次访问您的站点时出现一次。以下是代码示例:

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

注册 service worker

您的 service worker 可以接收来自服务端的消息，并将其发送到浏览器。为此，您需要在 client.js 文件中执行以下代码：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(function() {
      console.log('Service worker registered!');
    });
}

引导用户订阅推送通知

接下来，您需要提供一个界面，让用户订阅推送通知。以下是示例代码：

<div class="button" id="notification-btn">订阅</div>

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

发送 push notification 消息

最后，在用户订阅后，您可以使用 web-push 库来向用户发送消息。以下是示例代码：

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

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

结论

在 PWA 中使用 push notification api 可以帮助您向用户发送新内容、促销和其他重要信息的通知。在使用 push notification API 时，您需要获取浏览器的许可，并将 service worker 注册到客户端。然后，您需要引导用户订阅推送通知，并使用 web-push 库将通知消息发送给用户。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/677666cc6d66e0f9aa2066ac

PWA 中的 push notification API 初探