Codelab：构建推送通知客户端

Kate Jeffreys
Kate Jeffreys
Kayce Basques

此 Codelab 将逐步介绍如何构建推送通知客户端。学完本 Codelab 后，您将获得一个客户端，其具有以下特点：

  • 为用户订阅推送通知。
  • 接收推送消息并将其显示为通知。
  • 让用户退订推送通知。

此 Codelab 侧重于帮助您通过实践来学习，不会过多介绍概念。如需了解推送通知的概念，请参阅推送通知的工作原理。

此 Codelab 的服务器代码已经完成。在本 Codelab 中，您只需实现客户端。如需了解如何实现推送通知服务器，请参阅 Codelab：构建推送通知服务器。

查看 push-notifications-client-codelab-complete（来源）可查看完整代码。

浏览器兼容性

此 Codelab 已知可与下列操作系统和浏览器组合配合使用：

  • Windows：Chrome、Edge
  • macOS：Chrome、Firefox
  • Android：Chrome、Firefox

此 Codelab 已知不适用于以下操作系统（或操作系统和浏览器组合）：

  • macOS：Brave、Edge、Safari
  • iOS

设置

获取可修改的代码副本

在本 Codelab 中，您会在这些说明右侧看到一个代码编辑器，我们将其称为 Glitch 界面。

  1. 点击 Remix to Edit 即可修改项目。

设置身份验证

您需要先使用身份验证密钥设置服务器和客户端，然后才能使用推送通知。如需了解原因，请参阅为网页推送协议请求签名。

  1. 在 Glitch 界面中，点击 Tools（工具），然后点击 Terminal（终端）以打开 Glitch 终端。
  2. 在 Glitch 终端中，运行 npx web-push generate-vapid-keys。复制私钥和公钥值。
  3. 在 Glitch 界面中，打开 .env 并更新 VAPID_PUBLIC_KEY 和 VAPID_PRIVATE_KEY。将 VAPID_SUBJECT 设置为 mailto:test@test.test。所有这些值都应用英文双引号括起来。更新完成后，您的 .env 文件应如下所示：
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. 关闭 Glitch 终端。
  1. 打开 public/index.js。
  2. 将 VAPID_PUBLIC_KEY_VALUE_HERE 替换为您的公钥的值。

注册服务工作线程

您的客户端最终需要一个服务工件来接收和显示通知。最好尽早注册 Service Worker。如需了解更多背景信息，请参阅接收并以通知的形式显示推送的消息。

  1. 将 // TODO add startup logic here 注释替换为以下代码：
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  1. 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）全屏。
  1. 按 `Control+Shift+J`（在 Mac 上为 `Command+Option+J`）打开 DevTools。
  2. 点击 Console（控制台）标签。您应该会看到 Service worker was registered. 消息记录到控制台。

请求推送通知权限

您绝不能请求在网页加载时发送推送通知的权限。 相反，您的界面应询问用户是否要接收推送通知。用户明确确认（例如点击按钮）后，您就可以开始正式流程，从浏览器获取推送通知权限。

  1. 在 Glitch 界面中，点击查看源代码以返回您的代码。
  2. 在 public/index.js 中，将 subscribeButtonHandler() 中的 // TODO 注释替换为以下代码：
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  1. 返回“应用”标签页，然后点击订阅推送。您的浏览器或操作系统可能会询问您是否要允许该网站向您发送推送通知。点击允许（或浏览器/操作系统使用的任何等效字词）。您应该会在 Play 管理中心内看到一条消息，指明请求是被接受还是被拒绝。

订阅推送通知

订阅过程涉及与浏览器供应商控制的 Web 服务（称为推送服务）进行交互。获取推送通知订阅信息后，您需要将其发送到服务器，并让服务器将其长期存储在数据库中。如需详细了解订阅流程，请参阅将客户端订阅推送通知。

  1. 将以下突出显示的代码添加到 subscribeButtonHandler()：
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

userVisibleOnly 选项必须为 true。将来或许可以在不显示可见于用户的通知的情况下推送消息（静默推送），但由于隐私问题，浏览器目前不允许执行此操作。

applicationServerKey 值依赖于用于将 base64 字符串转换为 Uint8Array 的实用函数。此值用于在服务器和推送服务之间进行身份验证。

退订推送通知

用户订阅推送通知后，您的界面需要提供退订方式，以防用户改变主意，不想再收到推送通知。

  1. 将 unsubscribeButtonHandler() 中的 // TODO 注释替换为以下代码：
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

接收推送消息并将其显示为通知

如前所述，您需要使用 Service Worker 来处理从服务器推送到客户端的消息的接收和显示。如需了解详情，请参阅接收并以通知的形式显示推送的消息。

  1. 打开 public/service-worker.js 并将 Service Worker 的 push 事件处理脚本中的 // TODO 注释替换为以下代码：
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. 返回应用标签页。
  2. 点击通知我。您应该会收到一条推送通知。
  3. 请尝试在其他浏览器（甚至其他设备）上打开应用标签页的网址，完成订阅工作流，然后点击通知所有人。您应该会在订阅的所有浏览器上收到相同的推送通知。请参阅浏览器兼容性，查看已知可用或不适用的浏览器/操作系统组合列表。

您可以通过多种方式自定义通知。如需了解详情，请参阅 ServiceWorkerRegistration.showNotification() 的参数。

在用户点击通知时打开网址

在实际应用中，您可能会使用通知来重新吸引用户并提示他们访问您的网站。为此，您需要进一步配置 Service Worker。

  1. 将服务工件的 notificationclick 事件处理脚本中的 // TODO 注释替换为以下代码：
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. 返回“应用”标签页，再向自己发送一条通知，然后点击该通知。您的浏览器应会打开一个新标签页并加载 https://web.dev。

后续步骤