สร้างการแจ้งเตือน (Notifications) บนเว็บไซต์ด้วย JavaScript


รวมโค้ด AJAX Javascript Library jQuery Framework ต่างๆ ที่ใช้ คู่กับ php Script Ajax โค้ด Ajax Prototype UI แนะนำได้ที่นี่

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10600
Joined: 18/04/2012 9:39 am

สร้างการแจ้งเตือน (Notifications) บนเว็บไซต์ด้วย JavaScript

Post by tsukasaz » 26/06/2018 2:34 pm

สร้างการแจ้งเตือน (Notifications) บนเว็บไซต์ด้วย JavaScript notification.png
notification.png (99.83 KiB) Viewed 4175 times
สร้างการแจ้งเตือน (Notifications) บนเว็บไซต์ด้วย JavaScript

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

สำหรับบทความนี้จะแนะนำวิธีสร้างการแจ้งเตือนบนเว็บไซต์ โดยใช้ JavaScript ภาษาโปรแกรมที่นักพัฒนาเว็บไซต์ใช้เขียนระบบในส่วนการทำงานฝั่ง Client เนื่องจากมันสามารถตอบโต้กับผู้ใช้ได้ทันทีโดยไม่ต้องโหลดหน้าเว็บใหม่ ซึ่งการแจ้งเตือน หรือ Notifications เป็นคุณลักษณะที่ JavaScript สามารถทำได้ แต่อาจจะต้องตรวจสอบเวอร์ชั่นของ Browser ด้วยว่าสนันสนุนการทำงานหรือไม่
notification_support.png
หรือใช้คำสั่ง JavaScript ตรวจสอบก็ได้

Code: Select all

if (!("Notification" in window)) {
	alert("ไม่สนับสนุนการใช้งาน Notification");
}
ในส่วนขอบเขตการทำงานของการแจ้งเตือนนั้น สามารถแสดงการแจ้งเตือนในหน้าเว็บไซต์ทีเปิด หรือแม้ผู้ใช้จะใช้งานในแท็บอื่นอยู่ แม้กระทั้งย่อหน้าจอโปรแกรม Browser ไว้ ก็สามารถแสดงข้อความแจ้งเตือนได้ ผู้ใช้จะสามารถคลิกที่กล่องข้อความที่แสดงเพื่อกลับมายังหน้าจอเว็บไซต์ที่แจ้งเตือนได้

เริ่มต้นสร้างการแจ้งเตือนด้วย JavaScript

ก่อนอื่นเลยจำเป็นต้องขอสิทธิ์จากผู้ใช้เพื่อเป็นการอนุญาตให้แสดงการแจ้งเตือน
ใช้คำสั่ง Notification.requestPermission ค่าที่ได้กลับมาจะมี 3 ค่า
- granted คือ ผู้ใช้อนุญาตให้แสดงการแจ้งเตือน
- denied คือ ผู้ใช้ไม่อนุญาตให้แสดงการแจ้งเตือน
- default คือ ใช้ค่าเริ่มต้น กรณีขอสิทธิ์ไปยังผู้ใช้แต่ผู้ใช้ไม่ได้ดำเนินการอะไร Browser จะใช้ค่าเริ่มต้นของระบบซึ่งปกติคือไม่อนุญาตให้แสดง

ตัวอย่างโค้ดขอสิทธิ์จากผู้ใช้และแสดงแจ้งเตือน

Code: Select all

// ขอสิทธิ์จากผู้ใช้
Notification.requestPermission(function (permission) {
	if (permission === "granted") { // ถ้าผู้ใช้อนุญาตให้ทำคำสั่งด้านล่าง
		var notification = new Notification("Mindphp!"); // ให้แสดงการแจ้งเตือนคำว่า Mindphp
	}
});
เมื่อผู้ใช้กดอนุญาตหรือปฏิเสธไปแล้ว Browser จะจดจำการเลือกของผู้ใช้และจะนำไปใช้ในครั้งต่อไปสำหรับ Domain นั้นๆ ซึ่งเราจะสามารถเช็คได้จากคำสั่ง Notification.permission ว่าผู้ใช้เลือกค่าอะไรไว้

ตัวอย่างโค้ดแบบเต็ม

Code: Select all

<!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>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Return to “AJAX Javascript Library - jQuery”

Users browsing this forum: No registered users and 2 guests