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

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

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

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

หากรองรับข้อความ Push ให้ใช้คีย์เวิร์ด async และ await เพื่อลงทะเบียน Service Worker และสมัครรับข้อความ Push ต่อไปนี้คือตัวอย่างวิธีดำเนินการโดยใช้ 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.");
}

การรองรับเบราว์เซอร์

  • Chrome: 42
  • Edge: 17.
  • Firefox: 44
  • Safari: 16

แหล่งที่มา

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