Vue Academy · 课时

Vue PWA 中的推送通知

Q: 「Vue PWA 中的推送通知」这节课中我会学到什么？

Push API、Notification API、VAPID 密钥、订阅用户，以及从服务端发送通知 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

Push API、Notification API、VAPID 密钥、订阅用户，以及从服务端发送通知

Vue PWA 中的推送通知 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

PWA 中的推送通知

网页推送可以让服务器在应用关闭时仍向用户发送通知。它结合了通知接口、推送接口和服务工作线程，并且都建立在用户明确授予的权限之上。

请求权限

订阅之前必须请求权限。Notification.requestPermission() 会返回一个 Promise，最终状态为“granted”“denied”或“default”。

const permission = await Notification.requestPermission();
if (permission === "granted") {
  // proceed to subscribe
}

由用户手势触发

浏览器要求权限提示必须跟随按钮点击等用户操作。切勿在页面加载时请求权限——请求会被忽略，或者会打扰用户。

<button @click="enableNotifications">
  Enable notifications
</button>

获取服务工作线程注册对象

推送订阅保存在处于活动状态的服务工作线程注册对象中。请等待 navigator.serviceWorker.ready 来获取它。

const registration = await navigator.serviceWorker.ready;

applicationServerKey

推送使用 VAPID 密钥。服务器保存私钥；客户端使用公钥进行订阅，并将其转换为 Uint8Array。

function urlBase64ToUint8Array(base64) {
  const padding = "=".repeat((4 - base64.length % 4) % 4);
  const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

pushManager.subscribe

通过注册对象的 pushManager 进行订阅。将 userVisibleOnly: true 设为启用，并传入转换后的 applicationServerKey。

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});

为什么需要 userVisibleOnly

userVisibleOnly: true 保证每次推送都会显示可见通知。浏览器要求这样设置，是为了防止静默的后台跟踪。

向服务器发送订阅

订阅对象包含服务器所需的端点和密钥。请使用 POST 将其发送到后端，以便保存起来供日后发送。

await fetch("/api/subscribe", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription)
});

服务器发送推送

后端使用网页推送库和 VAPID 私钥，将有效载荷推送到已保存的端点。

// Node backend (web-push library)
webpush.sendNotification(
  subscription,
  JSON.stringify({ title: "Hello", body: "New message" })
);

在服务工作线程中接收推送

服务工作线程处理 push 事件，并调用 showNotification 来显示通知。

// service worker
self.addEventListener("push", (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/pwa-192.png"
    })
  );
});

处理通知点击

使用 notificationclick 事件响应点击，以便聚焦应用窗口，或在正确的页面打开应用。

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/inbox"));
});

快速检查

订阅推送时，为什么必须使用 userVisibleOnly: true？

回顾

网页推送从用户手势触发的 Notification.requestPermission() 开始，然后使用 userVisibleOnly: true 和 applicationServerKey 调用 registration.pushManager.subscribe。将订阅发送到服务器，服务器推送有效载荷后，服务工作线程会在 push 事件中接收它，并使用 showNotification 显示通知。

常见问题解答

「Vue PWA 中的推送通知」课时是免费的吗？

是的 — 「Vue PWA 中的推送通知」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Vue PWA 中的推送通知」这节课中我会学到什么？

Push API、Notification API、VAPID 密钥、订阅用户，以及从服务端发送通知你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Vue PWA 中的推送通知」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy