Membuat Desktop Notifikasi Via Javascript

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

desktop notifikasi dokumenary

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 :

gmail desktop notifikasi

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  :

browser support desktop notification

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 :

desktop notif allow

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

Summary
Membuat Desktop Notifikasi Via Javascript
Article Name
Membuat Desktop Notifikasi Via Javascript
Description
Belajar membuat desktop notifikasi dengan javascript. 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
Author
Dokumenary.net

Category: Javascript

Tags: , , , ,


Maker of web-based applications. Subscribe or like dokumenary facebook page for get updated tutorial

Comments

  1. pak tolong saya minta source codenya. tolong kirim ke email saya handikasatwikaradityo@gmail.com saya mau ngembangin buat notifikasi pengingat pembayaran kredit di bank. tolong pak buat tugas saya.. terima kasih banyak sebelumnya

    Reply
  2. tolong bantuannya ma pencerahannya pak.. aplikasi yang mau saya kembangin gini, setiap h-3 dari tanggal jatuh tempo maka notifikasinya akan muncul dan memberitahukan nama orang yang akan ditagih kreditnya… kira2 bisa kan pak? saya sudah pusing pak nyari tutorial nggak ketemu2.. :(.. tolong bantuannya pak..

    Reply
  3. Kalau mau membuat notifikasi untuk web jika ada posting baru gimana caranya om?

    Reply
  4. dalam waktu yang sama ketika browser menujukkan notif, jika kita ingin menambahkan audio itu bagai mana om? terima kasih

    Reply
  5. terima kasih mas ALMAZARI , mau tanya nih, Itu notification nanti bisa nggak yah, misal untuk munculkan promo di web, produk terbaru yang baru di uploaddll

    Reply
    • Ya bisa aja mas, biasanya ada background proses (ajax) untuk ngecek ada produk baru tidak, kalo ada tampilkan notifnya…

      Reply
  6. Sang Semot Hitam
    March 8, 2017 - 1:36 pm

    Bagaimana Notifikasi tetap aktif walaupun browser sudah ditutup ?

    Reply
    • Wah kalo yang seperti itu saya juga belum tau mas, nanti kalo sudah tau caranya saya posting jg…

      Reply

Leave a Reply