PWA 中如何实现推送消息的点击操作
PWA 即渐进式 Web 应用程序，是一种结合了 Web 技术和手机应用程序的优点的新型应用程序类型，可以为用户提供更加完善的使用体验。
PWA 中的推送功能可以向用户发送消息，这个特性非常有用，可以使用户及时地获得新的信息，比如新的评论，新的促销活动等等。同时，如果我们还能实现推送消息的点击操作，那么用户在接收到消息后就可以直接跳转到相关页面，这为用户的使用带来了更多的方便。
今天，我们就来详细讲解如何在 PWA 中实现推送消息的点击操作。
1.注册 Service Worker
在 PWA 中，推送消息依赖于 Service Worker 技术。我们需要在应用程序中注册一个 Service Worker，这样才能使用推送消息功能。
注册 Service Worker 的代码如下：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-- ----
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-- ----
-------------------------- ------------ ------- -- -----
---
---
-上面的代码中，我们通过 navigator.serviceWorker.register 方法注册了一个 Service Worker。
2.订阅推送
在 Service Worker 注册完毕之后，我们需要让用户订阅推送。当用户订阅推送之后，我们就可以向用户发送推送消息了。
推送订阅的代码如下：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
---------------------------------------------------------------------- -
----------------------------------------------------------------- ------
---------------------------- -
------------------------- ----------- ----------- -----------------------
-- - ------------ ---------
--
------------------ -
----------------- ----- -------- ----- ----------- -- ---- --------------- ---
---
---
-上面的代码中，我们使用了 pushManager 来订阅推送消息。在订阅成功之后，我们将 subscription 信息发送到服务器端，服务器端就可以使用这个信息来向用户发送推送消息了。
3.处理点击事件
当用户点击推送消息的时候，我们需要跳转到相关页面。为了实现这个功能，我们需要处理点击事件。
处理点击事件的代码如下：
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(clients.openWindow('http://example.com'));
});上面的代码中，我们通过添加 'notificationclick' 事件来处理用户点击推送消息的事件。当用户点击推送消息的时候，我们通过 clients.openWindow 方法打开了一个新窗口，并跳转到了 http://example.com 这个页面。
总结
通过以上的代码实现，我们就可以在 PWA 中实现推送消息的点击操作了。值得注意的是，在使用推送功能的时候，我们需要向用户申请权限，并确保用户接受推送消息的权限。同时，我们需要处理用户点击事件，使得用户在接收到推送消息之后能够方便地跳转到相关页面。
示例代码
完整示例代码可以参考以下链接：
https://github.com/mdn/pwa-examples/tree/master/js13kpwa-final
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f303acf6b2d6eab3c88156