หลักกการเขียนแจ้งเตือนในเว็บ

หลักกการเขียนแจ้งเตือนในเว็บ

การแจ้งเตือนในเว็บ (Web Notifications) เป็นฟีเจอร์ที่ช่วยให้เว็บไซต์สามารถส่งข้อความแจ้งเตือนไปยังผู้ใช้งานผ่านเบราว์เซอร์ได้ โดยไม่จำเป็นต้องใช้แอปหรือส่วนขยายเพิ่มเติม การแจ้งเตือนในเว็บสามารถช่วยให้ผู้ใช้งานทราบถึงข้อมูลหรือกิจกรรมที่สำคัญ หรือเพิ่มความสะดวกในการใช้งานเว็บไซต์ได้

หลักการเขียนแจ้งเตือนในเว็บมีดังนี้

-เขียนข้อความที่ชัดเจน ไม่กล่าวซ้ำ ไม่มีคำที่ไม่จำเป็น

-เลือกสี รูปร่าง และไอคอนที่เหมาะสมกับประเภทของแจ้งเตือน เช่น สีเขียว สี่เหลี่ยม และไอคอนถูกใหญ่สำหรับแจ้งเตือนการยืนยัน

-เลือกตำแหน่งที่จะแสดงแจ้งเตือนให้ไม่รบกวนการใช้งานของผู้ใช้ เช่น แสดงแจ้งเตือนที่มุมบนขวาของหน้าจอ

-เพิ่มปุ่มหรือลิงก์ที่ให้ผู้ใช้กระทำการต่อไปได้อย่างรวดเร็ว เช่น ปุ่ม OK, Cancel, Retry, Undo, View, Learn more, Go to settings

-เป็นไปตามมาตรฐานการออกแบบของเว็บไซต์ เช่น ใช้ฟอนต์ ขนาด สี และระยะห่างที่สอดคล้องกัน

หลักการเขียนโค้ดแจ้งเตือนในเว็บมีดังนี้:

-เว็บไซต์ต้องขออนุญาตจากผู้ใช้งานก่อนที่จะส่งการแจ้งเตือน โดยใช้คำสั่ง Notification.requestPermission() ผู้ใช้งานสามารถอนุญาตหรือปฏิเสธการแจ้งเตือนได้

-เมื่อผู้ใช้งานอนุญาตการแจ้งเตือนแล้ว เว็บไซต์สามารถสร้างการแจ้งเตือนโดยใช้คำสั่ง new Notification(title, options) โดย title เป็นข้อความหลักที่จะแสดง และ options เป็นออบเจกต์ที่ระบุคุณลักษณะของการแจ้งเตือน เช่น ข้อความรอง ไอคอน รูปภาพ เสียง หรือการกระทำที่ผู้ใช้งานสามารถทำได้

-เว็บไซต์สามารถจัดการกับการแจ้งเตือนโดยใช้ API ของ Notification หรือ Service Worker เพื่อลบ ปิด หรือแสดงผลการกระทำของผู้ใช้งาน

ตัวอย่าง Javascrip:

// ขออนุญาตการแจ้งเตือน
Notification.requestPermission().then(function(permission) {
    // ถ้าผู้ใช้อนุญาต
    if (permission === "granted") {
        // สร้างการแจ้งเตือน
        var notification = new Notification("Hello, this is a web notification", {
            body: "You can see the latest news or updates from this website",
            icon: "notification-icon.png",
            image: "notification-image.jpg",
            vibrate: [200, 100, 200],
            actions: [
                {action: "open", title: "Open website"},
                {action: "close", title: "Close notification"}
            ]
        });
        // เมื่อผู้ใช้คลิกที่การแจ้งเตือน
        notification.onclick = function(event) {
            event.preventDefault(); // ป้องกันไม่ให้เบราว์เซอร์โฟกัสที่หน้าต่าง
            window.open("https://www.example.com", "_blank"); // เปิดเว็บไซต์
        };
        // เมื่อผู้ใช้คลิกที่การกระทำในการแจ้งเตือน
        notification.onaction = function(event) {
            if (event.action === "open") {
                // เปิดเว็บไซต์
                window.open("https://www.example.com", "_blank");
            } else if (event.action === "close") {
                // ปิดการแจ้งเตือน
                notification.close();
            }
        };
    }
});