使用 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
模块已准备就绪,可供使用,下一步是触发推送消息。
此演示使用模拟管理控制台来触发推送消息。
![“管理”页面的屏幕截图。](https://web.developers.google.cn/static/articles/sending-messages-with-web-push-libraries/image/screenshot-the-admin-pag-7bb2e26069ffc.png?authuser=5&hl=sk)
点击“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 等),实现推送的步骤都是相同的。
接下来,这些网络推送库到底有什么用?