一、什么是PWA？
PWA(Progressive Web Apps)是渐进增强式Web应用的缩写，是指具备Native App特性的Web应用。PWA让Web应用感觉更加像本地应用，可以离线访问、快速响应、实现消息推送等功能，让Web应用的使用体验比传统Web应用更好。PWA的发展是对于传统Web应用不足的一次改善，也是前端开发技术的进一步发展。
二、什么是桌面通知？
桌面通知（Desktop Notification）是指在桌面端通过浏览器实现的消息提醒功能。其优点在于可以在不打开网页的情况下，及时的通知用户相关的信息。桌面通知提供了一个有效的方式向用户推送最新的消息，因此已经成为了PWA必不可少的特性之一。
三、如何实现PWA的桌面通知？
1. 使用Notification API
Notification API是PWA桌面通知的核心技术，它提供了一个用于创建桌面通知的接口，只需要调用该接口，即可在桌面上生成一个类似手机手动下拉栏通知的效果，用户可以点击通知栏中的消息，打开指定应用的指定页面。
通过HTML5新特性Notification API，我们可以轻松地实现PWA的桌面通知：
-- -------------------- ---- -------
-- ------
-------- ------------------------- -
-- -------------
-- ----------------- -- -------- -
----------------------
-
-- -------------
---- -- ------------------------ --- ---------- -
--- ------------ - --- --------------------------- -
----- -------------
----- ------------
---
-- -------
-------------------- - ---------- -
--------------------------
--
-
-- ----------
---- -- ------------------------ --- --------- -
--------------------------------------------------- -
-- ----------- --- ---------- -
--- ------------ - --- --------------------------- -
----- -------------
----- ------------
---
-- -------
-------------------- - ---------- -
--------------------------
--
-
---
-
-在调用该方法时，传递一个包含标题、内容、图标、链接等相关参数即可完成桌面通知的发送。
2. Service Worker + Push API
除了Notification API之外，我们还可以使用Service Worker和Push API来实现PWA的桌面通知。
Service Worker: 是运行在后台的JavaScript程序，可以拦截网络请求、缓存文件、实现消息推送等功能。可以作为PWA的核心技术之一。
Push API: 是浏览器的一种API，它可以在一个设备上接收消息，然后将消息传递给另一个设备。
通过使用Service Worker和Push API，我们可以实现PWA的桌面通知：
-- -------------------- ---- -------
-- --------- ------
-- ---------------- -- ---------- -
-----------------------------------------
------------------ -- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
---------------------------------
--
---------- -- -
-------------------------- ------------ ------- -- -----
--
-
-- ---------
----------------------------- ----- -- -
--------------------- ------- ---- ------------
--------------------- ------- ---- --- ---- ----- -------------------------
----- ----- - ---- ------
----- ------- - -
----- ------------------
----- ------------------
------ ------------------
--
--------------------------------------------------------- ----------
---
-- ---------
------------------------------------------ ----- -- -
--------------------- ------- ------------ ----- ------------
---------------------------
----------------
-----------------------------------------
--
---通过注册Service Worker，可以在浏览器中启用前台和后台的消息推送服务，这样我们只需要关心消息的内容，即可实现PWA的桌面通知。在实现过程中，还可以监听notificationclick事件来实现通知栏点击的操作。
3. Web Notification Polyfill
如果目前的浏览器不支持Notification API或者Push API，那么我们可以考虑使用Web Notification Polyfill。此工具可以使用JS和CSS实现桌面通知的功能，虽然它不能实现消息推送，但是可以在所有的主流桌面浏览器上实现桌面提醒。Web Notification Polyfill的核心是一个带有用于创建和发送通知的函数的JavaScript库，可以通过以下方式使用该工具：
-- -------------------- ---- -------
-- ----
----- ---------------- ------------------------------------
------- ---------------------------------------
-- ----
-- ---------------------- -
--------------- --- ------------ -----
- ---- -
--------------------------------
-------------------------- -
-- ----------- --- ---------- -
--- ----------------- ------ -
----- ------ --------
----- -----------------
---
-
---
-四、总结
本文介绍了PWA的桌面通知实现技术方案。我们可以使用Notification API、Service Worker & Push API、甚至是Web Notification Polyfill来实现PWA的桌面通知，从而让Web应用拥有Native应用的核心特性。PWA的发展和成熟为Web应用在桌面端和移动端上均提供了更好的用户体验，通过深入的学习和应用，我们可以更好地应对PWA的开发挑战。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6478552f968c7c53b04941ec