在Web应用中，我们经常需要推送一些通知，以便让用户及时得知某些事件的发生，比如订单状态变化、社交消息、新闻资讯等。而PWA（Progressive Web App）技术，提供了一种比传统Web应用更贴近原生应用的体验，可以实现在不同平台下的本地推送通知。本文将介绍如何利用PWA实现Web应用的本地推送通知。
什么是 PWA？
PWA是一种方式，可以让Web应用更像原生应用，具有如下特点：
- 渐进式增强：渐进式改进Web应用，更容易适配不同的设备和浏览器，无需下载安装。
- 可发现：可以被搜索引擎索引，易于用户找到。
- 可安装：用户可将Web应用添加到桌面或应用列表中。
- 可托管：使用HTTP/S协议升级代码库并为用户提供更好的访问性能。
- 可再现：可以打开或离线使用，具有可处理的状态和动作。
- 可链接：可以通过链接短信或在应用里共享，而无需下载或安装。
PWA 实现本地推送通知
PWA在浏览器中使用Service Worker，可在后台单独处理应用程序逻辑。Service Worker在注册后由浏览器独立于Web应用程序驻留。这使Service Worker产生了一种与Web页面隔离的感觉。由于Service Worker完全脱离Web应用程序运行，所以可以在不打开Web应用程序的情况下触发本地推送消息。
实现步骤
1.注册Service Worker
在index.html添加以下代码，用于在浏览器中注册Service Worker：
-- ---------------- -- ---------- -
------------------------------------------------------
---------------------------- -
-------------------- ------ -------------
--
-------------------- -
---------------------- ------ ------------ --------- -----
---
-2.编写Service Worker
在准备好了Service Worker后，就可以开始实现消息推送功能了。下面是一个简单的Service Worker，将会在浏览器通知面板中推送一条消息。
----------------------------- --------------- -
--------------------- - ---- --------- -------
--- ---- - ------------------
--- ----- - ------------ --- -----
--- ------- - -------------
----------------
----------------------------------------- -
----- -------
----
---当推送到达时，Service Worker将触发 push 事件。回调中的 event 包含推送的数据，以及通知的标题和消息内容。然后通过 showNotification 方法在浏览器通知面板中展示通知。
3.请求推送权限
在Service Worker中，只有在用户明确允许之后才能推送通知。所以，我们需要在Web应用程序中注册一个请求推送通知的推送管理者，然后引导用户授予我们推送提醒的权限。我们在 scripts/main.js 文件中使用以下代码：
-------- ---------- -
-- ----------------- -- -------- -
----------- ------- ---- --- ------- ------- ---------------
-
---- -- ------------------------ --- ---------- -
--- ------- - -
----- ------------- ---- --- ------
--
--- ------------ - --- ------------------------- --- --------------
-
---- -- ------------------------ --- --------- -
--------------------------------------- ------------ -
-- ----------- --- ---------- -
--- ------- - -
----- ------------- ---- --- ------
--
--- ------------ - --- ------------------------- --- --------------
-
---
-
-在上面的代码中，首先判断浏览器是否支持通知。如果支持，就查看是否已经授予权限，如果未授予权限则弹出窗口请求授权。授权后即可实现推送消息通知。
PWA 推送通知示例代码
下面是一个完整的基于 PWA 实现网站推送通知的代码，包含 Service Worker 和注册推送通知的 JavaScript：
-- --------- ------
-- ---------------- -- ---------- -
------------------------------------------------------
---------------------------- -
-------------------- ------ -------------
--
-------------------- -
---------------------- ------ ------------ --------- -----
---
-
-- ------------
-------- -------------- -
-- ----------------- -- -------- -
--------------------------- --- --------- -- ---- -----------
-------
-
----------------------------------------------- -
------------------------- ---------- --------- --------
-- ------- --- ---------- -
----------------------
-
---
-
-- ----------
-------- --------------------- -
--------------------------------------------------------- -
-- --------------------------- -
------------------ --------- -- --- ------------
------ ------
-
------------------------------------------------------------- -
-- ---- --- ----- -
------------------------------------
---------------- ----
--------------------- -
----------------------- -- ---- -----------------
--------------------- ------ --------------
-------------------- -
-------------------- ----------- --- ---- -- ---- ---------------- ---
---
- ---- -
-------------------- ---------- -- ---- ----------------
--------------------- ------ --------------
-
---
--
-
-- ------- ------ --------
----------------------------- --------------- -
--------------------- - ---- --------- -------
--- ---- - ------------------
--- ----- - ---- --- --------------
--- ------- - -------------
----------------
----------------------------------------- -
----- -------
----
---
---------------总结
在本文中，我们了解了如何利用PWA实现Web应用本地推送通知。我们可以通过注册Service Worker，在后台运行代码，并在静默的情况下将消息推送到浏览器通知面板中。本文介绍了PWA推送通知的实现步骤，并给出了完整的示例代码，希望对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e9735df6b2d6eab34bcfec