如何使用 Web Push API 实现 PWA 应用的消息推送

什么是 PWA？

PWA 是 Progressive Web App（渐进式 Web 应用程序）的缩写。它是一种可以像本地应用一样运行的 Web 应用程序，同时又具备了 Web 应用程序的优势，比如可以在各种设备上通过浏览器来访问，无需像 Native 应用那样需要用户去下载安装等等。PWA 还可以像 Native 应用一样提供体验更好的响应速度、离线访问以及推送通知等功能。目前 PWA 已经成为了前端开发的一个趋势和发展方向。

Web Push API

Web Push API 是一种新的技术，使 Web 应用程序可以在后台运行并向用户推送通知。Web Push API 可以在支持 Service Worker 的浏览器中使用，这包括 Chrome、Firefox、Opera 和 Safari。

实现 PWA 消息推送的流程

1. 生成 VAPID 公钥和私钥

首先，我们需要在服务端生成一个 VAPID 公钥和私钥，通过公钥我们可以推送消息给客户端。可以使用 web-push 这个库来生成 VAPID 公钥和私钥：

--- -------- -------------------

执行完上述命令之后，会生成一个 VAPID 公钥和一个 VAPID 私钥，分别为：

------ ---- ---------------------------------------------------------------------------------------
------- ---- -------------------------------------------

2. 注册 Service Worker

在客户端需要注册 Service Worker，代码如下：

-- --------
-- ---------------- -- ---------- -
  -----------------------
    ------------------------------
    -------- -- -------------------- ------ ---------- ----------------
    ------------ -- ------------------ ----------- ------- --------- --------
-

3. 接受推送通知

客户端需要监听 Push 事件，并展示推送消息：

-- -----------------
----------------------------- -------- ------- -
  ----- ---- - ------------------
  ----- ------------ - ---------------------------------------------- -
    ----- -------------
    ----- ----------
  ---

  ------------------------------
---

4. 获取订阅信息

获取客户端订阅信息，并将订阅信息传给服务端，代码如下：

-- --------
----- ------------------------ - ------------ -- -
  -- ----- - ------------ --------
--

-- ---------------- -- --------- -- ------------- -- ------- -
  ------------------------------- -- -- -
    -----------------------
      ------------------------------
      ------------------ -- -
        ------------------------
          ------------------
          ------------------ -- -
            -- ------------- --- ----- -
              -- ------
              ---------------------------------------
            - ---- -
              -- -------
              ----- -------------------- - ----------------------
                ------------------------------------------------------------------------------------------
              --
              ------------------------
                ------------
                  ---------------- -----
                  --------------------- ---------------------
                --
                ------------------ -- ----------------------------------------
            -
          --
          ------------ -- -------------------- ------- ------------- -- --------
      --
      ------------ -- -------------------- ----------- ------- ------- -- --------
  ---
-

在获取订阅信息时，客户端需要判断是否已经订阅，如果已经订阅，就直接将订阅信息发送给服务端。如果尚未订阅，则需要调用 pushManager.subscribe() 方法来订阅，并将订阅信息发送给服务端。

5. 推送消息

服务端通过保存客户端的订阅信息来实现消息推送功能。在推送消息时，服务端需要向客户端发送一个通知，向客户端的订阅信息发送消息，代码如下：

-- -------
----- ------- - --------------------

-- ----- -----
----- ---------------- -
  ------------------------------------------------------------------------------------------
----- ----------------- - ----------------------

-- -------
----- ------------ - -
  --------- -----------------
  ----- -
    ----- -------------
    ------- ---------------
  --
--

-- -- ----- -----
------------------------
  -----------------
  -----------------
  ------------------
--

-- ----
-------
  ------------------------------- ----------------
    ------ --------
    -------- ---------
    ----- ------------
  ---
  ------------------
  --------------------

总结

通过 Web Push API，我们可以将推送通知的功能实现到 PWA 应用中。在实现消息推送的过程中，需要注意保护用户隐私，同时确保客户端和服务端之间的订阅关系是正确的，以便实现准确有效的消息推送。如果你正在构建一个 PWA 应用，并且需要进行消息推送功能的实现，那么 Web Push API 将是一个非常棒的选择。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ae0c3f48841e9894a0190d

阅读全文

猜你喜欢

  • Babel 如何处理 js 文件某些依赖的代码？

    在前端开发中，我们经常使用一些新的 JavaScript 语法和特性，但是这些语法和特性并非所有浏览器都支持，为了让代码在不同的浏览器中都能够正常运行，需要使用 Babel 进行语法转换和代码降级。

    1 年前
  • Sequelize 如何实现条件查询子查询？

    前言 Sequelize 是一个基于 Node.js 的 ORM(Object Relational Mapping) 框架。它可以实现对 MySQL、PostgreSQL、SQLite、MSSQL ...

    1 年前
  • 10 个最佳的响应式设计博客和资源网站！

    响应式设计是现代网站建设中不可或缺的一部分，它可以让网站适应不同的设备和屏幕尺寸，从而提供更好的用户体验。在学习和实践响应式设计的过程中，我们需要不断地获取新的知识和技能，因此，在这篇文章中，我们将介...

    1 年前
  • Next.js + Netlify 部署实践

    在进行前端 Web 开发时，如何高效、快速地部署上线应用是不可忽视的一个环节，而 Next.js 和 Netlify 的组合，则为前端开发者提供了一种简单、快捷的部署实践体验。

    1 年前
  • Redux 优化指南

    Redux 是当下前端开发中广泛使用的状态管理库，它提供了一种可预测的状态管理方案，使得应用的数据流更加清晰和可控。但是，随着应用规模的增大，Redux 的性能问题也逐渐浮现。

    1 年前
  • Promise 中 catch 方法的使用技巧

    在前端开发中，使用 Promise 已经成为了不可避免的趋势。Promise 一方面可以帮助我们更好地管理异步任务，另一方面，也可以更好地处理异常情况。其中，catch 方法就是 Promise 常用...

    1 年前
  • Angular 中使用 RxJS 进行延迟加载的最佳实践

    Angular 是一款流行的前端框架，由于其强大的工具集合和插件生态系统，成为了许多企业开发者的首选。在 Angular 中使用 RxJS 进行延迟加载是一种常见的开发方式，本文将介绍一些最佳实践，以...

    1 年前
  • 如何在 CSS Grid 布局实现自适应的等分列 / 行

    CSS Grid 布局是一种强大的前端布局方法，可以非常灵活地进行网格化布局设计。在实际使用中，我们可能会遇到需要实现自适应的等分列或者行的需求，本文就将介绍如何在 CSS Grid 布局中实现这类布...

    1 年前
  • Express.js+WebSocket 的使用示例

    在前端开发中，常常会遇到需要实现实时通信的需求。传统的 HTTP 协议无法满足这种需求，因此我们需要使用 WebSocket 协议来实现实时通信。Express.js 是一种流行的 Node.js 框...

    1 年前
  • ES10 中的实验性特性：Math.signbit()

    在 ECMAScript 2019 （通常称为 ES10）的新特性中，Math.signbit() 是一个实验性特性，它可以用于检测一个数字是否为负。 使用方法 Math.signbit() 接受一个...

    1 年前
  • Web Components 实战 — 如何使用 Shadow DOM 实现组件隔离

    Web Components 是一种构建可复用、独立组件的 Web 技术。它由四部分组成：Custom Elements、Shadow DOM、HTML Templates 和 HTML Import...

    1 年前
  • 使用 Fastify 构建 RESTful API 的最佳实践

    什么是 Fastify Fastify 是一个低开销、高性能且功能齐全的 Node.js 框架，用于构建 Web 应用程序和 RESTful API。一些被广泛使用的应用程序，例如 NodeBB 和 ...

    1 年前
  • Headless CMS 如何支持运营数据分析和报表

    前言 Headless CMS 是一种新兴的内容管理系统，其与传统 CMS 的区别在于，Headless CMS 不会直接渲染页面，而是通过 API 或者其他方式将数据提供给前端开发人员，由前端人员根...

    1 年前
  • Enzyme 伪造 React Native 组件以解决测试问题

    Enzyme 伪造 React Native 组件以解决测试问题 前言 在前端开发过程中，测试是必不可少的一环，但测试也是一个非常繁琐和耗时的工作。特别是在 React Native 开发中，由于 R...

    1 年前
  • 用 ECMAScript 2015 的模板字符串构建动态 HTML 页面

    在前端开发中，我们经常需要根据数据动态生成 HTML 页面。虽然我们可以通过字符串拼接来实现，但这种方式往往很难维护和调试。而 ECMAScript 2015 提供了模板字符串，它可以让我们更加方便地...

    1 年前
  • GraphQL query 中的错误如何更好地 debug

    在开发前端应用时，GraphQL 是一个非常强大的工具。但是当你在编写GraphQL查询时，难免会遇到错误。这些错误可能会导致您无法发送正确的请求，从而影响您的应用。

    1 年前
  • Redis 使用场景详解（四）——消息队列

    在前两篇文章中，我们已经了解了 Redis 的基本概念、数据结构、存储方式以及 Redis 在缓存、计数器、分布式锁中的使用场景。今天，我们将讨论 Redis 在消息队列中的使用。

    1 年前
  • LESS 中处理浏览器缓存问题的方法

    LESS 中处理浏览器缓存问题的方法 在前端开发中，浏览器缓存是一项非常重要的技术。通过合理地利用浏览器缓存，可以减小网络带宽的压力，提高网站性能，从而更好的提升用户体验。

    1 年前
  • 在 Koa.js 应用程序中实现图像大小调整

    图像在 WEB 页面中起着至关重要的作用，但是对于一些大图像对于网络传输的流量会造成很大的影响，因此我们常常需要对图像进行大小的调整。本文将介绍如何在 Koa.js 应用程序中实现图像大小调整的功能。

    1 年前
  • Mocha 测试框架中的异步测试该如何处理？

    在前端开发中，我们经常需要测试一些异步操作，比如 AJAX 请求、定时器等等。Mocha 是一个流行的测试框架，它支持异步测试。本文将介绍如何在 Mocha 中处理异步测试，希望能够帮助读者更好地了解...

    1 年前

相关推荐

    暂无文章