Membuat Web Notification dengan Javascript
0 0
Assalamualaikum Wr. Wb . 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 menyiapkan sebuah file HTML yang bernama Notifikasi.html
- isi file Notifikasi.html sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <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 --> <!-- 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', { 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) :
Penjelasan :
Penjelasan 1 :
1
2
3
4
| $(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 :
1
2
3
4
| 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 :
1
2
3
4
| var notifikasi = new Notification('Judul Notifikasi', { body: "Belajar di Jago Coding, Sangat Menyenangkan !",}); |
Kode diatas berfungsi untuk membuat notifikasinya. silahkan ganti judul, gambar/icon dan isi notifikasinya.
Penjelasan 4 :
1
| notifikasi.onclick = function () { window.open("http://goo.gl/dIf4s1"); }; |
Kode diatas berfungsi jika kita mengklik notifikasi akan diarahkan ke link tersebut.
Penjelasan 5 :
1
2
3
| setTimeout(function(){ notifikasi.close();}, 5000); |
Kode diatas berfungsi untuk mengatur berapa lama notifikasi tersebut tetap muncul.
Sumber : Jagocoding.com
0 komentar:
Posting Komentar