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

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

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

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8530
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์โดย tsukasaz » 26/06/2018 2:34 pm

notification.png
notification.png (99.83 KiB) เปิดดู 717 ครั้ง

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

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

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

notification_support.png

หรือใช้คำสั่ง 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>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน