Assalamualaikum Wr. Wb . Halo Sahabat Jago Coding. Pada kesempatan kali ini saya akan menuliskan tutorial tentang .Membuat Web Notification dengan Javascript. Sesuai nama nya notification berfungsi untuk memberitahu user jika ada suatu peringatan tertentu. berikut tutorialnya : Pertama disini saya meny...

Membuat Web Notification dengan Javascript

Assalamualaikum Wr. Wb . Halo Sahabat Jago Coding. Pada kesempatan kali ini saya akan menuliskan tutorial tentang Membuat Web Notification dengan Javascript . Sesuai nama nya notification berfungsi untuk memberitahu user jika ada suatu peringatan tertentu. berikut tutorialnya :

  1. Pertama disini saya menyiapkan sebuah file HTML yang bernama Notifikasi.html
  2. isi file Notifikasi.html sebagai berikut :
<html>
	<head>
		<title>Web Notifikasi dengan Javascript</title>
		
		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container" style="margin-top: 10px;text-align:center;">
			<div class="row">
				<button class="btn btn-warning" onclick="notifikasi()">
					Klik Disini
				</button>
			</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('Browsermu tidak mendukung Web Notification.'); 
					return;
				}
				if (Notification.permission !== "granted")
					Notification.requestPermission();
				else {
					var notifikasi = new Notification('Judul Notifikasi', {
						icon: 'http://jagocoding.com/theme/New/img/logo.png',
						body: "Belajar di Jago Coding, Sangat Menyenangkan !",
					});
					notifikasi.onclick = function () {
						window.open("http://goo.gl/dIf4s1");      
					};
					setTimeout(function(){
						notifikasi.close();
					}, 5000);
				}
			};
		</script>
	</body>
</html>

Code diatas akan menghasilkan tampilan sebagai berikut (Klik Disini) :

Membuat Web Notification dengan Javascript

Penjelasan :

Penjelasan 1 :

$(document).ready(function() {
     if (Notification.permission !== "granted")
     Notification.requestPermission();
});

Kode diatas berfungsi untuk meminta apakah diperbolehkan menggunakan fungsi Notifikasi web browser. jika di ijinkan akan melanjutkan kefungsi berikutanya.

Penjelasan 2 :

if (!Notification) {
   alert('Browsermu tidak mendukung Web Notification.'); 
   return;
}

Kode diatas berfungsi untuk mengecek apakah browser anda support fungsi Notifikasi. jika support maka akan melanjutkan ke kode berikutnya. dan jika tidak akan keluar alert  Browsermu tidak mendukung Web Notification.

Penjelasan 3 :

var notifikasi = new Notification('Judul Notifikasi', {
    icon: 'http://jagocoding.com/theme/New/img/logo.png',
    body: "Belajar di Jago Coding, Sangat Menyenangkan !",
});

Kode diatas berfungsi untuk membuat notifikasinya. silahkan ganti judul, gambar/icon dan isi notifikasinya.

Penjelasan 4 :

notifikasi.onclick = function () { window.open("http://goo.gl/dIf4s1"); };

Kode diatas berfungsi jika kita mengklik notifikasi akan diarahkan ke link tersebut.

Penjelasan 5 :

setTimeout(function(){
    notifikasi.close();
}, 5000);

Kode diatas berfungsi untuk mengatur berapa lama notifikasi tersebut tetap muncul.

Sekian dari saya, Jika ada pertanyaan silahkan ditanyakan. Wassalamualaikum Wr. Wb


About Author

Bramanda Febri S

Newbie Programer | Bisa Karena Mau , Tidak Suka Menyerah


Comment & Discussions

  • tommy
    untuk membuat isi notifikasi caranya bagaimana om?

  • halo agan ..
    saya mau tanya untuk script di atas, kalo popup itu muncul ketika ada data baru masuk ke table gimana caranya ya??

    tanpa harus klik

    terima kasih sebelumnya

  • Fadli Reizandi
    Kalau pakai web browser di smartphone g muncul notifnya

  • Please LOGIN before if you want to give the comment.