在此 Codelab 中，您将构建一个推送通知服务器。服务器将管理推送订阅列表并向其发送通知。
客户端代码已完成 - 在此 Codelab 中，您将使用服务器端功能。
重新合成示例应用并在新标签页中查看
系统会自动屏蔽嵌入式 Glitch 应用的通知，因此您无法在此页面上预览该应用。此时，您需要执行以下操作：
- 点击 Remix to Edit 以使项目可修改。
- 如需预览网站，请按查看应用。然后按
全屏
。
实时应用会在新的 Chrome 标签页中打开。在嵌入式 Glitch 中，点击 View Source 以再次显示代码。
在学习此 Codelab 时，请更改本页面上嵌入式 Glitch 中的代码。使用已发布的应用刷新新标签页以查看更改。
熟悉起始应用及其代码
首先，查看应用的客户端界面。
在新的 Chrome 标签页中：
按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。 点击控制台标签页。
尝试点击界面中的按钮（检查 Chrome 开发者控制台的输出）。
注册 Service Worker 可以在 Glitch 项目网址范围内注册 Service Worker。取消注册 Service Worker 将移除 Service Worker。如果向其附加了推送订阅，则推送订阅也将被停用。
订阅以推送会创建一个推送订阅。仅当已注册 Service Worker 且客户端代码中存在
VAPID_PUBLIC_KEY常量时（稍后将对此进行详细介绍），因此目前还不能点击它。当您有有效的推送订阅后，通知当前订阅会请求服务器向其端点发送通知。
通知所有订阅会告知服务器向其数据库中的所有订阅端点发送通知。
请注意，其中一些端点可能处于非活跃状态。在服务器发送通知时，订阅随时可能消失。
我们来看一下服务器端发生了什么。如需查看来自服务器代码的消息，请查看 Glitch 界面内的 Node.js 日志。
在 Glitch 应用中，点击 Tools ->日志。
您可能会看到类似
Listening on port 3000的消息。如果您在已发布的应用界面中尝试点击通知当前订阅或通知所有订阅，则还会看到以下消息：
TODO: Implement sendNotifications() Endpoints to send to: []
现在，我们来看一些代码。
public/index.js包含完成后的客户端代码。它执行功能检测、注册和取消注册 Service Worker，以及控制用户对推送通知的订阅。此外，它还会向服务器发送有关新增订阅和已删除的订阅的信息。由于您只需要处理服务器功能，因此无需修改此文件（除了填充
VAPID_PUBLIC_KEY常量之外）。public/service-worker.js是一个简单的 Service Worker，用于捕获推送事件并显示通知。/views/index.html包含应用界面。.env包含 Glitch 在启动时加载到应用服务器的环境变量。您将使用身份验证详细信息填充.env，以便发送通知。server.js是您在此 Codelab 中主要使用的文件。起始代码会创建一个简单的 Express Web 服务器。您有四个 TODO 项，在代码注释中以
TODO:进行了标记。您需要执行的操作：在此 Codelab 中，您将逐个处理这些 TODO 项。
生成和加载 VAPID 详细信息
您的第一个 TODO 项是生成 VAPID 详细信息，将其添加到 Node.js 环境变量，然后使用新值更新客户端和服务器代码。
背景
用户订阅通知时，需要信任应用及其服务器的身份。用户还需要确信，当收到通知时，通知来自设置订阅的同一应用。他们还需要相信其他人都无法阅读通知内容。
用于确保推送通知安全且私密的协议称为 Web 推送的自愿性应用服务器标识 (VAPID)。VAPID 使用公钥加密来验证应用、服务器和订阅端点的身份，并加密通知内容。
在此应用中，您将使用 web-push npm 软件包生成 VAPID 密钥，以及加密和发送通知。
实现
在此步骤中，为您的应用生成一对 VAPID 密钥，并将其添加到环境变量中。在服务器中加载环境变量，并将公钥作为常量添加到客户端代码中。
使用
web-push库的generateVAPIDKeys函数创建一对 VAPID 密钥。在 server.js 中，移除以下代码行周围的注释：
server.js// Generate VAPID keys (only do this once). /* * const vapidKeys = webpush.generateVAPIDKeys(); * console.log(vapidKeys); */ const vapidKeys = webpush.generateVAPIDKeys(); console.log(vapidKeys);Glitch 重启您的应用后，它会将生成的密钥输出到 Glitch 界面（而不是 Chrome 控制台）内的 Node.js 日志中。如需查看 VAPID 密钥，请选择工具 ->Glitch 界面中的日志。
确保从同一密钥对复制公钥和私钥！
每次您修改代码时，Glitch 都会重启您的应用，因此随着更多输出内容陆续显示，您生成的第一对密钥可能会滚出视图。
在 .env 中，复制并粘贴 VAPID 密钥。将键括在英文双引号 (
"...") 中。对于
VAPID_SUBJECT，您可以输入"mailto:test@test.test"。.env# process.env.SECRET VAPID_PUBLIC_KEY= VAPID_PRIVATE_KEY= VAPID_SUBJECT= VAPID_PUBLIC_KEY="BN3tWzHp3L3rBh03lGLlLlsq..." VAPID_PRIVATE_KEY="I_lM7JMIXRhOk6HN..." VAPID_SUBJECT="mailto:test@test.test"在 server.js 中，再次注释掉这两行代码，因为您只需要生成一次 VAPID 密钥。
server.js// Generate VAPID keys (only do this once). /* const vapidKeys = webpush.generateVAPIDKeys(); console.log(vapidKeys); */ const vapidKeys = webpush.generateVAPIDKeys(); console.log(vapidKeys);在 server.js 中，从环境变量加载 VAPID 详细信息。
server.jsconst vapidDetails = { // TODO: Load VAPID details from environment variables. publicKey: process.env.VAPID_PUBLIC_KEY, privateKey: process.env.VAPID_PRIVATE_KEY, subject: process.env.VAPID_SUBJECT }将公钥也复制并粘贴到客户端代码中。
在 public/index.js 中，为
VAPID_PUBLIC_KEY输入与复制到 .env 文件中的值相同的值：public/index.js// Copy from .env const VAPID_PUBLIC_KEY = ''; const VAPID_PUBLIC_KEY = 'BN3tWzHp3L3rBh03lGLlLlsq...'; ````
实现发送通知的功能
背景
在此应用中，您将使用 web-push npm 软件包发送通知。
此软件包会在调用 webpush.sendNotification() 时自动加密通知，因此您无需担心。
web-push 可接受多种通知选项，例如，您可以在邮件中附加标头并指定内容编码。
在此 Codelab 中，您只会使用两个通过以下代码行定义的选项：
let options = {
TTL: 10000; // Time-to-live. Notifications expire after this.
vapidDetails: vapidDetails; // VAPID keys from .env
};
TTL（存留时间）选项用于设置通知的到期超时时间。这样，服务器就可以避免在通知不再相关时向用户发送通知。
vapidDetails 选项包含您从环境变量加载的 VAPID 密钥。
实现
在 server.js 中，修改 sendNotifications 函数，如下所示：
server.js
function sendNotifications(database, endpoints) {
// TODO: Implement functionality to send notifications.
console.log('TODO: Implement sendNotifications()');
console.log('Endpoints to send to: ', endpoints);
let notification = JSON.stringify(createNotification());
let options = {
TTL: 10000, // Time-to-live. Notifications expire after this.
vapidDetails: vapidDetails // VAPID keys from .env
};
endpoints.map(endpoint => {
let subscription = database[endpoint];
webpush.sendNotification(subscription, notification, options);
});
}
由于 webpush.sendNotification() 会返回 promise，因此您可以轻松添加错误处理。
在 server.js 中，再次修改 sendNotifications 函数：
server.js
function sendNotifications(database, endpoints) {
let notification = JSON.stringify(createNotification());
let options = {
TTL: 10000; // Time-to-live. Notifications expire after this.
vapidDetails: vapidDetails; // VAPID keys from .env
};
endpoints.map(endpoint => {
let subscription = database[endpoint];
webpush.sendNotification(subscription, notification, options);
let id = endpoint.substr((endpoint.length - 8), endpoint.length);
webpush.sendNotification(subscription, notification, options)
.then(result => {
console.log(`Endpoint ID: ${id}`);
console.log(`Result: ${result.statusCode} `);
})
.catch(error => {
console.log(`Endpoint ID: ${id}`);
console.log(`Error: ${error.body} `);
});
});
}
处理新订阅
背景
用户订阅推送通知会发生以下情况：
用户点击订阅推送。
客户端使用
VAPID_PUBLIC_KEY常量（服务器的公共 VAPID 密钥）生成唯一的服务器专用subscription对象。subscription对象如下所示：{ "endpoint": "https://fcm.googleapis.com/fcm/send/cpqAgzGzkzQ:APA9...", "expirationTime": null, "keys": { "p256dh": "BNYDjQL9d5PSoeBurHy2e4d4GY0sGJXBN...", "auth": "0IyyvUGNJ9RxJc83poo3bA" } }客户端向
/add-subscription网址发送POST请求，并在正文中包含字符串化 JSON 格式的订阅。服务器从 POST 请求的正文中检索字符串化的
subscription，将其解析回 JSON，并将其添加到订阅数据库中。数据库使用自己的端点作为键来存储订阅：
{
"https://fcm...1234": {
endpoint: "https://fcm...1234",
expirationTime: ...,
keys: { ... }
},
"https://fcm...abcd": {
endpoint: "https://fcm...abcd",
expirationTime: ...,
keys: { ... }
},
"https://fcm...zxcv": {
endpoint: "https://fcm...zxcv",
expirationTime: ...,
keys: { ... }
},
}
现在，新订阅可供服务器使用，用于发送通知。
实现
新订阅的请求到达 /add-subscription 路由，该路由是一个 POST 网址。您将在 server.js 中看到桩路由处理程序：
server.js
app.post('/add-subscription', (request, response) => {
// TODO: implement handler for /add-subscription
console.log('TODO: Implement handler for /add-subscription');
console.log('Request body: ', request.body);
response.sendStatus(200);
});
在您的实现中，此处理程序必须：
- 从请求的正文中检索新订阅。
- 访问有效订阅的数据库。
- 将新订阅添加到有效订阅列表中。
如需处理新订阅，请执行以下操作：
在 server.js 中，按如下方式修改
/add-subscription的路由处理程序：server.js
app.post('/add-subscription', (request, response) => {
// TODO: implement handler for /add-subscription
console.log('TODO: Implement handler for /add-subscription');
console.log('Request body: ', request.body);
let subscriptions = Object.assign({}, request.session.subscriptions);
subscriptions[request.body.endpoint] = request.body;
request.session.subscriptions = subscriptions;
response.sendStatus(200);
});
处理订阅取消
背景
服务器并不总是知道订阅何时变为非活动状态，例如，当浏览器关闭 Service Worker 时，系统可能会擦除订阅。
不过，服务器可以了解通过应用界面取消的订阅。在此步骤中，您将实现从数据库中移除订阅的功能。
这样，服务器可以避免向不存在的端点发送大量通知。显然，这对于简单的测试应用而言没有什么重要性，但在更大范围内却变得重要。
实现
取消订阅的请求会转到 /remove-subscription POST 网址。
server.js 中的桩路由处理程序如下所示：
server.js
app.post('/remove-subscription', (request, response) => {
// TODO: implement handler for /remove-subscription
console.log('TODO: Implement handler for /remove-subscription');
console.log('Request body: ', request.body);
response.sendStatus(200);
});
在您的实现中，此处理程序必须：
- 从请求的正文中检索已取消订阅的端点。
- 访问有效订阅的数据库。
- 从有效订阅列表中移除已取消的订阅。
来自客户端的 POST 请求的正文包含您需要移除的端点：
{
"endpoint": "https://fcm.googleapis.com/fcm/send/cpqAgzGzkzQ:APA9..."
}
如需处理订阅取消，请执行以下操作：
在 server.js 中，按如下方式修改
/remove-subscription的路由处理程序：server.js
app.post('/remove-subscription', (request, response) => {
// TODO: implement handler for /remove-subscription
console.log('TODO: Implement handler for /remove-subscription');
console.log('Request body: ', request.body);
let subscriptions = Object.assign({}, request.session.subscriptions);
delete subscriptions[request.body.endpoint];
request.session.subscriptions = subscriptions;
response.sendStatus(200);
});