การใช้ Notifications API

Ernest Delgado
Ernest Delgado
X

บทนำ

Notifications API ช่วยให้คุณแสดงการแจ้งเตือนต่อผู้ใช้สำหรับเหตุการณ์หนึ่งๆ ได้ ทั้งแบบแอ็กทีฟ (อีเมลใหม่ ทวีต หรือกิจกรรมในปฏิทิน) และจากการโต้ตอบของผู้ใช้ ไม่ว่าแท็บใดจะมีโฟกัส มีข้อกำหนดฉบับร่าง แต่ยังไม่มีมาตรฐานใดๆ ในปัจจุบัน

คุณสามารถทำตามขั้นตอนง่ายๆ ต่อไปนี้เพื่อติดตั้งใช้งานการแจ้งเตือนได้ภายในไม่กี่นาที

ขั้นตอนที่ 1: ตรวจสอบการรองรับ Notifications API

เราตรวจสอบว่าระบบรองรับ webkitNotifications หรือไม่ โปรดทราบว่าชื่อ webkitNotifications นั้นมาจากการที่เป็นส่วนหนึ่งของข้อกำหนดฉบับร่าง ข้อกำหนดฉบับสุดท้ายจะมีฟังก์ชัน notifications() แทน

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

ขั้นตอนที่ 2: อนุญาตให้ผู้ใช้ให้สิทธิ์แก่เว็บไซต์เพื่อแสดงการแจ้งเตือน

ตัวสร้างที่เรากล่าวถึงจะแสดงข้อผิดพลาดด้านความปลอดภัยหากผู้ใช้ไม่ได้ให้สิทธิ์แก่เว็บไซต์ด้วยตนเองเพื่อแสดงการแจ้งเตือน หากต้องการจัดการข้อยกเว้น คุณสามารถใช้คำสั่ง try-catch หรือจะใช้เมธอด checkPermission เพื่อวัตถุประสงค์เดียวกันก็ได้

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

หากเว็บแอปพลิเคชันไม่มีสิทธิ์แสดงการแจ้งเตือน วิธีการ requestPermission จะแสดงแถบข้อมูลต่อไปนี้

แถบข้อมูลสิทธิ์การแจ้งเตือนใน Google Chrome
แถบข้อมูลสิทธิ์การแจ้งเตือนใน Google Chrome

อย่างไรก็ตาม โปรดทราบว่าสำคัญมากที่ควรจำไว้ว่าเมธอด requestPermission จะทำงานในตัวแฮนเดิลเหตุการณ์ที่เรียกให้แสดงโดยการกระทำของผู้ใช้เท่านั้น เช่น เหตุการณ์เมาส์หรือแป้นพิมพ์ เพื่อหลีกเลี่ยงแถบข้อมูลที่ไม่พึงประสงค์ ในกรณีนี้ การกระทำของผู้ใช้คือการคลิกปุ่มที่มีรหัส "show_button" ข้อมูลโค้ดด้านบนจะไม่ทำงานหากผู้ใช้ไม่ได้คลิกปุ่มหรือลิงก์ที่เรียกให้ requestPermission แสดงขึ้นมา

ขั้นตอนที่ 3: แนบ Listeners และการดำเนินการอื่นๆ

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

ณ จุดนี้ คุณอาจต้องการรวมเหตุการณ์และการดําเนินการทั้งหมดเหล่านี้ไว้ในคลาส Notification ของคุณเองเพื่อให้โค้ดสะอาดขึ้น แต่การดำเนินการนี้อยู่นอกขอบเขตของบทแนะนํานี้