Membuat Desktop Notifikasi Via Javascript

Hari ini saya iseng – iseng belajar membuat desktop notifikasi seperti gambar di bawah ini :

Bagus ya, waah berarti jika kita punya aplikasi berbasis website, kita bisa munculkan pesan notifikasi walaupun pengguna aplikasi kita aktif di tab browser yang lainnya atau di window lain. Contoh kalo di aplikasi gmail, saat kita sudah login gmail tapi kita sibuk melakukan aktifitas diwindow atau tab yang lain, dan ada yang chat kita, maka akan muncul dekstop notifikasinya ya kira – kira seperti ini :

Sekarang kita juga bisa membuat notifikasi seperti itu dengan cara yang mudah lo. Untuk contoh hasilnya temen – temen bisa mencobanya di SINI.

Berikut adalah tabel browser yang support untuk desktop notifikasi  :

Berdasarkan dokumentasi mozilla, sintak javascript untuk menampilkan notifikasi seperti ini :

var notification = new Notification(title, options)

Options yang dapat kita berikan diantaranya lang, body, tag, icon. Temen – temen bisa melihat detailnya pada link sumber di bawah.

Berikut adalah contoh fungsi javascript yang dapat menampilkan notifikasi desktop :

<script type="text/javascript">
    function notifyMe(msg_title, msg_body, redirect_onclick) {
        var granted = 0;

        // Let's check if the browser supports notifications
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        }

        // Let's check if the user is okay to get some notification
        else if (Notification.permission === "granted") {
            granted = 1;
        }

        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                // If the user is okay, let's create a notification
                if (permission === "granted") {
                    granted = 1;
                }
            });
        }

        if (granted == 1) {
            var notification = new Notification(msg_title, {
                body: msg_body,
                icon: 'notif-icon.png'
            });

            if (redirect_onclick) {
                notification.onclick = function() {
                    window.location.href = redirect_onclick;
                }
            }
        }
    }
</script>

Temen – temen cukup memanggil fungsi di atas seperti contoh button berikut ini :

<button onclick="notifyMe('Title Notif', 'Body Notif')">Notify me!</button>

Button untuk code diatas jika di klik, maka browser akan menampilkan permintaan untuk permission seperti gambar berikut :

Notifikasi bisa tidak muncul jika anda menekan tombol Block.

Sekian tutorial kali ini, simple ya.. semoga dapat mencerahkan buat temen – temen yang sedang membutuhkannya,

Terimakasih, salam hangat

Sumber : https://developer.mozilla.org/en-US/docs/Web/API/notification

Category: Javascript

Tags: browser desktop notification, browser desktop notifikasi, desktop notification, membuat desktop notifikasi, notifikasi