malam ini saya masih berkutat dengan HTML5 dan Javascript. sangat susah untuk memahami materi seberat ini tanpa ada yg membimbing dan jujur itulah yang saya alami sekarang. saya harap ketika seseorang di luar sana membaca ini dan telah lebih bisa memahami dibandingkan saya, saya bisa mendapatkan bimbingan dari beliau karena saya pribadi sangat tertarik di dunia ini. mungkin sekarang kemampuan saya masih sangatlah kuran namun saya yakin, jika saya tekun, suatu saat nanti saya pasti bisa menguasai bidang ini. malam ini saya mencoba belajar membuat notifikasi dengan HTML5 dan Javascript, heemm,,, pusing pusing pusing tapi semangat saya masih belum padam. berikut akan saya mencoba membuat artikel tentang langkah langkah yang saya ketahui, mohon koreksi jika ternyata saya salah.
Biasanya untuk membuat notifikasi, Anda dapat menggunakan perintah
alert('isi notifikasi') pada JavaScript. Sayangnya, biasanya alert membuat browser menjadi memblokir semua input di yang dimasukkan sampai dialog alert nya tersebut ditutup.
Pada artikel ini, saya akan membahas tentang cara membuat notifikasi yang lebih elegan pada halaman web Anda menggunakan JavaScript. Namun sayangnya, untuk saat ini tidak semua browser mendukung pembuatan notifikasi.
Untuk mengecek apakah browser yang Anda gunakan mendukung notifikasi, Anda dapat menggunakan perintah berikut :
if(window.webkitNotifications){// bworser mendukung }else{// bworser tidak mendukung}
Setelah itu, Anda tidak dapat langsung menampilkan notifikasi, Anda permu meminta izin ke orang yang mengakses halaman web Anda dengan perintah :
window.webkitNotifications.requestPermission();
Dan untuk mengecek apakah user sudah menyetujuinya, Anda dapat menggunakan perintah :
if(window.webkitNotifications.checkPermission() != 0){// user sudah menyetujui }else{// user belum menyetujui}
Selanjutnya, untuk menampilkan notifikasi, Anda dapat menggunakan perintah sebagai berikut :
var notification = window.webkitNotifications.createNotification(image, title, message);
Dimana,
image adalah gambar yang akan ditampilkan. title adalah judul dialog notifikasi dan message adalah isi pesan notifikasi. Selanjutnya untuk menampilkannya anda dapat menggunakan metode show().notification.show();
Contoh lengkapnya adalah sebagai berikut :
function checkSupport(){
if(window.webkitNotifications){
alert("Ok!!! Mantap");
}else{
alert("Ups, browser Anda tidak mendukung notifikasi");
}
}
function checkPermission(){
if(window.webkitNotifications.checkPermission() != 0){
window.webkitNotifications.requestPermission();
}
}
function showNotification(image, title, message){
var notification = window.webkitNotifications.createNotification(image, title, message);
notification.show();
}
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<button onclick="checkSupport();">Check is Supported</button>
<br/>
<button onclick="checkPermission();">Check Permission</button>
<br/>
<button onclick="showNotification('http://a0.twimg.com/profile_images/1556025876/blankon_normal.jpg','Judul','Isi Notifikasi :D');">Show Notification</button>
</body>
</html>
Silahkan Tinggalkan Komentar tentang artikel ini
0 Tanggapan:
Post a Comment