使用 Web 推送时的痛点之一是触发推送消息非常“高手”。如需触发推送消息，应用需要按照 Web 推送协议向推送服务发出 POST 请求。若要在所有浏览器上使用推送功能，您需要使用 VAPID（也称为应用服务器密钥），这基本上需要设置一个标头，其中包含一个值，以证明您的应用可以向用户发送消息。如需使用推送消息发送数据，数据需要加密，并且需要添加特定的标头，以便浏览器可以正确解密消息。
触发推送的主要问题是，如果遇到问题，很难诊断问题。随着时间推移和更广泛的浏览器支持，这一改进越来越多，但这绝非易事。因此，我强烈建议使用库来处理推送消息的加密、格式设置和触发。
如果您确实想了解这些库的用途，我们将在下一节中加以介绍。现在，我们将介绍如何管理订阅以及使用现有的 Web 推送库来发出推送请求。
在本部分中，我们将使用 web-push Node 库。其他语言会有差异，但相差不大。我们之所以看到 Node，是因为它属于 JavaScript，对读者而言应该是最方便易用的。
我们将执行以下步骤：
- 将订阅发送到我们的后端并保存。
- 检索已保存的订阅并触发推送消息。
保存订阅
从数据库中保存和查询 PushSubscription 的方法因您的服务器端语言和数据库选择而异，但查看执行方式的示例可能很有用。
在演示网页中，通过发出简单的 POST 请求将 PushSubscription 发送到我们的后端：
function sendSubscriptionToBackEnd(subscription) {
return fetch('/api/save-subscription/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(subscription),
})
.then(function (response) {
if (!response.ok) {
throw new Error('Bad status code from server.');
}
return response.json();
})
.then(function (responseData) {
if (!(responseData.data && responseData.data.success)) {
throw new Error('Bad response from server.');
}
});
}
我们演示中的 Express 服务器具有与 /api/save-subscription/ 端点匹配的请求监听器：
app.post('/api/save-subscription/', function (req, res) {
在此路由中，我们会验证订阅，只是为了确保请求正常且没有满是垃圾：
const isValidSaveRequest = (req, res) => {
// Check the request body has at least an endpoint.
if (!req.body || !req.body.endpoint) {
// Not a valid subscription.
res.status(400);
res.setHeader('Content-Type', 'application/json');
res.send(
JSON.stringify({
error: {
id: 'no-endpoint',
message: 'Subscription must have an endpoint.',
},
}),
);
return false;
}
return true;
};
如果订阅有效，我们需要保存它并返回相应的 JSON 响应：
return saveSubscriptionToDatabase(req.body)
.then(function (subscriptionId) {
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({data: {success: true}}));
})
.catch(function (err) {
res.status(500);
res.setHeader('Content-Type', 'application/json');
res.send(
JSON.stringify({
error: {
id: 'unable-to-save-subscription',
message:
'The subscription was received but we were unable to save it to our database.',
},
}),
);
});
此演示使用 nedb 存储订阅，它是一个简单的基于文件的数据库，但您可以使用您选择的任何数据库。我们之所以使用它，是因为它不需要进行任何设置。对于生产环境，您需要使用更可靠的方法。（我倾向于使用性能良好的旧版 MySQL。）
function saveSubscriptionToDatabase(subscription) {
return new Promise(function (resolve, reject) {
db.insert(subscription, function (err, newDoc) {
if (err) {
reject(err);
return;
}
resolve(newDoc._id);
});
});
}
发送推送消息
当涉及到发送推送消息时，我们最终需要通过某个事件来触发向用户发送消息的过程。一种常见的方法是创建管理页面，您可以在该页面配置和触发推送消息。但是，您可以创建一个在本地运行的程序，或者通过任何其他允许访问 PushSubscription 列表并运行代码来触发推送消息的方法。
我们的演示版有一个“管理员点赞”页面，您可以通过该页面触发推送。它只是一个演示页面，因此是一个公开页面。
我会详细讲述使演示正常运行的每个步骤。这些只是简单的小步骤，让每个人都可以跟着学习，包括 Node 新手。
在讨论订阅用户时，我们介绍了如何向 subscribe() 选项添加 applicationServerKey。在后端，我们需要这个私钥。
在演示中，这些值将按如下方式添加到我们的 Node 应用中（我知道这是枯燥乏味的代码，但只是想让您知道这并无魔法）：
const vapidKeys = {
publicKey:
'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
};
接下来，我们需要为 Node 服务器安装 web-push 模块：
npm install web-push --save
然后，在我们的 Node 脚本中，我们需要 web-push 模块，如下所示：
const webpush = require('web-push');
现在，我们可以开始使用 web-push 模块了。首先，我们需要将应用服务器密钥的相关信息告知 web-push 模块。（请记住，它们也称为 VAPID 键，因为这是规范的名称。）
const vapidKeys = {
publicKey:
'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
};
webpush.setVapidDetails(
'mailto:web-push-book@gauntface.com',
vapidKeys.publicKey,
vapidKeys.privateKey,
);
请注意，我们还添加了“mailto:”字符串。此字符串必须是网址或 mailto 电子邮件地址。这条信息将作为触发推送请求的一部分实际发送到 Web 推送服务。这样做是为了让当 Web 推送服务需要与发送者联系时，他们能够获得一些信息。
至此，web-push 模块已准备就绪，可供使用，下一步是触发推送消息。
此演示使用模拟管理控制台来触发推送消息。
点击“Trigger Push Message”按钮会将 POST 请求发送到 /api/trigger-push-msg/，这是我们的后端发送推送消息的信号，因此我们为此端点以极速方式创建路由：
app.post('/api/trigger-push-msg/', function (req, res) {
收到此请求后，我们会从数据库中获取订阅，对于每个订阅，我们都会触发推送消息。
return getSubscriptionsFromDatabase().then(function (subscriptions) {
let promiseChain = Promise.resolve();
for (let i = 0; i < subscriptions.length; i++) {
const subscription = subscriptions[i];
promiseChain = promiseChain.then(() => {
return triggerPushMsg(subscription, dataToSend);
});
}
return promiseChain;
});
然后，函数 triggerPushMsg() 可以使用 web-push 库向提供的订阅发送消息。
const triggerPushMsg = function (subscription, dataToSend) {
return webpush.sendNotification(subscription, dataToSend).catch((err) => {
if (err.statusCode === 404 || err.statusCode === 410) {
console.log('Subscription has expired or is no longer valid: ', err);
return deleteSubscriptionFromDatabase(subscription._id);
} else {
throw err;
}
});
};
调用 webpush.sendNotification() 将返回一个 promise。如果消息已成功发送，promise 将解析，而我们无需执行任何操作。如果 promise 拒绝，您需要检查错误，因为它会告知您 PushSubscription 是否仍有效。
如需确定推送服务的错误类型，最好查看状态代码。错误消息因推送服务而异，有些消息比其他的更实用。
在此示例中，它会检查状态代码 404 和 410，它们分别是“Not Found”和“Gone”的 HTTP 状态代码。如果我们收到此类消息，则表示订阅已过期或不再有效。在这些情况下，我们需要从数据库中移除订阅。
如果发生其他错误，我们只需 throw err，这会导致 triggerPushMsg() 返回的 promise 会拒绝。
在下一部分中，我们会更详细地介绍 Web 推送协议，将介绍一些其他状态代码。
遍历订阅之后，我们需要返回 JSON 响应。
.then(() => {
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({ data: { success: true } }));
})
.catch(function(err) {
res.status(500);
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({
error: {
id: 'unable-to-send-messages',
message: `We were unable to send messages to all subscriptions : ` +
`'${err.message}'`
}
}));
});
下面介绍了主要的实现步骤：
- 创建一个 API，以将订阅从我们的网页发送到后端，以便将其保存到数据库。
- 创建一个 API 以触发推送消息的发送（在本例中，即从假装管理面板中调用的 API）。
- 从我们的后端检索所有订阅，并使用其中一个 web-push 库向每个订阅发送消息。
无论使用哪个后端（Node、PHP、Python 等），实现推送的步骤都是相同的。
接下来，这些网络推送库到底有什么用？