เนื้อหาตอนต่อไปนี้ จะมาแนะนำวิธีการใช้งาน Notifications API
สำหรับทำการแจ้งเตือนผ่านหน้าเว็บบราวเซอร์หรือแอพ โดยจะทำการ
ส่งการแจ้งเตือนไปแสดงภายนอกเว็บเพจ ในระดับการแจ้งเตือนของระบบ
ดูรูปตัวอย่างการแจ้งเตือนด้านล่างมุมขวาของวินโดว์
การแจ้งเตือนจะแสดงถึงแม้ว่าเราจะย่อหน้าจอเพจที่ใช้งานอยู่ไว้ก็ตาม หมายความว่า
หน้าเพจนั้นๆ จะต้องเปิดใช้งานอยู่ แต่ไม่จำเป็นต้องเป็นหน้าที่ active เราอาจจะเปิดโปรแกรม
อื่นอยู่ก็ได้ สามารถใช้งานได้ทั้งบนมือถือและคอมพิวเตอร์ ปัจจุบันใช้ได้เฉพาะ desktop หากต้องการรองรับมือถือให้ดูหัวข้อถัดไป ServiceWorker
การขอสิทธิ์การใช้งานการแจ้งเตือน
อย่างที่ทราบการดีว่า การที่ API จะทำการอะไรสักอย่างที่อยู่ภายนอกของหน้าเว็บเพจ ไม่ว่า
จะเป็นการใช้งานไมโครโฟน การใช้งานการระบุตำแหน่ง เหล่านี้เป็น ก็ต้องทำการขอสิทธิ์จาก
ผู้ใช้ในครั้งแรกก่อนเสมอ เช่นเดียวกับระบบการแจ้งเตือน หรือ Notification ก็ต้องขอสิทธิ์เหมือนกัน
การที่เว็บเพจของเราจะใช้งาน Notification ได้นั้นต้องรองรับข้อกำหนดดังนี้คือ จะต้องใช้งานผ่าน
การเรียกใช้งานที่มีความปลอดภัย เช่น ต้องเป็น https และไม่อนุญาตให้เรียกใช้งานผ่าน iframe ได้
ใครที่อยากทดสอบ และต้องการใช้งาน https บน localhost สามารถดูบทความนี้ได้
ตั้งค่า xampp ให้รองรับ SSL แบบ Self Signed Certificate http://niik.in/980
https://www.ninenik.com/content.php?arti_id=980 via @ninenik
ตรวจสอบสถานะการอนุญาตใช้งานการแจ้งเตือน
เราสามารถใช้คำสั่ง เพื่อตรวจสอบการอนุญาตการแจ้งเตือน ว่าเราเคยกำหนด หรือได้กำหนด
การอนุญาตไว้แล้วหรือด้วยคำสั่ง ดังนี้
<script>
Notification.requestPermission().then(function(result) {
console.log(result);
});
</script>
ค่า result จะเป็นได้ 3 ค่าคือ
default - ยังไม่มีการแจ้งขอสิทธิ์ ถ้าอยู่ในสถานะนี้จะยังแสดงการแจ้งเตือนไม่ได้
granted - อนุญาตให้สามารถทำการแจ้งเตือนได้
denied - ผู้ใช้ปฏิเสธการอนุญาตให้แจ้งเตือน
ปกติแล้วเราสามารถเข้าไปกำหนดการอนุญาตในหน้าตั้งค่าของบราวเซอร์ หรือง่ายที่สุดก็ให้กดตรง
รูปไอคอนรูปกุญแจในช่อง url ของเว็บไซต์ในบราวเซอร์ จะมีให้เลือกกำหนดการอนุญาตสิทธิ์การ
ใช้งานต่างๆ ดูรูปด้านล่างประกอบ
ตัวอย่างการแจ้งเตือนผ่าน Notifications API อย่างง่าย
มาดูโค้ดตัวอย่างสำหรับทำการแจ้งเตือนผ่าน Notifications API โดยเมื่อเรียกใช้งานจะทำการตรวจสอบ
ว่าบราวเซอร์รองรับหรือไม่ และถ้ารองรับ มีการอนุญาตให้สามารถใช้งานการแจ้งเตือนหรือไม่ ซึ่งหากรองรับ
และเปิดใช้งานการแจ้งเตือนแล้ว ก็จะทำคำสังการแจ้งเตือนอย่างง่ายตามค่ากำหนด
<script>
function notifyMe() {
// เมื่อบราวเซอร์ไม่รองรับ
if (!Notification) {
alert("บราวเซอร์นี้ไม่รองรับการใช้งานการแจ้งเตือน.");
return;
}
//ตรวจสอบและขออนุญาตให้แสดงการแจ้งเตือน
if(Notification.permission !== "granted"){
alert("เปิดอนุญาตรับการแจ้งเตือนก่อนใช้งาน.");
Notification.requestPermission();
}else{
// จัดรูปแบบรายการแจ้งเตือน
var notification = new Notification('หัวเรื่องแจ้งเตือน', {
icon: 'https://www.ninenik.com/images/logo_01_Tue.gif',
body: 'รายละเอียดการแจ้ง!',
image:'https://www.ninenik.com/images/ninenik_page_logo.png'
});
// เมื่อคลิกที่การแจ้งเตือน
notification.onclick = function (e) {
window.open("https://www.ninenik.com");
};
}
}
notifyMe(); // เรียกใช้คำสั่งแจ้งเตือนทันทีที่หน้าเพจนี้โหลด
</script>
ผลลัพธ์การแจ้งเตือนที่ได้ ก็จะเหมือนกับรูปตัวอย่างด้านบน
ในการสร้างฟังก์ชั่นสำหรับการแจ้งเตือน เราสามารถกำหนด parameter ให้กับฟังก์ชั่น เพื่อส่งค่าจากภายนอก
เข้าไปใช้งานได้ สมมติเช่น หัวข้อ รายละเอียด รูปภาพ และลิ้งค์ ที่เราต้องการส่งไปในการแจ้งเตือน
ก็สามารถปรับรูปแบบฟังก์ชั่นเป็นดังนี้ได้
<script>
function notifyMe2(title, body, image, url) {
// เมื่อบราวเซอร์ไม่รองรับ
if (!Notification) {
alert("บราวเซอร์นี้ไม่รองรับการใช้งานการแจ้งเตือน.");
return;
}
//ตรวจสอบและขออนุญาตให้แสดงการแจ้งเตือน
if(Notification.permission !== "granted"){
alert("เปิดอนุญาตรับการแจ้งเตือนก่อนใช้งาน.");
Notification.requestPermission();
}else{
// จัดรูปแบบรายการแจ้งเตือน
var notification = new Notification(title, {
icon: 'https://www.ninenik.com/images/logo_01_Tue.gif',
body: body,
image:image
});
// เมื่อคลิกที่การแจ้งเตือน
notification.onclick = function (e) {
window.open(url);
};
}
}
notifyMe2(
"หัวข้อที่ส่งเข้าไปแสดง",
"รายละเอียดเพิ่มเติมที่ส่งเข้าไปแสดง",
"https://www.ninenik.com/images/ninenik_page_logo.png",
"https://www.ninenik.com"
);
</script>
การสร้างเป็น parameter แบบนี้ทำให้เราสามารถนำไปประยุกต์กับการส่งค่าจากฐานข้อมูล หรือจากแหล่ง
ข้อมูลภายนอกเข้าไปในคำสั่งการแจ้งเตือนได้
การตั้งค่าการทำงาน และการแสดงการแจ้งเตือน
สำหรับการแจ้งเตือนที่ใช้งานผ่าน Notification object ข้างตัน จะสามารถรองรับการตั้งค่าต่างๆ ในตัวอย่าง
เรามีการกำหนดค่าให้กับ option เพิ่มเติม ได้แก่ icon body และ image
สมมติเราต้องการแค่ข้อความหัวข้อแจ้งเตือน เราสามารถกำหนดเฉพาะ title ได้
// แจ้งเตือนเฉพาะหัวข้อ ค่า title เป็นค่าที่จำเป็นต้องกำหนด var notification = new Notification(title);
หากเราต้องการกำหนด option เพิ่มเติม สามารถกำหนดค่าต่างๆ ได้ดังนี้ แนะนำเฉพาะที่จำเป็น
badge - ใช้เป็น url ของรูป สำหรับแสดงกรณีที่พื้นที่การแจ้งเตือนไม่สามารถแสดงได้
body - เป็นข้อมูลข้อความรายละเอียดที่ต้องการแสดง จะแสดงต่อจากหัวข้อ หรือ title
icon - ใช้เป็น url ไอค่อนที่จะแสดงในแจ้งเตือน
image - ใช้เป็น url ของรูปที่จะแสดง จะแสดงด้านบนของข้อความ
vibrate - การสั่นแจ้งเตือน จะกำหนดเป็นรูปแบบการสั่น ตัวอย่าง
// สั่น 200 มิลลิวินาที หยุด 100 มิลลิวินาที และสั่นต่ออีก 200 มิลลิวินาที
var notification = new Notification(title,{
vibrate:[200, 100, 200]
});
หรือถ้าต้องการให้สั่นครั้งเดียวก็กำหนดเป็นตัวเลข vibrate:[200] หรือ vibrate:200 ก็ได้
เวลากำหนดเป็นหน่วยมิลลิวินาที คุณสมบัตินี้ขึ้นกับอุปกรณ์ ปกติจะใช้งานได้ในมือถือ
data - ข้อมูลที่เราจะใช้งานร่วมกับการแจ้งเตือน เป็นข้อมูลอะไรก็ได้ ตัวเลข ข้อความ หรือ javascript object ก็ได้
silent - กำหนดค่าสำหรับการแจ้งเตือนแบบเงืยบ ไม่มีเสียง ไม่สั่นเตือน หรือไม่ ค่า true หรือ false
requireInteraction - กำหนดให้ปิดแจ้งเตือนอัตโนมัติ หรือ ต้องกดปิดเอง ค่า true หรือ false
ค่าเริ่มต้น หรือถ้าไม่กำหนด สำหรับค่า silent และ requireInteraction จะเป็น false นั่นคือไม่แสดง
แบบเงียบถ้ามีเสียงหรือมีสั่น และปิดแจ้งอัตโนมัติ
ต่อไปสองค่าสุดท้าย จะมีความสัมพันธ์กัน โดยเฉพาะค่า renotify ถ้าจะใช้งานต้องกำหนดค่า tag ด้วยเสมอ
renotify - ให้แสดงการแจ้งเตือนที่มีการกำหนด tag ซ้ำหรือไม่ ค่าเริ่มต้นเป็น false ไม่แสดงซ้ำ
tag - เป็นค่าตัวเลขหรือข้อความที่สำหรับระบุเฉพาะ เหมือนเป็น id ของการแจ้งเตือนนั้น ถ้าไม่กำหนด
การแจ้งเตือนนั้นๆ ก็เหมือนเป็นการแจ้งเตือนใหม่ตลอดเวลา
สมมติเราเรียกให้แสดง การแจ้งเตือนสองครั้ง ดังนี้
notifyMe2(
"หัวข้อที่ส่งเข้าไปแสดง",
"รายละเอียดเพิ่มเติมที่ส่งเข้าไปแสดง",
"https://www.ninenik.com/images/ninenik_page_logo.png",
"https://www.ninenik.com"
);
notifyMe2(
"หัวข้อที่ส่งเข้าไปแสดง",
"รายละเอียดเพิ่มเติมที่ส่งเข้าไปแสดง",
"https://www.ninenik.com/images/ninenik_page_logo.png",
"https://www.ninenik.com"
);
เมื่อเรียกใช้งานสองครั้ง และไม่ได้กำหนด tag ก็เหมือนเป็นการแจ้งเตือนคนตัวกัน
ดังนั้นการแจ้งเตือนก็จะแสดงสองครั้ง หรือก็คือแสดงทุกๆ ครั้งที่เรียกใช้งาน
ทีนี้ สมมติเราปรับให้ส่งค่า tag เข้าไปเป็นดังนี้
// โค้ดตัดบางส่วน
function notifyMe2(title, tag) {
var notification = new Notification(title,{
tag:tag
});
}
แล้วเราเรียกใช้สองครั้ง แต่กำหนดค่า tag คนละตัว
notifyMe2("หัวข้อที่ส่งเข้าไปแสดง", 1);
notifyMe2("หัวข้อที่ส่งเข้าไปแสดง", 2);
การใส่ tag ก็เหมือนการบอกว่า เป็นการแจ้งเตือนชื่อ 1 กับการแจ้งเตือนชื่อ 2 เมื่อถูกเรียกใช้งาน
ก็จะแสดงปกติ แต่จะแสดงแค่ครั้งแรกครั้งเดียว ทั้งนี้ก็เพราะ ค่าเริ่มต้นของ renotify ที่เป็น false
หากต้องการให้การแจ้งเตือน 1 กับการแจ้งเตือน 2 สามารถแสดงซ้ำได้ ก็ให้กำหนดค่า renotify
ควบคู่ไปเป็น true ดังนี้
var notification = new Notification(title,{
tag:tag,
renotify:true
});
การแสดงซ้ำหมายถึงว่า ค่า tag นี้เคยแสดงแล้ว ก็สามารถแสดงอีกได้ แต่ไม่ได้หมายถึงแสดงต่อเนื่อง
เช่นสมมติกำหนดค่าเรียกใช้เป็น
notifyMe2("หัวข้อที่ส่งเข้าไปแสดง", 1);
notifyMe2("หัวข้อที่ส่งเข้าไปแสดง", 1);
แบบนี้ก็จะแสดงแค่ครั้งเดียว แต่ถ้ามาเรียกใช้อีก ก็จะแสดงอีก ไม่จะแสดงซ้ำถ้าใช้ต่อเนื่องกันทันที
ประโยชน์ของการใช้งาน tag และ renotify ก็คือ ถ้าเราต้องการให้การแจ้งเตือน tag หรือไอดีหนึ่งแสดงแค่ครั้ง
เดียวเท่านั้น เราก็กำหนดแค่ค่า tag ของรายใหม่ๆ ก็พอ เพราะค่า renotify ค่าเริ่มต้นเป็น false คือไม่แสดงซ้ำอยู่แล้ว
อธิบายแบบเห็นภาพ สมมติเราต้องการให้มีการแจ้งเตือน เมื่อมีคำสั่งซื้อใหม่เข้ามา สั่งที่เราต้องการก็คือ order id
ล่าสุด เช่น 3 รายการ เป็น 1 2 3 เราก็ไปดึง order id จากฐานข้อมูล แล้วเอามาสร้างการแจ้งเตือน ก็จะได้เป็น
// เวลาใช้จริงก็วนลูปเอา
notifyMe2("มีคำสั่งซื้อใหม่ ที่ 1", 1);
notifyMe2("มีคำสั่งซื้อใหม่ ที่ 2", 2);
notifyMe2("มีคำสั่งซื้อใหม่ ที่ 3", 3);
เมื่อเปิดมาหน้าที่กำหนดการทำงานไว้ พอไปดึงข้อมูลมา แล้วสร้างการแจ้งเตือนก็จะ การแจ้งเตือน 3 ครั้ง
พออีกสักพัก มีการสั่งซื้อใหม่เข้ามา เป็น order id 4 แต่เราให้ดึงข้อมูลมาแค่ 3 รายการล่าสุด ข้อมูลที่ส่งกลับมา
ก็จะเป็น 2 3 และ 4 เมื่อระบบทำการแจ้งเตือนก็จะเรียกคำสั่ง
notifyMe2("มีคำสั่งซื้อใหม่ ที่ 2", 2); // ไม่แสดง เพราะแสดงไปแล้ว
notifyMe2("มีคำสั่งซื้อใหม่ ที่ 3", 3); // ไม่แสดง เพราะแสดงไปแล้ว
notifyMe2("มีคำสั่งซื้อใหม่ ที่ 4", 4);
การแจ้งเตือนครั้งที่สอง ก็จะแสดงแค่ คำสั่งซื้อใหม่ที่ 4 ที่ยังไม่แสดง แบบนี้เป็นต้น
ทำให้เราไม่ต้องไปยุ่งกับฐานข้อมูล เช่น ไม่ต้องไปอัพเดทว่า รายการนี้แจ้งแล้ว หรือยังไม่แจ้ง แบบนี้เป็นต้น
การกำหนดการทำงานเมื่อผู้ใช้มีการโต้ตอบกับการแจ้งเตือน
เราสามารถกำหนดการทำงานให้กับ event ของ การแจ้งเตือน หรือ notification ด้วยกัน 4 event ได้แก่
onshow - กำหนดการทำงานเมื่อ การแจ้งเตือน แสดงขึ้นมา
onclick - กำหนดการทำงานเมื่อคลิกที่การแจ้งเตือน ไม่รวบคลิกปิด
onclose - กำหนดการทำงานเมื่อกดปิด การแจ้งเตือน กรณีที่ปิด จากปุ่ม ของการแจ้งเตือนที่ปุ่มปิด
onerror - กำหนดการทำงาน
ในตัวอย่างการแจ้งเตือน เราจะเห็นการกำหนดให้ เมื่อคลิกก็ไปยังหน้า url ที่เราส่งค่ามา
// เมื่อคลิกที่การแจ้งเตือน
notification.onclick = function (e) {
window.open(url);
};
เราสามารถใช้ค่าจาก event ของ notification object เช่น สมมติ เราก็หนดค่า tag ให้เป็นค่า id และอยาก
ใช้ส่งไปใน url ด้วย ก็อาจจะปรับเป็นดังนี้
// เมื่อคลิกที่การแจ้งเตือน
notification.onclick = function (e) {
window.open(url+"?id="+e.target.tag); // https://example.com/order.php?id=100
};
หรือสมมติเราส่งค่ามาใน data เป็น string ข้อมูล url เพิ่มเติม เช่น catid=12&proid=100
// เมื่อคลิกที่การแจ้งเตือน
notification.onclick = function (e) {
window.open(url+"&"+e.target.data); // https://example.com/order.php?catid=12&proid=100
};
การใช้งานกับ onshow ก็อาจจะเช่น สมมติว่า เราต้องการดูว่าใครได้รับการแจ้งเตือนนี้บ้าง ก็อาจจะเมื่อแสดง
ก็ให้ทำการอัพเดทฐานข้อมูล อ้างอิงจาก id หรือค่าที่ส่งมา
// เมื่อแสดงการแจ้งเตือน
notification.onshow = function (e) {
$.post("updatealert.php",{id:e.target.tag},function(){});
};
การใช้งานกับ onclose เนื่องจาก onclose จะเกิดกับการแจ้งเตือนที่กำหนดค่า requireInteraction เป็น true คือ
ให้ผู้ใช้ปิดการแจ้งเตือนเอง (ทดสอบกรณีคอมพิวเตอร์ ส่วนมือถือไม่ได้ลอง) การปิดจากจุดอื่น หรือปิดไปเอง ไม่มีผล
ต่อ event นี้
สมมติว่ากดปิดการแจ้งเตือน เราก็อาจจะไปให้รีเฟรสหน้าหลักก็ได้ เพื่อให้ข้อมูลอัพเดท เพราะการแจ้งเตือนของเรา
เป็นการไปดึงแบบทำงานเบื้องหลัง สามารถใช้กับ event onerror ได้ เพื่อให้การแจ้งเตือนกลับมาทำงานได้อีกครั้งเมื่อ
ทำการโหลดหน้าที่เรียกใช้ใหม่
// เมื่อกดปุ่มปิดการแจ้งเตือน
notification.onclose = function (e) {
window.location.reload();
};
หวังว่าแนวทางการประยุกต์ใช้งาน Notifications API จะเป็นประโยชน์ไม่มากก็น้อยในการนำไปปรับใช้ต่อไป
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง