Progressive Web App (PWA) 技术是一种基于 Web 技术的应用开发模式，能够使 Web 应用的体验与原生应用相媲美，全面提升了 Web 应用界面、交互、流畅度等方面。其中，服务器推送技术是 PWA 中的一大利器。
什么是服务器推送
服务器推送（Server Push），指的是服务端向客户端自动发送数据的机制，也称为服务器推送技术。这种机制是一种基于 HTTP2 协议的特性，可以通过单一的 TCP 连接，在客户端请求之前主动将资源大小较小、但又必须要加载的资源发送到客户端，从而实现网页加载速度的优化。
PWA 应用中的服务器推送
实际上，PWA 应用中的服务器推送不仅仅是加载速度的优化，还可以用于实现诸如消息推送、更新提醒等功能。
在 PWA 中使用服务器推送，我们需要借助 Service Worker 技术。Service Worker（浏览器线程）可以在后台运行，并与浏览器保持通信。这使得它可以自主地管理应用程序资源，为我们实现服务器推送提供了一个非常好的环境。
需要注意的是，服务器推送需要配合 Web Push API 来使用，Web Push API 是浏览器中用于推送消息的 API。
实现服务器推送的步骤
创建 Service Worker
首先，我们需要创建一个 Service Worker，让它在浏览器中注册以监听特定事件，如 push 等。
-- -------------------- ---- -------
----------------------------- --------------- -
----------------
------------------------------------------ -
----- -------
----- -------
---- ------
--
--
---注册 Service Worker
在 HTML 中注册 Service Worker：
-- -------------------- ---- -------
--------
-- ---------------- -- ---------- -
-----------------------
------------------------------
---------------------------- -
-------------------- ------ -------
--
---------------------- -
-------------------- ------ ------- -------
---
-
---------Service Worker 注册成功后，就可以在此期间监听期望的事件。
向浏览器请求推送权限
在应用开始时，我们需要向浏览器请求推送权限。这可以通过以下代码来实现。
-- -------------------- ---- -------
-- ---------------- -- --------- -- ------------- -- ------- -
------------------------------------------------------ -
-- ------- --- ---------- -
--------------------------------------------------------- -
------------------------------------
---------------- ----- -- ---------
--------------------- ----------------------
--- ----- ---
- -- ----- --
---
---
-
---
-
-------- ----------------------------------- -
--- ------- - ------------- - -------------------- - --- - ---
--- ------ - ------------- - ---------------------- ------------------ -----
--- ------- - --------------------
--- ----------- - --- ---------------------------
--- ---- - - -- - - --------------- ---- -
-------------- - ----------------------
-
------ ------------
-其中，VAPID 公钥可以通过以下方式生成：
$ openssl ecparam -genkey -name prime256v1 -noout -out private.pem $ openssl ec -in private.pem -pubout -out public.pem $ cat public.pem | openssl ec -pubin -outform der | openssl base64
推送消息
推送消息需要借助服务器的帮助，这里只提供一个简单的原型，仅供参考。
-- -------------------- ---- -------
-------- ----------------------------- -
------------------------------------------ -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------------- -------------
-------- -
-- ----
-
--
--
---------------- -
----------------- ---------
--
---------------------- -
----------------- --------- -------
---
-总结
通过以上步骤，我们就可以在 PWA 中实现服务器推送功能。需要注意的是，在推送消息时，服务器需要根据用户设备、浏览器等信息进行适配，避免推送对用户造成干扰。
同时，推送消息也需要经过用户授权，用户选择恢复默认设置即可关闭。在使用服务器推送功能时，我们需要尽可能减少对用户的干扰，同时保证推送消息的重要性和及时性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645094eb980a9b385b992a9c