Web Push Notifications 是 PWA 的核心功能之一，它可以使网站更加用户友好和具有即时性。通过 Web Push Notifications，用户可以在网站关闭的情况下接收到通知，这为用户提供了更好的体验。在本文中，我们将讲解一些 PWA 中的 Web Push Notifications 的实践技巧，包括如何发送消息和如何处理消息等方面。
如何发送消息
Web Push Notifications 是通过 Service Worker 发送的。以下是一个简单的例子，展示如何在 Service Worker 中处理发送通知的代码：
self.addEventListener('push', function(event) {
const data = event.data.json();
self.registration.showNotification(data.title, {
body: data.body,
icon: data.icon,
tag: data.tag
});
});在上面的代码中，self.addEventListener 监听 'push' 事件，当接收到一个 push 事件时，将调用回调函数并将接收到的消息作为参数传递给函数。在这个例子中，data 是一个对象，其中包含了发送通知所需的数据。可以通过 self.registration.showNotification() 显示通知，其中包含了需要显示的数据。
如何处理消息
当用户点击通知时，我们需要处理通知。以下是一个简单的例子，演示如何在 Service Worker 中处理通知：
-- -------------------- ---- -------
------------------------------------------ --------------- -
---------------------------
----------------
------------------
----- --------
------------------------- -
--- ---- - - -- - - --------------- ---- -
--- ------ - -----------
-- -------- -- ------- -
------ ---------------
-
-
-- -------------------- -
------ ------------------------
-
--
--
---在上面的代码中，self.addEventListener 监听 'notificationclick' 事件，当用户点击通知时，将调用回调函数并将 event 对象作为参数传递给函数。在这个例子中，通过 event.notification.close() 关闭通知，然后调用 event.waitUntil() 来处理事件。 event.waitUntil() 执行异步任务，并且如果该任务未完成，浏览器将继续运行，直到它完成为止。在这个例子中，通过使用 clients.matchAll() 来获取所有客户端，并通过 clients.openWindow() 打开一个窗口。
如何在浏览器中启用通知
当请求订阅通知时，浏览器会向用户发送请求，用户需要选择是否允许通知。以下是一个简单的例子，演示在浏览器中请求通知的代码：
-- -------------------- ---- -------
-------- ------------------- -
------ --- ------------------------- ------- -
----- ---------------- - ----------------------------------------------- -
----------------
---
-- ------------------ -
------------------------------ --------
-
--
-------------------------------- -
-- ----------------- --- ---------- -
----- --- --------- -------- ------- --------------
-
---
-在上面的代码中，我们定义了一个名为 requestPermission() 的函数，该函数生成一个包装了 Notification.requestPermission() 的 Promise。当用户处理通知请求时，该 Promise 会返回一个字符串，表示用户是否允许通知。如果用户允许通知，则该 Promise 的状态为 granted。
总结
Web Push Notifications 是 PWA 的核心功能之一，使网站更加用户友好和具有即时性。在本文中，我们已经介绍了在 Service Worker 中发送和处理通知的实践技巧以及如何在浏览器中启用通知。通过这些技巧的学习和指导，您可以更好地构建 PWA，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64630e1f968c7c53b0413e78