Tutorial Membuat Notifikasi Browser Dengan Push.js

Belakangan ini banyak sekali situs-situs yang menyediakan notifikasi browser mengenai artikel terbaru pada situs tersebut agar pengunjungnya tetap bisa mendapat pemberitahuan artikel terbaru walaupun tidak sedang membuka situs tersebut.

Untuk membuat notifikasi tersebut kita bisa menggunakan layanan seperti Onesignal, namun kali ini kita akan mencoba notifikasi sederhananya, yaitu membuat satu tombol yang ketika diklik akan memunculkan notifikasi.

Pada tutorial ini kita akan menggunakan library Push.js by @Nikcersoft agar lebih mudah dalam mengimplementasikannya.

Sekedar informasi saja bahwa perkembagan artikel Kodinger agak lamban karena Kodinger hanya ditunggangi oleh 2 orang, di mana yang satu sibuk dengan kerjaan kantornya dan satu lagi sibuk dengan judul skripsi.

Let’s go…

Push.js

Push.js bisa kamu dapatkan dengan beberapa cara, yaitu menggunakan NPM, Bower atau kamu bisa menggunakan CDN agar tidak ribet. Versi terbaru saat ini dari Push.js adalah 1.0.5, maka gunakan CDN berikut:

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.min.js"></script>

Hal yang perlu kamu ketahui adalah ketika kamu jalankan Push.js di browser Google Chrome maka kamu harus menggunakan SSL(HTTPS). Jadi, untuk percobaan maka kamu bisa gunakan browser selain Chrome, dalam kasus ini saya gunakan Firefox.

Meminta Izin Pengguna

Sama halnya seperti Geolocation, untuk mengirim notifikasi ke browser pengguna perlu perizinan dari pengguna terlebih dahulu. Untuk masalah ini Push.js sudah menyiapkan API-nya untuk kita meminta izin pada pengguna.

Push.Permission.request(onGranted, onDenied);

Method tersebut memiliki 2 callback, yaitu onGranted dan onDeniedonGranted callback pada saat pengguna mengizinkan notifikasi dan onDenied callback pada saat pengguna menolak untuk dikirim notifikasi.

Membuat Notifikasi

Membuat sebuah notifikasi dengan Push.js sangatlah mudah, kamu hanya perlu menggunakan method Push.create(title, object) dan notifikasi akan muncul di browser pengguna.

Contoh sederhananya seperti berikut:

Push.create("Hello, world!");

Dengan kode di atas maka hanya akan menampilkan notifikasi dengan judul “Hello, world!” saja.

Untuk lebih lengkapnya, kamu bisa gunakan object seperti berikut:

Push.create("Hello, world!", {
    body: "Ini isi dari notifikasi",
    icon: 'icon.png',
    timeout: 4000,
    onClick: function () {
       // ketika notifikasi diklik
    }
});

Kamu dapat melihat opsi yang lebih lengkapnya di sini.

HTML

Setelah paham dengan API Push.js, sekarang kita akan lakukan implementasi dengan HTML. Buat struktur sederhana seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Push.js Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.min.js"></script>
</head>
<body>
  <h1>Push.js Tutorial</h1>
  <p>Klik tombol di bawah untuk memunculkan notifikasi.</p>
  <button id="notify">Tampilkan Notifikasi</button>
</body>
</html>

Maka berikutnya kita akan buat event listener click untuk tombol dengan ID notify. Gunakan kode berikut untuk memberikan event listener terhadap tombol “Tampilkan Notifikasi”.

<script>
  document.getElementById('notify').addEventListener('click', () => {
    alert('Hello!');
  });
</script>

Letakkan kode tersebut sebelum tag </body>. Dengan kode tersebut maka ketika tombol diklik akan memunculkan kotak dialog dengan tulisan “Hello!”, itu hanya sebagai percobaan saja.

Kemudian kita akan meminta izin pengguna untuk menampilkan notifikasi dan mengirim notifikasi jika diizinkan dengan kode berikut:

Push.Permission.request(() => {
  Push.create('Kodinger.com', {
    body: 'Hello, ini adalah notifikasi dari tutorial Kodinger.com.',
    icon: 'https://kodinger.com/wp-content/uploads/2016/04/kod-1.jpg',
    timeout: 3000,
    onClick: () => {
      alert('Notifikasi diklik, bosku!');
    }
  });
});

Pada kode di atas, terlihat method Push.create() diletakkan di dalam callback onGranted pada method Push.Permission.request() itu karena notifikasi akan dikirimkan pada saat pengguna mengizinkan notifikasi untuk ditampilkan.

Pada method Push.create() memiliki 2 paramter, yaitu title dan object. Title adalah judul dari notifikasi dan object adalah informasi lain yang dapat ditambahkan pada notifikasi tersebut. Artinya, kamu bisa memberikan informasi lain pada notifikasi tersebut, seperti deskripsi notifikasi, icon, timeout dan sebagainya.

Kode di atas menunjukan bahwa notifikasi yang ditampilkan akan memiliki judul “Kodinger.com”, deskripsi “Hello, ini adalah notifikasi dari tutorial Kodinger.com.”, icon yang diambil dari “https://kodinger.com/wp-content/uploads/2016/04/kod-1.jpg”, ketika mencapai waktu 3 detik notifikasi akan menghilan dan ketika notifikasi diklik akan memunculkan dialog dengan teks “Notifikasi dklik, bosku!”.

Kode Keseluruhan

Kode keseluruhan dari tutorial ini adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Push.js Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.min.js"></script>
</head>
<body>
  <h1>Push.js Tutorial</h1>
  <p>Klik tombol di bawah untuk memunculkan notifikasi.</p>
  <button id="notify">Tampilkan Notifikasi</button>
  <script>
    document.getElementById('notify').addEventListener('click', () => {
      Push.Permission.request(() => {
        Push.create('Kodinger.com', {
          body: 'Hello, ini adalah notifikasi dari tutorial Kodinger.com.',
          icon: 'https://kodinger.com/wp-content/uploads/2016/04/kod-1.jpg',
          timeout: 3000,
          onClick: () => {
            alert('Notifikasi diklik, bosku!');
          }
        });
      });
    });
  </script>
</body>
</html>

Dan akan menampilkan notifikasi seperti berikut ketika tombol diklik.

Demo & Download

Kamu dapat meilhat dan men-download hasil dari tutorial ini melalui GitHub.

 

Final Words

Setelah membaca artikel ini seharusnya kamu sudah dapat membuat setidaknya local browser notification dan mungkin dapat kamu explore lagi mengenai Push.js. Semoga Bermanfaat.

Referensi:

  • https://tutorialzine.com/2017/01/the-easiest-way-to-show-browser-notifications
  • https://pushjs.org/
Digital Ocean baner

Muhamad Nauval Azhar

Code of a down