แสดงการแจ้งเตือน notifications จาก Web Application ในเว็บเบราว์เซอร์

แสดงการแจ้งเตือน notifications จาก Web Application ในเว็บเบราว์เซอร์

ห่างหายไปนานเลยเหมือนกันที่ไม่ได้มาเขียนบทความเกี่ยวกับทิป เทคนิคการพัฒนาเว็บแอพพลิเคชั่นให้ได้อ่านกัน วันนี้มีโอกาส (มีเวลาว่าง) เลยมาเขียนบทความแนะนำการใช้งาน Browser Notifications แสดงการแจ้งเตือนผ่านทาง Desktop ซึ่งจะมี function พื้นฐานให้ใช้งานอยู่แล้วในเว็บบราวเซอร์ Chrome และ Firefox ซึ่งนักพัฒนาเว็บแอพพลิเคชั่นหลายๆคนยังไม่ทราบว่ามี function นี้ให้ใช้งาน แต่วันนี้ผมจะมาแนะนำการเรียกใช้งาน function การแจ้งเตือนแบบ push notifications โดยใช้ Javascript , jQuery และ Vanilla JS

การเริ่มต้นใช้งาน Browser notification system 
สามารถทดสอบโดยเขียน Javascript ดังนี้เพื่อตรวจสอบการทำงาน

document.addEventListener('DOMContentLoaded', function () 
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

});

การเรียกใช้งาน Push Notification ของเว็บบราวเซอร์
สามารถแก้ไข URL ของ icon ที่จะให้แสดงในหน้าต่าง Notifications รวมถึงข้อความ Title และ รายละเอียดข้อความ และ URL ในการแจ้งเตือนได้

function notifyBrowser(title,desc,url
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else
{
var notification = new Notification(title, {
icon:'http://YourWebsite.com/logo.png',
body: desc,
});

/* ลบการแจ้งเตือนออกจากรายการ เมื่อทำการคลิกเพื่อเปิด URL ใหม่*/
notification.onclick = function () {
window.open(url); 
};

/* Callback function เมื่อปิดหน้าต่างการแจ้งเตือน */
notification.onclose = function () {
console.log('Notification closed');
};

}
}

การเรียกใช้งานโดยใช้ jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#notificationButton").click(function()
{
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
return false;
});
});
</script>
//HTML Code
<input type="button" id="notificationButton" />

การเรียกใช้งานโดยใช้ Vanilla JS

<script>
document.addEventListener('DOMContentLoaded', function() 
{
document.querySelector("#notificationButton").addEventListener("click",function(e)
{
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});
});
</script>
//HTML Code
<input type="button" id="notificationButton" />


การใช้งานโดยใช้ Function SettimeOut เพื่อกำหนดระยะเวลาให้แสดงการแจ้งเตือน

<script>
setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1); /* Random number 1 ถึง 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
}, 120000); //กำหนดเวลาให้แสดงการแจ้งเตือนทุก 2 นาที 
</script>

จากตัวอย่าง Code การใช้งานการแจ้งเตือน Push Notifications สามารถนำไปประยุกต์เพิ่มเติมกับการแจ้งเตือนจากระบบเว็บแอพพลิเคชั่นที่เราพัฒนาขึ้นมา โดยอาจใช้ร่วมกับการทำงานแบบ Ajax ในการเรียกแสดงการแจ้งเตือนจากระบบของเราให้ผู้ใช้งานได้รับทราบ หวังว่าจะมีประโยชน์กับนักพัฒนาเว็บแอพพลิเคชั่นหลายๆท่านนะครับ


แชร์บทความ

Facebook Twitter Google Digg Reddit LinkedIn StumbleUpon Email
กำลังโหลด ...