Web Push 是一项非常有用的技术，用于在浏览器中推送消息，使网站可以与用户进行更好的交互，并实现更多的功能。本文将介绍如何使用 Custom Elements 和 Push API 来创建一个强大的 Web Push 通知系统，包括如何创建自定义元素来实现通知组件和如何通过 Push API 推送消息到客户端。
Custom Elements
Custom Elements 允许你创建可重用的 HTML 元素，它们可以与标准 HTML 元素一起使用。这些元素可以被定义为包含内容和属性，并且可以通过 JavaScript API 进行控制。这使得开发者可以为他们的应用程序创建非常定制化的组件，从而构建功能丰富的用户界面。
Custom Elements 使用原生的 Web 标准，无需使用第三方库或框架。它们可以通过在脚本中定义类来创建。下面是一个示例，它定义了一个 Custom Element，名为 my-notification。
<my-notification> <p slot="title">Title</p> <p slot="body">This is the body of the notification.</p> </my-notification>
class MyNotification extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-notification-template');
const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-notification', MyNotification);在上面的例子中，我们定义了一个 Custom Element，名为 MyNotification。它的构造函数中首先找到一个 template 元素，接着将它添加到一个 Shadow DOM 中。然后这个 Shadow DOM 会被添加到元素本身，作为它的子元素。这种方法可以保证样式和脚本隔离，不会影响到外界的样式和脚本。
这个 Custom Element 有两个自定义插槽，分别对应元素的标题和正文。在实际使用中，我们可以通过为这两个插槽分别传入组件标题和正文内容，从而实现一个完整的通知组件。
Push API
推送 API 是一个新的 Web API，它提供了一种在浏览器和服务器之间推送消息的方式。通过使用 Push API，Web 应用程序可以给用户发送消息，即使应用程序没有在活动的网页标签中打开，也可以在操作系统的通知区域中显示通知。
Push API 依赖于 Service Worker。Service Worker 是一个用于拦截网络请求并执行离线缓存的 JavaScript 文件，它可以独立于打开的网页工作。Service Worker 可以从浏览器后台运行，这使得它成为向用户推送消息的重要一环，因为它可以在应用程序未打开的情况下处理推送通知。
在使用 Push API 之前，我们需要先注册一个 Service Worker。下面是一个简单的例子，演示如何注册一个 Service Worker，并监听 push 事件。
-- -------------------- ---- -------
----------------------------------------------------------------------- -- -
------------------------------------ ---------------- ---- --
------------------ -- -
-------------------------- -----------------------
-- ---- ------------ ------ -- ------
--
------------ -- -
------------------------- --------- -------
---
---在上面的代码中，我们注册了一个 Service Worker，并在原始域名下注册了一个 pushManager。subscription 对象包含了所有需要推送通知所需的细节，它们将被使用者的服务器存储，当应用程序想要发送推送通知时，服务器便可通过 subscription 对象来完成操作。
下面我们可以定义一个 sendPushNotification() 函数，用于向客户端推送通知。该函数会将通知标题和正文作为参数，通过 Push API 将它们发送到客户端。
-- -------------------- ---- -------
-------- --------------------------- ----- -------- ---- -
----------------------------------------------- -- -
------------------------------------------------------------ -- -
-- -------------- -
----- ------- - -
----- -----
----- --------
---- ----
--
------------------------------------ ---------
-
---
---
-在上面的代码中，我们从 Service Worker 中获取订阅对象，并通过 showNotification() 方法向客户端推送通知。我们可以通过传递 title、body、iconUrl 和 tag 来控制通知的外观和行为。
示例代码
下面是一个使用 Custom Elements 和 Push API 来实现通知组件和推送通知的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---- --------------------
-------
------
---------------- ------------------
-- -----------------
-- ----------------
------------------
--------
----- -------------- ------- ----------- -
------------- -
--------
----- -------- - ----------------------------------------------------
----- ---------- - ------------------- ----- ------ -------------------------------------------------
-
-
---------------------------------------- ----------------
-------- --------------------------- ----- -------- ---- -
----------------------------------------------- -- -
------------------------------------------------------------ -- -
-- -------------- -
----- ------- - -
----- -----
----- --------
---- ----
--
------------------------------------ ---------
-
---
---
-
----------------------------------------------------------------------- -- -
------------------------------------ ---------------- ---- --
------------------ -- -
-------------------------- -----------------------
-- ---- ------------ ------ -- ------
--
------------ -- -
------------------------- --------- -------
---
---
----------------------------------------------------------------------------------- - -------- -- -- ---------
---------------------------------------------------------------------------------- - ----- ------- -- --- ------
------------------------- --------- ------- --- --- ------ ----------- ---------------
---------
--------- ------------------------------
-------
----- -
-------- ------
----------------- -----
-------- -----
-------------- -----
-
------------------------- -
---------- -----
------------ -----
------- --
-
------------------------ -
---------- -----
------- --
-
--------
----- --------------------
----- -------------------
-----------
-------
-------结论
本文介绍了如何使用 Custom Elements 和 Push API 来构建强大的 Web Push 通知。Custom Elements 允许你创建定制化的 HTML 元素，而 Push API 提供了一种在浏览器和服务器之间推送消息的方式。通过结合这两个技术，我们可以创建完整的通知组件，并与用户进行更好的交互。希望本文能够对你有所启发，并能够在实际开发中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6720dfe62e7021665e04ef92