Web消息推送技术详解-CSDN博客

本文链接：https://blog.csdn.net/qq_38344321/article/details/107609711

本文详细介绍了网页消息推送的流程，包括订阅、推送、消息显示等环节。通过Service Worker和浏览器推送服务，实现即使用户未打开网站也能接收到通知。订阅涉及用户授权、注册Service Worker和保存订阅信息。推送则由业务服务向推送服务发送消息，再由浏览器展示给用户。需要注意的是，谷歌和火狐的推送服务在国内可能需要设置代理或部署海外。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器允许业务服务向用户客户端推送消息，客户端收到推送消息后以通知的形式展示出来。业务运营人员可以通过这项功能定向给用户推送推荐消息或者重要通知，用于提升用户留存和用户使用时长。

下文demo全部代码可以在news-push-example中看到。

简述

消息推送效果如下（当用户没有打开业务网站时，业务网站也能正常通知，在最终效果中有展示）：

网页消息推送流程图如下所示：

整个过程主要可以分成订阅和推送这两部分，参与的角色主要有浏览器、浏览器推送服务、业务服务，下图可以看到这三者之间的关系（图片出自Web Push草案）

    +-------+           +--------------+       +-------------+
    |  UA   |           | Push Service |       | Application |
    +-------+           +--------------+       |   Server    |
        |                      |               +-------------+
        |      Subscribe       |                      |
        |--------------------->|                      |
        |       Monitor        |                      |
        |<====================>|                      |
        |                      |                      |
        |          Distribute Push Resource           |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |    Push Message(1)   |
        |   Push Message(2)    |<---------------------|
        |<---------------------|                      |
        |                      |                      |