Membuat Web Notification di browser dengan javascript
Saturday 3 June 2017
Edit
Pada kesempatan kali ini saya akan memeberikan tutorial singkat membuat web notification di browser dengan javascript, apa fungsi dari notifikasi.? fungsinya adalah memberi tahu user tentang informasi maupun peringatan yang sedang berlangsung. langsung saja berikut ini adalah tutorial singkatnya :
- Pertama siapkan sebuah file HTML di editor
- kemudian silahkan copy dan pastekan kode di bawah ini ke file HTML di editor, simpan dengan nama notif.html
<html>
<head>
<title>Web Notifikasi dengan Javascript | www.hakkoblogs.com</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="margin-top: 10px;">
<div class="row">
<center><button class="btn btn-primary" onclick="notifikasi()">
Klik Disini
</button></center>
</div>
</div>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Notifikasi Script -->
<script>
$(document).ready(function() {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifikasi() {
if (!Notification) {
alert('Browser kamu belum mendukung web notifikasi.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notifikasi = new Notification('www.hakkoblogs.com', {
icon: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-PyFDT7TRCBq4edhcfX4XDzOGrGAFkV2nfEhC1nVgY2p2EDFSI7LEhTUFupsCz4dh1f3l_n_3Np4NTof57ZSHIJBZb8IevAYPHtgRfiG8-_EuwgvNd3whAd6Kgkhtx0y9_rQUD8ehlnw/s1600/header2.jpg',
body: "Belajar Javascipt itu menyenangkan",
});
notifikasi.onclick = function () {
window.open("http://www.hakkoblogs.com");
};
setTimeout(function(){
notifikasi.close();
}, 10000);
}
};
</script>
</body>
</html>
- Jalankan di browser maka akan muncul tampilan seperti gambar di bawah ini
Penjelasan singkat kode :
$(document).ready(function() {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
Kode di atas merupakan pemberitahuan apakah mengijinkan untuk mengeksekusi web notifikasi biasanya akan muncul di address bar sebelah kiri browser, bila mengijinkan maka akan di eksekusi web notifikasinya.
function notifikasi() {
if (!Notification) {
alert('Browser kamu belum mendukung web notifikasi.');
return;
}
Kode di atas akan mendeteksi apakah browser kamu sudah mendukung web notifikasi atau belum, bila browser belum mendukung maka web notifikasi tidak akan bisa muncul.
var notifikasi = new Notification('www.hakkoblogs.com', {
icon: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-PyFDT7TRCBq4edhcfX4XDzOGrGAFkV2nfEhC1nVgY2p2EDFSI7LEhTUFupsCz4dh1f3l_n_3Np4NTof57ZSHIJBZb8IevAYPHtgRfiG8-_EuwgvNd3whAd6Kgkhtx0y9_rQUD8ehlnw/s1600/header2.jpg',
body: "Belajar Javascipt itu menyenangkan",
});
Kode di atas merupakan tampilan yang akan muncul di notifikasi yang akan di buat, kamu bisa menggati judul notifikasi, Icon atau gambar notifikasi dan isi dari notifikasi yang akan kamu buat.
notifikasi.onclick = function () {
window.open("http://www.hakkoblogs.com");
};
Kode di atas merupakan link atau URL tujuan ketika notifikasi di klik.
setTimeout(function(){
notifikasi.close();
}, 10000);
Kode di atas merupakan settingan waktu untuk mengatur berapa lama notifikasi akan muncul
Bagaimana cukup mudah bukan membuat web notifikasi.? pastinya ya, semoga tutorial singkat ini bisa membantu kamu dalam membuat notifikasi di web, silahkan di pelajari dan dipraktekkan.
Happy Coding & Programming