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 onDenied. onGranted 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.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
}
});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”.
Push.create("Hello, world!");<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 kodingid.com.',
icon: 'https://kodingid.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 “kodingid.com”, deskripsi “Hello, ini adalah notifikasi dari tutorial kodingid.com.”, icon yang diambil dari “https://kodingid.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 :
<!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>
Dan akan menampilkan notifikasi seperti berikut ketika tombol diklik.
Demo & Download
Kamu dapat meilhat dan men-download hasil dari tutorial ini melalui GitHub.
Referensi:
Created by : Its Kodinger.Hak cipta di lindungi oleh pengarang / pembuat !
Share This :
comment 0 komentar
more_vert