- notification.png (99.83 KiB) Viewed 11718 times
สร้างการแจ้งเตือน (Notifications) บนเว็บไซต์ด้วย JavaScript
สำหรับผู้ใช้งานคอมพิวเตอร์หรือโทรศัพท์มือถือน่าจะคุ้นเคยกับการแจ้งเตือนของระบบต่างๆ ที่ทำงานอยู่บนอุปกรณ์ ไม่ว่าจะเป็นการแจ้งเตือนข้อความ อีเมล การอัพเดท หรือแม้แต่ข้อความแจ้งข้อผิดพลาดต่างๆ ซึ่งวัตถุประสงค์ของการแจ้งเตือนเหล่านี้เพื่อช่วยให้ผู้ใช้งานทราบถึงข้อมูลต่างๆ และเพื่อให้ผู้ใช้เกิดการตอบสนองกับระบบมากขึ้น การแจ้งเตือนต่างๆ ที่เกิดขึ้นมีทั้งแบบ Real-time และแบบที่เกิดจากการกระทำของผู้ใช้ ยกตัวอย่างการแจ้งเตือนแบบ
Real-time เช่น เมื่อมีอีเมลใหม่เข้ามา การอัพเดทของวินโดวน์ หรือ ข้อความสนทนาในระบบแชทต่างๆ ส่วนการแจ้งเตือนที่เกิดจากการกระทำของผู้ใช้ เช่น การติดตั้งโปรแกรม เมื่อติดตั้งเสร็จจะมีข้อความแจ้งผู้ใช้ หรือ การจัดการข้อมูลเพิ่ม แก้ไข ลบ ก็จะมีการแจ้งเตือนผลของการทำงานเช่นกัน
สำหรับบทความนี้จะแนะนำวิธีสร้างการแจ้งเตือนบนเว็บไซต์ โดยใช้
JavaScript ภาษาโปรแกรมที่นักพัฒนาเว็บไซต์ใช้เขียนระบบในส่วนการทำงานฝั่ง Client เนื่องจากมันสามารถตอบโต้กับผู้ใช้ได้ทันทีโดยไม่ต้องโหลดหน้าเว็บใหม่ ซึ่งการแจ้งเตือน หรือ Notifications เป็นคุณลักษณะที่ JavaScript สามารถทำได้ แต่อาจจะต้องตรวจสอบเวอร์ชั่นของ
Browser ด้วยว่าสนันสนุนการทำงานหรือไม่
หรือใช้คำสั่ง JavaScript ตรวจสอบก็ได้
โค้ด: เลือกทั้งหมด
if (!("Notification" in window)) {
alert("ไม่สนับสนุนการใช้งาน Notification");
}
ในส่วนขอบเขตการทำงานของการแจ้งเตือนนั้น สามารถแสดงการแจ้งเตือนในหน้าเว็บไซต์ทีเปิด หรือแม้ผู้ใช้จะใช้งานในแท็บอื่นอยู่ แม้กระทั้งย่อหน้าจอโปรแกรม Browser ไว้ ก็สามารถแสดงข้อความแจ้งเตือนได้ ผู้ใช้จะสามารถคลิกที่กล่องข้อความที่แสดงเพื่อกลับมายังหน้าจอเว็บไซต์ที่แจ้งเตือนได้
เริ่มต้นสร้างการแจ้งเตือนด้วย JavaScript
ก่อนอื่นเลยจำเป็นต้องขอสิทธิ์จากผู้ใช้เพื่อเป็นการอนุญาตให้แสดงการแจ้งเตือน
ใช้คำสั่ง
Notification.requestPermission ค่าที่ได้กลับมาจะมี 3 ค่า
-
granted คือ ผู้ใช้อนุญาตให้แสดงการแจ้งเตือน
-
denied คือ ผู้ใช้ไม่อนุญาตให้แสดงการแจ้งเตือน
-
default คือ ใช้ค่าเริ่มต้น กรณีขอสิทธิ์ไปยังผู้ใช้แต่ผู้ใช้ไม่ได้ดำเนินการอะไร Browser จะใช้ค่าเริ่มต้นของระบบซึ่งปกติคือไม่อนุญาตให้แสดง
ตัวอย่างโค้ดขอสิทธิ์จากผู้ใช้และแสดงแจ้งเตือน
โค้ด: เลือกทั้งหมด
// ขอสิทธิ์จากผู้ใช้
Notification.requestPermission(function (permission) {
if (permission === "granted") { // ถ้าผู้ใช้อนุญาตให้ทำคำสั่งด้านล่าง
var notification = new Notification("Mindphp!"); // ให้แสดงการแจ้งเตือนคำว่า Mindphp
}
});
เมื่อผู้ใช้กดอนุญาตหรือปฏิเสธไปแล้ว Browser จะจดจำการเลือกของผู้ใช้และจะนำไปใช้ในครั้งต่อไปสำหรับ Domain นั้นๆ ซึ่งเราจะสามารถเช็คได้จากคำสั่ง
Notification.permission ว่าผู้ใช้เลือกค่าอะไรไว้
ตัวอย่างโค้ดแบบเต็ม
โค้ด: เลือกทั้งหมด
<!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>