Cara Mengirim Notifikasi Push Dengan JavaScript

Notifikasi JavaScript adalah cara untuk mengirim pesan ke pengguna Anda secara real-time. Anda dapat menggunakannya untuk memberi tahu tentang pembaruan situs web Anda, pesan obrolan baru, email, atau aktivitas media sosial apa pun. Anda juga dapat menggunakan notifikasi untuk pengingat kalender (seperti rapat yang akan datang di Google Meet atau Zoom).

Pelajari cara membuat notifikasi acara dalam JavaScript dan mengirimkannya ke ponsel atau browser web Anda. Anda akan mencapai ini menggunakan JavaScript sisi-klien bawaan—tidak diperlukan pustaka eksternal!

Meminta Izin untuk Mengirim Notifikasi

Untuk membuat notifikasi, Anda perlu memanggil Pemberitahuan kelas untuk membuat objek. Ini memberi Anda akses ke berbagai properti dan metode yang dapat Anda gunakan untuk mengonfigurasi notifikasi Anda. Namun sebelum membuat notifikasi, Anda harus terlebih dahulu meminta izin dari pengguna.

JavaScript berikut akan meminta izin untuk mengirimkan notifikasi pengguna. Itu requestPermission panggilan akan mengembalikan pesan yang menunjukkan apakah browser mengizinkan pemberitahuan atau tidak:

const tombol = dokumen.querySelector('tombol')
 button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(izin => {
 waspada (izin)
 })
})

Saat Anda mengeklik tombol, Anda mungkin mendapat peringatan yang berbunyi ditolak. Ini berarti bahwa browser telah menolak JavaScript untuk mengirimkan notifikasi acara. Status izin adalah ditolak untuk kasus di mana pengguna secara eksplisit mencegah situs untuk mengirim pemberitahuan (melalui pengaturan browser) atau pengguna berselancar dalam mode penyamaran.

Untuk kasus seperti itu, sebaiknya hormati keputusan pengguna untuk menolak notifikasi dan sebaiknya jangan mengganggu mereka lebih lanjut.

Mengirim Notifikasi Dasar

Anda membuat pemberitahuan push dengan membuat Pemberitahuan objek dengan kata kunci baru. Untuk mendalami pemrograman berorientasi objek, Anda dapat merujuk ke panduan kami di cara membuat kelas di JavaScript.

Karena Anda akan mengirimkan notifikasi hanya jika izin diberikan, Anda harus membungkusnya di dalam file jika memeriksa.

const tombol = dokumen.querySelector('tombol')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
jika(perm 'diberikan') {
baru Pemberitahuan("Contoh pemberitahuan")
 }
 })
})

Klik tombolnya, dan Anda akan mendapatkan pemberitahuan push di pojok kanan bawah browser web Anda dengan teks yang ditentukan.

Ini adalah cara paling dasar untuk membuat notifikasi, dan ini berfungsi di ponsel Anda dan juga di komputer Anda. Mari kita lihat beberapa properti notifikasi tingkat lanjut.

Properti Notifikasi Lanjutan

Selain judul notifikasi, Anda juga bisa meneruskan argumen opsi ke konstruktor saat membuat objek notifikasi. Argumen opsi ini harus berupa objek. Di sini, Anda dapat menambahkan beberapa opsi untuk menyesuaikan notifikasi Anda.

Properti tubuh

Properti pertama yang harus Anda ketahui adalah tubuh Properti. Anda akan menggunakan ini untuk menambahkan isi notifikasi, biasanya untuk menyampaikan lebih banyak informasi dalam bentuk teks. Berikut ini contoh sederhana:

const tombol = dokumen.querySelector('tombol')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
jika(perm 'diberikan') {
baru Pemberitahuan("Contoh pemberitahuan", {
 tubuh: "Ini lebih banyak teks",
 })
 }
 })
})

Jika Anda menjalankan kode ini, teks isi akan ditampilkan di notifikasi push, di bawah Contoh pemberitahuan tajuk.

Atribut data

Sering kali Anda mungkin ingin menambahkan data khusus ke notifikasi. Mungkin Anda ingin menampilkan pesan kesalahan tertentu jika izin ditolak, atau menyimpan data yang Anda terima dari API. Untuk semua kasus seperti itu, Anda dapat menggunakan data properti untuk menambahkan data khusus ke notifikasi Anda.

button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
jika(perm 'diberikan') {
const pemberitahuan = baru Pemberitahuan("Contoh pemberitahuan", {
 tubuh: "Ini lebih banyak teks",
 data: {Halo: "dunia"}
 })

 peringatan (pemberitahuan.data.hello)
 }
 })
})

Anda dapat mengakses data dari data properti serupa dengan yang ditunjukkan pada blok kode di atas (di dalam file peringatan()).

Anda juga dapat mengikat pendengar acara ke notifikasi Anda. Misalnya, pendengar acara berikut dijalankan setiap kali Anda menutup pemberitahuan push. Fungsi panggilan balik hanya mencatat pesan khusus.

const pemberitahuan = baru Pemberitahuan("Contoh pemberitahuan", { 
 tubuh: "Ini lebih banyak teks",
 data: {Halo: "dunia"} 
})
pemberitahuan. tambahkanEventListener("menutup", e => {
menghibur.log (e.target.data.hello)
})

Ini adalah cara terbaik untuk menyebarkan data jika Anda perlu melakukan sesuatu saat seseorang menutup pemberitahuan atau mengekliknya. Bagian dari menutup acara (yang dijalankan saat Anda menutup notifikasi), Anda harus menyimpannya pendengar acara di dalam pikiranmu:

• menunjukkan: Dijalankan saat notifikasi muncul.
• klik: Dijalankan saat pengguna mengeklik di mana saja pada notifikasi.
• kesalahan: Dijalankan saat Anda menolak izin JavaScript untuk mengirim pemberitahuan.

Properti ikon

Itu ikon properti adalah untuk menambahkan ikon ke pemberitahuan push. Dengan asumsi Anda memiliki logo ikon bernama logo.png di direktori saat ini, Anda dapat menggunakannya di notifikasi seperti ini:

const pemberitahuan = baru Pemberitahuan("Contoh pemberitahuan", { 
 ikon: "logo.png"
})

Jika Anda kesulitan untuk menautkan ke file Anda, Anda perlu melakukannya memahami cara kerja URL relatif dan URL absolut.

Saat Anda menyimpan file, menyegarkan browser, dan mengklik tombol, notifikasi akan menampilkan gambar di sisi kiri header dan badan.

Atribut tag

Ketika Anda mengatur menandai atribut di notifikasi Anda, pada dasarnya Anda memberi notifikasi ID unik. Dua notifikasi tidak dapat digabungkan jika keduanya memiliki tag yang sama. Sebaliknya, notifikasi terbaru akan menimpa notifikasi lama.

Pertimbangkan contoh tombol kami sebelumnya (tanpa tag). Jika Anda mengklik tombol tiga kali berturut-turut dengan cepat, tiga notifikasi akan muncul, dan mereka akan bertumpuk satu sama lain. Sekarang katakanlah Anda menambahkan tag berikut ke notifikasi:

const pemberitahuan = baru Pemberitahuan("Contoh pemberitahuan", { 
 tubuh: "Ini lebih banyak teks",
 menandai: "Tag baru saya"
})

Jika Anda mengklik tombol lagi, hanya satu kotak notifikasi yang akan muncul. Setiap klik berikutnya akan menimpa notifikasi sebelumnya, jadi hanya satu notifikasi yang akan muncul tidak peduli berapa kali Anda mengklik tombol tersebut. Ini berguna jika Anda ingin menambahkan data dinamis (seperti Matematika.random()) ke tubuh:

const pemberitahuan = baru Pemberitahuan("Contoh pemberitahuan", { 
 tubuh: Matematika.acak()
 ikon: "logo.png",
 menandai: "Tanda tubuh saya"
})

Setiap kali Anda mengklik tombol, nomor baru akan muncul. Gunakan properti tag jika Anda ingin menimpa notifikasi saat ini dengan informasi baru di dalamnya. Di aplikasi perpesanan, misalnya, Anda dapat menggunakan atribut tag untuk menimpa notifikasi dengan pesan baru.

Contoh Push Notification Menggunakan JavaScript

Contoh berikut mendeteksi kapan saja Anda kehilangan fokus pada halaman Anda (yaitu saat Anda menutup halaman atau membuka tab baru). Dalam hal ini, kode mengirimkan pemberitahuan yang meminta Anda untuk kembali:

membiarkan pemberitahuan
dokumen.addEventListener("perubahan-visibilitas", ()=> {
jika(dokumen.visibilityState "tersembunyi") {
 pemberitahuan = baru Pemberitahuan("Kembalilah", {
 tubuh: "Jangan pergi dulu :("
 menandai: "Kembali"
 })
 } kalau tidak {
 notifikasi.tutup()
 }
})

Setiap kali Anda kehilangan fokus pada halaman tersebut, Anda akan mendapatkan notifikasi yang meminta Anda untuk kembali ke halaman tersebut. Tapi begitu Anda kembali ke halaman, itu kalau tidak blok dijalankan, yang menutup pemberitahuan push. Teknik ini sangat baik dalam situasi di mana Anda ingin memberikan semacam informasi kepada pengguna setelah meninggalkan halaman Anda.

Pelajari Lebih Lanjut Tentang JavaScript

Notifikasi acara hanyalah salah satu dari banyak fitur yang dapat Anda temukan di JavaScript. Agar benar-benar mahir dengan notifikasi, Anda harus terlebih dahulu memahami fitur bahasa dasar dan sintaksis JavaScript. Membuat game sederhana adalah salah satu cara untuk meningkatkan keterampilan dan membiasakan diri dengan konsep dasar bahasa.