สอบถามปัญหาการทำระบบ Notify Alert ข้อความใหม่ หรือ Notification แบบ Outlook (PHP,MySQL)

ตรวจสอบว่ารองรับ notification มั้ย ถ้าไม่ใช่ webkit ไม่รองรับ 

แต่ถ้าเป็น chrome ต้องไปตั้งค่า ใน settings ก่อน

Settings » Advanced settings » Privacy settings » Content settings » Notifications.

ตัวอย่างโค้ดที่ทำงาน หลังเปิด การใช้งานใน chrome แล้ว

<style type="text/css">
.myButton {
	-moz-box-shadow: 0px 10px 14px -7px #276873;
	-webkit-box-shadow: 0px 10px 14px -7px #276873;
	box-shadow: 0px 10px 14px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
	background-color:#599bb3;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
	background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}

</style>

<script>
function notify() {
  if (!window.webkitNotifications) return;  // ตรวจสอบว่ารองรับ notification มั้ย ถ้าไม่ใช่ webkit ไม่รองรับ
  var havePermission = window.webkitNotifications.checkPermission();
  if (havePermission == 0) {
    // 0 is PERMISSION_ALLOWED
    var notification = window.webkitNotifications.createNotification(
      'http://www.ninenik.com/images/logo_01_Tue.gif',  // รูปภาพ ประกอบ
      'หัวข้อที่ต้องการแสดง!',
    'รายละเอียด ข้อความ'
    );
    
    notification.onclick = function () {
		// url ลิ้งค์ เมื่อคลิกที่ notification 
      window.open("http://www.ninenik.com");
    }
    notification.show();
  } else {
      window.webkitNotifications.requestPermission();
  }
}  
</script>


<a href="javascript:notify();" class="myButton">แสดง Notification</a>

ตัวอย่าง

แสดง Notification

ดูข้อมูลเพิ่มเติมที่

http://decadecity.net/blog/2012/10/12/webkit-notification-api

http://www.darianshimy.com/blog/2012/08/14/web-notifications-in-chrome-and-safari/


ลองประยุกต์ ให้ขึ้นแสดง การขออนุญาต การใช้งาน notification ด้วย ได้ก็ดี