สำหรับผู้ใช้งานคอมพิวเตอร์หรือโทรศัพท์มือถือน่าจะคุ้นเคยกับการแจ้งเตือนของระบบต่างๆ ที่ทำงานอยู่บนอุปกรณ์ ไม่ว่าจะเป็นการแจ้งเตือนข้อความ อีเมล การอัพเดท หรือแม้แต่ข้อความแจ้งข้อผิดพลาดต่างๆ ซึ่งวัตถุประสงค์ของการแจ้งเตือนเหล่านี้เพื่อช่วยให้ผู้ใช้งานทราบถึงข้อมูลต่างๆ และเพื่อให้ผู้ใช้เกิดการตอบสนองกับระบบมากขึ้น การแจ้งเตือนต่างๆ ที่เกิดขึ้นมีทั้งแบบ Real-time และแบบที่เกิดจากการกระทำของผู้ใช้ ยกตัวอย่างการแจ้งเตือนแบบ Real-time เช่น เมื่อมีอีเมลใหม่เข้ามา การอัพเดทของวินโดวน์ หรือ ข้อความสนทนาในระบบแชทต่างๆ ส่วนการแจ้งเตือนที่เกิดจากการกระทำของผู้ใช้ เช่น การติดตั้งโปรแกรม เมื่อติดตั้งเสร็จจะมีข้อความแจ้งผู้ใช้ หรือ การจัดการข้อมูลเพิ่ม แก้ไข ลบ ก็จะมีการแจ้งเตือนผลของการทำงานเช่นกัน
สำหรับบทความนี้จะแนะนำวิธีสร้างการแจ้งเตือนบนเว็บไซต์ โดยใช้ JavaScript ภาษาโปรแกรมที่นักพัฒนาเว็บไซต์ใช้เขียนระบบในส่วนการทำงานฝั่ง Client เนื่องจากมันสามารถตอบโต้กับผู้ใช้ได้ทันทีโดยไม่ต้องโหลดหน้าเว็บใหม่ ซึ่งการแจ้งเตือน หรือ Notifications เป็นคุณลักษณะที่ JavaScript สามารถทำได้ แต่อาจจะต้องตรวจสอบเวอร์ชั่นของ Browser ด้วยว่าสนันสนุนการทำงานหรือไม่
หรือใช้คำสั่ง JavaScript ตรวจสอบก็ได้
โค้ด: เลือกทั้งหมด
if (!("Notification" in window)) {
alert("ไม่สนับสนุนการใช้งาน Notification");
}
เริ่มต้นสร้างการแจ้งเตือนด้วย JavaScript
ก่อนอื่นเลยจำเป็นต้องขอสิทธิ์จากผู้ใช้เพื่อเป็นการอนุญาตให้แสดงการแจ้งเตือน
ใช้คำสั่ง Notification.requestPermission ค่าที่ได้กลับมาจะมี 3 ค่า
- granted คือ ผู้ใช้อนุญาตให้แสดงการแจ้งเตือน
- denied คือ ผู้ใช้ไม่อนุญาตให้แสดงการแจ้งเตือน
- default คือ ใช้ค่าเริ่มต้น กรณีขอสิทธิ์ไปยังผู้ใช้แต่ผู้ใช้ไม่ได้ดำเนินการอะไร Browser จะใช้ค่าเริ่มต้นของระบบซึ่งปกติคือไม่อนุญาตให้แสดง
ตัวอย่างโค้ดขอสิทธิ์จากผู้ใช้และแสดงแจ้งเตือน
โค้ด: เลือกทั้งหมด
// ขอสิทธิ์จากผู้ใช้
Notification.requestPermission(function (permission) {
if (permission === "granted") { // ถ้าผู้ใช้อนุญาตให้ทำคำสั่งด้านล่าง
var notification = new Notification("Mindphp!"); // ให้แสดงการแจ้งเตือนคำว่า Mindphp
}
});
ตัวอย่างโค้ดแบบเต็ม
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Mindphp.Com Notification
</title>
<script>
function notifyMe() {
// ตรวจสอบว่า browser รองรับการแสดงแจ้งเตือนหรือไม่
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// ตรวจสอบค่าการอนุญาตที่ผู้ใช้เคยเลือกไว้
else if (Notification.permission === "granted") {
// ถ้าผู้ใช้เคยอนุญาตไว้แล้วให้แสดงแจ้งเตือน
var notification = new Notification("Mindphp!");
}
// กรณีที่ผู้ใช้ไม่ได้ปฏิเสธการอนุญาตไว้ ให้ขอสิทธิ์ผู้ใช้เพื่อแสดงการแจ้งเตือน
else if (Notification.permission !== "denied") {
// คำสั่งสำหรับขอสิทธิ์จากผู้ใช้
Notification.requestPermission(function(permission) {
if (permission === "granted") { // ถ้าผู้ใช้อนุญาตให้ทำคำสั่งด้านล่าง
// แสดงการแจ้งเตือนคำว่า Mindphp
var notification = new Notification("Mindphp!");
}
});
}
}
</script>
</head>
<body>
<button onclick="notifyMe()">แจ้งเตือน!</button>
</body>
</html>