Tutorial Menciptakan Notifikasi Browser Dengan Push.Js
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.min.js"></script> Hal yang perlu kau ketahui yaitu ketika kau jalankan Push.js di browser Google Chrome maka kau harus memakai SSL(HTTPS). Jadi, untuk percobaan maka kau sanggup gunakan browser selain Chrome, dalam kasus ini saya gunakan Firefox.
Meminta Izin Pengguna
Sama halnya menyerupai Geolocation, untuk mengirim notifikasi ke browser pengguna perlu perizinan dari pengguna terlebih dahulu. Untuk problem ini Push.js sudah menyiapkan API-nya untuk kita meminta izin pada pengguna.
Push.Permission.request(onGranted, onDenied); Method tersebut mempunyai 2 callback, yaitu
onGranted dan onDenied. onGranted callback pada dikala pengguna mengizinkan notifikasi dan onDenied callback pada dikala pengguna menolak untuk dikirim notifikasi.Membuat Notifikasi
Membuat sebuah notifikasi dengan Push.js sangatlah mudah, kau hanya perlu menggunakan method
Push.create(title, object) dan notifikasi akan muncul di browser pengguna.Push.create("Hello, world!"); Dengan instruksi di atas maka hanya akan menampilkan notifikasi dengan judul “Hello, world!” saja.
Untuk lebih lengkapnya, kau sanggup 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, kini 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 instruksi berikut untuk memberikan event listener terhadap tombol “Tampilkan Notifikasi”.
Push.create("Hello, world!");<script> document.getElementById('notify').addEventListener('click', () => { alert('Hello!'); }); </script> Letakkan instruksi tersebut sebelum tag
</body>. Dengan instruksi tersebut maka ketika tombol diklik akan memunculkan kotak dialog dengan goresan pena “Hello!”, itu hanya sebagai percobaan saja. Kemudian kita akan meminta izin pengguna untuk menampilkan notifikasi dan mengirim notifikasi kalau diizinkan dengan instruksi berikut:
Push.Permission.request(() => { Push.create('Kodinger.com', { body: 'Hello, ini yaitu notifikasi dari tutorial kodingid.com.', icon: '<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 yaitu notifikasi dari tutorial Kodinger.com.', icon: 'Demo Download
Referensi: Created by : Its Kodinger.
Hak cipta di lindungi oleh pengarang / pembuat !