Tạo Notification Desktop Alert cho Facebook hiển thị trên desktop bằng JavaScript như thế nào ? ( How to show Facebook notification on your desktop using JavaScript ? )

[dou.jakhen]

*Có những thông báo quan trọng mà không ai muốn bỏ lỡ , thế nhưng khi thực hiện các tác vụ khác người dùng có thể vô tình bỏ qua thông báo từ trình duyệt , vậy có một cách nào đó khác để gửi thông báo cho người dùng từ trình duyệt không ? Hẳn các bạn không còn lạ lẫm j với Notification hiển thị trên desktop mỗi lần facebook gửi thông báo có tin nhắn mới cho bạn . Làm cách nào để code một Notification thông báo từ browser cho người dùng của bạn ? Hãy cùng tôi tìm hiểu qua bài viết này nhé ! *

Notification Desktop là gì ?

Nó là một dạng lời nhắn cảnh báo từ desktop ( desktop alert ) chứ không phải từ browser của bạn , tuy nhiên vẫn có thể điều khiển nó từ browser

Có nhiều cách làm Notification Desktop cho facebook hay các ứng dụng gửi thông báo tương tự ,nhưng đây là cách đơn giản nhất mình biết để hiển thị thông báo tới desktop - desktop alert nhé ^^

Cùng tạo một desktop notification app nào

Trước hết phải kiểm tra xem trình duyệt của bạn có hỗ trợ desktop notification không đã ^^

if (!window.Notification) {
        console.log('Trình duyệt không hỗ trợ Desktop Notification - Browser does not support notifications.');
    }

Nếu trình duyệt có hỗ trợ , kế đến phải kiểm tra xem liệu người dùng đã cho phép hiển thị desktop notification hay chưa . Để kiểm tra ta có method Notification.permission

Method này có 3 kết quả như sau :

Default : Mặc định là không cho phép khi người dùng không trả lời yêu cầu
Granted : Người dùng đã cho phép
Denied : Người dùng từ chối hiển thị thông báo desktop

Tiếp đó , nếu người dùng đã cho phép , ta cài đặt luôn Notification và hiển thị

if (Notification.permission === 'granted') {
            // show desktop notification here
            var notify = new Notification('Xin chào !', {
                body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
            });
     // Khi nhấn vào Notification này browser sẽ mở một tab mới với đường dẫn đã được cài
            notify.onclick = (e) =>{ 
                window.open('https://nodejs.vn/')
            }
        }

Vậy nếu người dùng chưa duyệt chặn hay cho phép thì sao ? Đương nhiên rồi , yêu cầu người dùng cho phép desktop notification :v

else {
            // request permission from user
            Notification.requestPermission().then(function (p) {
                if (p === 'granted') {
                    // show notification here
                    var notify = new Notification('Xin chào !', {
                        body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                        icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
                    });
                    notify.onclick = (e) =>{
                        window.open('https://nodejs.vn/')
                    }
                } else {
                    console.log('User blocked notifications.');
                }
            }).catch(function (err) {
                console.error(err);
            });
        }

Full code

Javascript

<script>
    function notification() {
    if (!window.Notification) {
        console.log('Browser does not support notifications.');
    } else {
        // check if permission is already granted
        if (Notification.permission === 'granted') {
            // show notification here
            var notify = new Notification('Xin chào !', {
                body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
            });
            notify.onclick = (e) =>{
                window.open('https://nodejs.vn/')
            }
        } else {
            // request permission from user
            Notification.requestPermission().then(function (p) {
                if (p === 'granted') {
                    // show notification here
                    var notify = new Notification('Xin chào !', {
                        body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                        icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
                    });
                    notify.onclick = (e) =>{
                        window.open('https://nodejs.vn/')
                    }
                } else {
                    console.log('User blocked notifications.');
                }
            }).catch(function (err) {
                console.error(err);
            });
        }
    }
}
 </script>

Để đơn giản mình sẽ cho hàm notification thực thi ngay khi trang được load nhé

HTML

<body onload="notification()"></body>

Như vậy , chỉ với vài bước đơn giản , chúng ta đã tạo được một desktop notification app thật tiện lợi . Hãy áp dụng ngay Desktop Notification trên chính ứng dụng của bạn nhé