Principles for writing notifications on the website

Principles for writing notifications on the website

Web Notifications are a feature that allows websites to send notification messages to users through their browsers. No need for additional apps or extensions. Web notifications can help keep users informed of important information or events. or increase the convenience of using the website

 

The principles for writing web notifications are as follows:

-Write a clear message, don't repeat yourself. There are no unnecessary words.

-Choose the appropriate color, shape, and icon for the notification type, such as green, square, and large check icons for confirmation notifications.

-Choose a location to display notifications so that they do not interfere with the user's experience, such as displaying notifications in the top right corner of the screen.

-Add buttons or links that allow users to quickly take the next action, such as OK, Cancel, Retry, Undo, View, Learn more, and Go to settings buttons.

-Follow website design standards, such as using consistent fonts, sizes, colors, and spacing.

The principles for writing website notification code are as follows:

Websites must request permission from users before sending notifications. By using the Notification.requestPermission() command, users can allow or deny notifications.

-When the user has allowed notifications Websites can create notifications using the new Notification(title, options) command, where the title is the main text to be displayed and options are objects that specify the notification's attributes, such as secondary text, icons, images, sounds, or actions. Users can do this.

Websites can handle notifications using the Notification API or Service Worker to delete, turn off, or display user actions.

Javascript example:

// ขออนุญาตการแจ้งเตือน
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();
            }
        };
    }
});