บทนำ
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 จะแสดงแถบข้อมูล
อย่างไรก็ตาม โปรดอย่าลืมว่าเมธอด requestPermission จะใช้ได้เฉพาะในตัวแฮนเดิลเหตุการณ์ที่ทริกเกอร์โดยการดำเนินการของผู้ใช้ เช่น เหตุการณ์ของเมาส์หรือคีย์บอร์ด เพื่อหลีกเลี่ยงแถบข้อมูลที่ไม่พึงประสงค์ ในกรณีนี้ การกระทำของผู้ใช้คือการคลิกปุ่มที่มีรหัส "show_button"
ข้อมูลโค้ดด้านบนจะใช้ไม่ได้หากผู้ใช้ไม่ได้คลิกปุ่มหรือลิงก์ที่ทริกเกอร์ requestPermission อย่างชัดเจนในบางจุด
ขั้นตอนที่ 3: แนบ Listener และการดำเนินการอื่นๆ
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);
ในตอนนี้ คุณอาจต้องการห่อหุ้มเหตุการณ์และการดำเนินการทั้งหมดเหล่านี้ด้วยการสร้างคลาสการแจ้งเตือนของคุณเองเพื่อให้โค้ดสะอาดขึ้น แม้ว่าเรื่องนี้จะอยู่นอกเหนือขอบเขตของบทแนะนำนี้ก็ตาม