หน้านี้ได้รับการแปลโดย Cloud Translation API

ข้อความ Push ได้รับการรองรับในเบราว์เซอร์ต่างๆ แล้ว

ส่งการแจ้งเตือนที่ทันท่วงทีและเป็นประโยชน์ไปยังผู้ใช้

Thomas Steiner

การแจ้งเตือนแบบพุชได้รับการกำหนดมาตรฐานในปี 2016 พร้อมกับการเปิดตัว Push API และ Notification API ซึ่งเป็นส่วนหนึ่งของ Web Applications Working Group ของ W3C API เหล่านี้มีฟังก์ชันที่จำเป็นสำหรับนักพัฒนาเว็บในการรวมข้อความพุชเข้ากับเว็บแอปพลิเคชัน และสำหรับผู้ใช้ในการรับและโต้ตอบกับข้อความแจ้งในเว็บเบราว์เซอร์ ข้อความพุชคือการแจ้งเตือนที่ส่งไปยังเว็บเบราว์เซอร์ของผู้ใช้จากเว็บไซต์หรือแอปพลิเคชันที่ผู้ใช้เคยให้สิทธิ์ส่งการแจ้งเตือนไว้ ข้อความเหล่านี้สามารถใช้เพื่อแจ้งเตือนผู้ใช้เกี่ยวกับเนื้อหาหรือข้อมูลอัปเดตใหม่ๆ เตือนผู้ใช้เกี่ยวกับกิจกรรมหรือกำหนดเวลาที่กำลังจะมาถึง หรือให้ข้อมูลสำคัญอื่นๆ ข้อความ Push มีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันที่ต้องส่งข้อมูลที่เกี่ยวข้องและทันท่วงทีให้แก่ผู้ใช้ เช่น แอปข่าวหรือแอปกีฬา หรือสำหรับเว็บไซต์อีคอมเมิร์ซที่ต้องการส่งการแจ้งเตือนเกี่ยวกับข้อเสนอพิเศษหรือการลดราคาให้แก่ผู้ใช้

หากต้องการลงชื่อสมัครรับการแจ้งเตือนแบบพุช ให้ตรวจสอบก่อนว่าเบราว์เซอร์รองรับการแจ้งเตือนดังกล่าวหรือไม่ โดยดูออบเจ็กต์ serviceWorker และ PushManager ในออบเจ็กต์ navigator และ window

หากรองรับการแจ้งเตือนแบบพุช ให้ใช้คีย์เวิร์ด async และ await เพื่อลงทะเบียน Service Worker และสมัครรับการแจ้งเตือนแบบพุช ตัวอย่างวิธีดำเนินการโดยใช้ JavaScript มีดังนี้

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Browser Support

Source

อ่านเพิ่มเติม