Tips Cepat : Cara Termudah untuk Menampilkan Pemberitahuan Browser

Pemberitahuan Web JavaScript memungkinkan browser dekstop dan mobile untuk menampilkan notifikasi dengan konten khusus. Meskipun dukungannya dulu sangat tidak konsisten, API sekarang kompatibel dengan kebanyakan browser modern dan kita sudah melihatnya diimplementasikan dibanyak situs web dan aplikasi.

Pada artikel ini kami akan menunjukan cara tercepat untuk memasang notifikasi browser menggunakan library open source Push.js.

Setup Projek

Kita akan membuat aplikasi sederhana yang meminta izin dan kemudian mengirimkan pemberitahuan pada button klik. Untuk kesederhanaan kita akan bekerja pada satu file index.html dengan skript inline. Sumber lengkapnya tersedia di Github.

Hal pertama yang perlu kita lakukan adalah menyertakan librarynya. Push.js dapat diinstall melalui via npm atau file lokal, namun cara termudah untuk menerapkannya yakni melalui CDN :

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

Library Push.js tidak diperlukan untuk bekerja dengan Web Notifikasi, namun API menawarkan yang jauh lebih mudah untuk bekerja dibandingkan dengan Notifikasi API asli. Push.js akan menangani permission, service worker, dan inkonsistensi lintas browser, jadi kita tidak perlu melakukannya.

Request Permission

Pengguna perlu memberi izin (permission) sebelum kita bisa mengirimkan notifikasi. Hal ini dilakukan melalui dialog browser built-in yang mungkin sudah Anda saksikan :

permission-request

Push.js secara otomatis meminta izin saat kita mencoba mengirimkan notifikasi pertama kita. Namun, dalam banyak kasus, kita ingin secara manual meminta pengguna terlebih dahulu.

Push.Permission.request();

Sekarang kita akan membuka dialog browser yang mendorong pengguna untuk menerima atau menolak untuk menerima pemberitahuan. Jika permission telah diberikan atau ditolak, kode diatas akan diabaikan.

Membuat Notifikasi

Untuk menampilkan notifikasi, kita cukup memanggil metode Push.create, yang mengharapkan sebuah judul dan objek opsional yang memegang semua jenis preferensi dan callback yang berguna :

Push.create('Hi there!', {
    body: 'This is a notification.',
    icon: 'icon.png',
    timeout: 8000,               // Timeout before notification closes automatically.
    vibrate: [100, 100, 100],    // An array of vibration pulses for mobile devices.
    onClick: function() {
        // Callback for when the notification is clicked. 
        console.log(this);
    }  
});

Hasilnya akan menampilkan notifikasi button klik, namun interaksi pengguna tidak diperlukan, notifikasi baru dapat dibuat kapan saja, termasuk saat tab tidak aktif saat ini.

notification

Pastikan tidak terlalu mengganggu pengguna. Kirim notifikasi hanya bila Anda ingin memperbaruinya pada sesuatu yang penting seperti teks pesan baru atau permintaan pertemanan baru.

Kompatibilitas Browser

Notifikasi API didukung di kebanyakan browser modern. Untuk melihat apakah browser pilihan Anda mendukungnya. Hal ini harus bekerja tanpa masalah di Chrome dekstop, Firebox dan Safari, serta Chrome untuk Android. Satu-satunya klien populer yang hilang dari daftar ini adalah iOS Safari, yang tidak menyediakan pemberitahuan web apa pun.

Hal lain yang penting untuk dicatat disini adalah agar pemberitahuan yang akan ditampilkan di Android, aplikasi web harus dihosting melalui HTTPS.

Bacaan lainnya

Notifikasi merupakan penambahan yang relatif baru dalam dunia browser namun dapat diperkirakan akan semakin banyak melihatnya, terutama karena progresif Web Apps menjadi lebih populer seperti facebook, whatsApp. Jika Anda ingin mempelajari lebih lanjut tentang notifikasi JavaScript, berikut beberapa resource yang kami sarankan Anda untuk melihatnya.

  • Sebuah postingan blog oleh creator Push.js membahas mengapa dia menciptakan projek dan rencana untuk masa depannya. Disini
  • Push API – API baru yang mengagumkan  memungkinkan pengguna menerima pemberitahuan meskipun aplikasi web tidak terbuka. Disini
  • Hal apa yang membuat notifikasi yang baik? Artikel Google Developer tentang cara membuat notifikasi lebih baik. Disini

Comments

comments