在现代Web应用程序中，推送通知是与用户互动的重要方式之一，例如更新通知或重要提示。为了实现这种功能，Web开发人员必须使用像Push API这样的现代Web技术。而 npm 包 web-push-notifications-lite 是构建前端推送通知的一个工具。
什么是npm包web-push-notifications-lite？
npm 包 web-push-notifications-lite 是一个简单易用的JavaScript库，用于实现浏览器端的推送通知。它使得开发推送通知变得更加容易，因为它可以使用简单的 API 函数轻松地创建和发送推送通知。此包支持 Web Push 协议并与支持 Service Workers 和 Push API 的 Web 应用程序兼容。
开始使用
要使用 web-push-notifications-lite 库，您需要安装它。在终端窗口中跳转到项目根目录，并运行以下命令：
--- ------- --------------------------- ------
运行此命令将从 npm 仓库下载所需的库并将其添加到项目的依赖。要使用库，您需要在您的JavaScript代码中导入它，如下所示：
----- -------------------- - ---------------------------------------
现在您已经可以调用webPushNotifications的方法来创建、订阅和发送推送通知了。
创建和订阅推送通知
首先，您需要了解Push通知机制的工作方式，有关详细信息，请参阅 Google文档。
创建和订阅推送通知需要与自己运行的Push server 通信，而这些信息需要在应用服务器端的API中设置。主要步骤包括：
- 在 web-push-notifications-lite 中创建 Push Subscription。
----- ---------------- - - ---------------- ----- --------------------- -------- ----- -- ------------------------------------------------------------------ -- - -------------------------- -------------- -- - ------------------- ---
在这里，要订阅 push 通知，你需要将你的 public key 传递给 execute() 方法。然后该方法会向当前运行的 Push Server 确认订阅并返回 push subscription。
- 把 Push Subscription 发送到服务端存储
----- ------------ - ------------- --------
---------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------------------
---------- -- -
------------------------- ------ ---------------
-------------- -- -
-------------------
---现在在服务器端，你可以将存储的 Push Subscription数据传递给Push Server，以向用户发送 push 通知。
发送推送通知
发送推送通知时，需要与 Push server 通信，因此您应该使用服务器端 API 来完成此操作。推送服务端的详细设置可以参考上文的链接。
API端点应该准备一个实例，用于处理以下请求：
- GET /notifications/my-app/the-id-of-the-subscription - 当Push Server收到这种请求时，它应该查找之前存储的 Push Subscription，并返回一个包含结果的 JSON 对象。
-
----- -----------------------------
----------------------- ------------- ------ ------
------------------ -----
----------- ----------------------------------------
----------------- -----
------- -
--------- -----------
------- --------
-
-- POST /notifications/my-app/the-id-of-the-subscription/send
----- ------------ - -
------ ----------
----- ---------
----- ---------
------ ----------
----- -
---- -------
--
------------------- ----
--
----------------------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------------------
---------- -- -
------------------------- ---- ---------------
-------------- -- -
-------------------
---这里，要发送 push 通知，你需要在发送端点执行一个 POST 请求，并将推送通知的详细信息传递给它。在此示例中，我们使用了 JSON 格式表示推送通知。
示例代码
以下是完整的 JavaScript 示例代码，用于创建、订阅和发送 push 通知：
----- -------------------- - ---------------------------------------
-- --------- -- ---- -------------
----- ---------------- - -
---------------- -----
--------------------- -------- -----
--
------------------------------------------------------------------ -- -
--------------------------
----- -------------- - ----------------------------------------
-- ---- --- ---- ------------ -- --- ------ -- ----- --
----- ------------ - -
--- ---------------
------------- ------------
--
------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------------------
---------- -- -
------------------------- ------ ---------------
-------------- -- -
-------------------
---
-- ---- - ---- ------------ -- --- ----
----- ------------ - -
------ ----------
----- ---------
----- ---------
------ ----------
----- -
---- -------
--
------------------- ----
--
----------------------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------------------
---------- -- -
------------------------- ---- ---------------
-------------- -- -
-------------------
---
-------------- -- -
-------------------
---结论
在本文中，我们介绍了 npm 包 web-push-notifications-lite 的使用方法，展示了创建、订阅和发送推送通知的过程。它提供了一种简单、易用的方式来添加 push 通知到您的 Web 应用程序中，并增强了与客户的互动性。该库是广泛采用的工具之一，现今很多网站都已经成功地使用它来实现推送通知功能。
让我们深入了解推送通知和 Web 技术，并将其添加到你的 Web 应用程序中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668ead9381d61a3540c16