0Pricing
Vue Academy · บทเรียน

การแจ้งเตือนแบบพุชใน Vue PWA

Push API, Notification API, คีย์ VAPID การสมัครรับของผู้ใช้ และการส่งจากเซิร์ฟเวอร์

การแจ้งเตือนแบบพุชใน Vue PWA เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การแจ้งเตือนแบบพุชใน PWA

Web Push ช่วยให้เซิร์ฟเวอร์ส่งการแจ้งเตือนให้ผู้ใช้ได้แม้แอปจะปิดอยู่ โดยทำงานร่วมกันระหว่างอินเทอร์เฟซการแจ้งเตือน อินเทอร์เฟซการพุช และตัวทำงานบริการ ซึ่งทั้งหมดอาศัย permission ที่ผู้ใช้อนุญาตอย่างชัดเจน

การขอ permission

คุณต้องขอ permission ก่อนสมัครรับข้อมูล การเรียก Notification.requestPermission() จะคืนค่าเป็นพรอมิสที่เปลี่ยนสถานะเป็น "granted", "denied" หรือ "default"

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

เรียกใช้จากการกระทำของผู้ใช้

เบราว์เซอร์กำหนดให้กล่องขอ permission ต้องตามหลังการกระทำของผู้ใช้ เช่น การคลิกปุ่ม อย่าขอ permission ตอนโหลดหน้า เพราะเบราว์เซอร์อาจเพิกเฉยหรือสร้างความรำคาญให้ผู้ใช้

<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)
});

เซิร์ฟเวอร์ส่งการพุช

แบ็กเอนด์ของคุณใช้ไลบรารี Web Push และคีย์ส่วนตัว 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 เมื่อสมัครรับข้อมูลแบบพุช

สรุปทบทวน

Web Push เริ่มต้นด้วย Notification.requestPermission() จากการกระทำของผู้ใช้ จากนั้นจึงใช้ registration.pushManager.subscribe พร้อม userVisibleOnly: true และ applicationServerKey ส่งการสมัครรับข้อมูลไปยังเซิร์ฟเวอร์ของคุณ ซึ่งจะส่งเพย์โหลดที่ตัวทำงานบริการรับผ่านเหตุการณ์ push แล้วแสดงด้วย showNotification

คำถามที่พบบ่อย

บทเรียน “การแจ้งเตือนแบบพุชใน Vue PWA” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแจ้งเตือนแบบพุชใน Vue PWA” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแจ้งเตือนแบบพุชใน Vue PWA”

Push API, Notification API, คีย์ VAPID การสมัครรับของผู้ใช้ และการส่งจากเซิร์ฟเวอร์ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การแจ้งเตือนแบบพุชใน Vue PWA” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า vite-plugin-pwa
  2. กลยุทธ์ Service Worker
  3. การรองรับออฟไลน์และการซิงค์เบื้องหลัง
  4. การแจ้งเตือนแบบพุชใน Vue PWA
← กลับไปที่ Vue Academy