[译] 由 Node.js 发送 Web 推送通知

原文地址：Sending Web Push Notifications from Node.js

原文作者：code_barbarian

译文出自：掘金翻译计划

本文永久链接：github.com/xitu/gold-m…

译者：lsvih

校对者：talisk

使用 service workers API 可以让你直接由 Node.js 应用向 Chrome 浏览器发送推送通知。web-push npm 模组可以让你免去 PubNub 之类的中间商，直接推送消息。本文将在前端使用原生 JavaScript，在后端使用 Express 框架，通过一个“Hello, World”级别的样例来带你了解如何进行 web 推送通知。最终的效果如下图所示。本项目的全部源码可在 GitHub 查阅。

鉴权及配置服务端

要设置 web 推送，必须先创建 VAPID keys。VAPID keys 用于识别是谁发送了推送消息。npm 的 web-push 模组能够帮助你生成 VAPID keys，下面我们将安装 web-push 及其依赖，并使用 web-push generate-vapid-keys 来创建 VAPID keys。

$ npm install [email protected] [email protected] [email protected] [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 62 packages in 1.42s
$
$ ./node_modules/.bin/web-push generate-vapid-keys
=======================================
Public Key:
BOynOrGhgkj8Bfk4hsFENAQYbnqqLSigUUkCNaBsAmNuH6U9EWywR1JIdxBVQOPDbIuTaj0tVAQbczNLkC5zftw
Private Key:

=======================================
$
复制代码

如果你需要支持低版本浏览器，那么还要获取 GCM API key，但在桌面版 Chrome 63 或更高版本中不需要它。

下面创建 index.js 文件，其中包含你的服务。你需要使用 require() 导入 web-push 模组，并配置刚才的 VAPID keys。配置相当简单，将 VAPID keys 存放在 PUBLIC_VAPID_KEY 与 PRIVATE_VAPID_KEY 环境变量中即可。

const webpush = require('web-push');
const publicVapidKey = process.env.PUBLIC_VAPID_KEY;
const privateVapidKey = process.env.PRIVATE_VAPID_KEY;
// 此处换成你自己的邮箱
webpush.setVapidDetails('mailto:[email protected]', publicVapidKey, privateVapidKey);
复制代码

下一步，为 Express 应用添加一个名为 /subscribe 的端点。浏览器中的 JavaScript 将会发送一个 body 中包含 PushSubscription 对象的 HTTP 请求。为了用 webpush.sendNotification() 发送推送通知，你需要获取 PushSubscription 对象。

const app = express();
app.use(require('body-parser').json());
app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  res.status(201).json({});
  const payload = JSON.stringify({ title: 'test' });
  console.log(subscription);
  webpush.sendNotification(subscription, payload).catch(error => {
    console.error(error.stack);
  });
});
复制代码

以上就是服务端需要做的全部配置。你可以在 GitHub 查阅完整代码。现在，我们就要创建客户端 client.js 与一个 service worker —— worker.js 了。

客户端与 Service Worker

首先，使用 express-static npm 模组，对 Express 应用进行配置，为客户端部署静态资源，将静态资源部署在服务的最顶级目录下。需要注意的是要在处理 /subscribe 路由之后再调用这个 app.use()，否则 Express 将不会根据你的配置处理路由，而是会去查找 subscribe.html 文件。

app.use(require('express-static')('./'));
复制代码

接着，创建 index.html 文件，这个文件将部署为你的应用的入口。文件中仅有的关键之处就是

[译] 由 Node.js 发送 Web 推送通知

鉴权及配置服务端

客户端与 Service Worker

你可能感兴趣的:(javascript,json,后端,ViewUI)