Để tạo thông báo (notification) từ trình duyệt, bạn cần sử dụng Web Notifications API. Đây là quy trình tổng quát để tạo một thông báo:

1. Kiểm tra quyền thông báo#

Trước tiên, bạn cần kiểm tra xem trình duyệt có hỗ trợ Notifications API và người dùng đã cấp quyền để nhận thông báo hay chưa.

if ("Notification" in window) { console.log("Trình duyệt hỗ trợ Notifications API."); } else { console.error("Trình duyệt không hỗ trợ Notifications API."); }

2. Yêu cầu quyền từ người dùng#

Nếu người dùng chưa cấp quyền, bạn cần yêu cầu quyền.

if (Notification.permission === "granted") { console.log("Người dùng đã cấp quyền."); } else if (Notification.permission !== "denied") { Notification.requestPermission().then(permission => { if (permission === "granted") { console.log("Người dùng đã cấp quyền."); } else { console.log("Người dùng từ chối quyền."); } }); }

3. Tạo thông báo#

Khi đã có quyền, bạn có thể tạo thông báo bằng cách sử dụng constructor của Notification.

` function showNotification() { if (Notification.permission === "granted") { const notification = new Notification("Tiêu đề thông báo", { body: "Nội dung thông báo của bạn ở đây.", icon: "https://via.placeholder.com/100" // Đường dẫn đến icon nếu cần });

    // Thêm sự kiện xử lý khi người dùng nhấp vào thông báo
    notification.onclick = function () {
        console.log("Thông báo đã được nhấp vào.");
        window.open("https://example.com"); // Mở URL khi nhấp vào
    };
}

} `

4. Kích hoạt thông báo#

Gọi hàm để hiển thị thông báo sau khi đã kiểm tra quyền:

if (Notification.permission === "granted") { showNotification(); } else { console.log("Bạn cần cấp quyền để hiển thị thông báo."); }

Lưu ý#

• Độ tin cậy: Một số trình duyệt chỉ cho phép thông báo hoạt động khi trang được mở qua HTTPS hoặc trên localhost (trong môi trường phát triển).

• Hạn chế: Người dùng có thể từ chối quyền hoặc bật chế độ chặn thông báo, do đó bạn cần xử lý lỗi phù hợp.

• Thời gian sống của thông báo: Tùy thuộc vào hệ điều hành và trình duyệt, thông báo sẽ tự động biến mất sau một thời gian ngắn hoặc khi người dùng hành động.

Dưới đây là đoạn mã JavaScript hoàn chỉnh để triển khai tính năng thông báo từ trình duyệt:

Mã hoàn chỉnh#

`

Thông báo từ trình duyệt

<script>
    // Kiểm tra hỗ trợ Notifications API
    if (!("Notification" in window)) {
        alert("Trình duyệt của bạn không hỗ trợ Notifications API.");
    }

    // Yêu cầu quyền thông báo
    function requestNotificationPermission() {
        if (Notification.permission === "default" || Notification.permission === "denied") {
            Notification.requestPermission().then(permission => {
                if (permission === "granted") {
                    alert("Bạn đã cấp quyền thông báo.");
                } else {
                    alert("Bạn đã từ chối quyền thông báo.");
                }
            });
        }
    }

    // Hiển thị thông báo
    function showNotification() {
        if (Notification.permission === "granted") {
            const notification = new Notification("Tiêu đề thông báo", {
                body: "Đây là nội dung thông báo của bạn.",
                icon: "https://via.placeholder.com/100" // Thay thế bằng đường dẫn icon của bạn
            });

            // Xử lý sự kiện khi người dùng nhấp vào thông báo
            notification.onclick = function () {
                window.open("https://example.com", "_blank");
            };
        } else {
            alert("Bạn cần cấp quyền thông báo để sử dụng tính năng này.");
        }
    }

    // Gán sự kiện cho nút
    document.getElementById("notifyBtn").addEventListener("click", () => {
        if (Notification.permission === "default") {
            requestNotificationPermission();
        } else {
            showNotification();
        }
    });
</script>

Cách sử dụng#

• Lưu đoạn mã trên vào một file .html (ví dụ: notification.html).

• Mở file trong trình duyệt.

• Nhấn nút "Hiển thị thông báo": Nếu bạn chưa cấp quyền, trình duyệt sẽ yêu cầu cấp quyền.

  • Sau khi cấp quyền, thông báo sẽ xuất hiện với tiêu đề, nội dung và icon.

Kết quả mong đợi#

• Thông báo xuất hiện ở góc màn hình (tùy hệ điều hành).

• Khi nhấp vào thông báo, một tab mới sẽ mở ra với URL được chỉ định.