Cara mengimplementasikan fungsi notifikasi desktop Notifikasi Web di HTML5

Terkadang kita akan melihat perintah ini di pojok kanan bawah desktop:

Perintah desktop ini adalah teknologi Pemberitahuan Push Web baru dari HTML5.

Teknologi Notifikasi Web memungkinkan halaman mengeluarkan notifikasi yang akan ditampilkan pada tingkat sistem di luar halaman. Ini dapat memberikan pengalaman yang lebih baik kepada pengguna. Bahkan ketika pengguna sedang sibuk dengan pekerjaan lain, mereka dapat menerima pemberitahuan pesan dari halaman, seperti pengingat email baru, atau pengingat pesan yang diterima di ruang obrolan online, dll.

PS: Selain IE, semua browser modern utama memiliki dukungan dasar untuk desktop push ini.

awal

Untuk membuat notifikasi pesan caranya sangat sederhana, cukup gunakan kelas Notifikasi di bawah objek window.

 var n = Notifikasi baru(Desktop push, { icon: 'img/icon.png', body: 'Ini adalah notifikasi desktop pertama saya.', image: 'img/1.jpg'});

Kemudian Anda akan melihat notifikasi tangkapan layar yang saya ambil di atas muncul di desktop sistem.

PS: Notifikasi pesan hanya akan berlaku bila halaman diakses melalui layanan Web. Jika langsung klik dua kali untuk membuka file lokal, tidak akan berpengaruh. Artinya, file Anda harus dibuka di server daripada langsung menggunakan browser untuk membuka file lokal.

Tentu saja, mungkin saja Anda tidak melihat apa pun, jadi jangan khawatir dan lanjutkan membaca.

Tentu saja, sebelum Anda ingin memunculkan notifikasi di atas, Anda perlu memahami sintaks dasar sebuah notifikasi:

 biarkan myNotification = Notifikasi baru (judul, opsi);

title: Menentukan judul notifikasi yang akan ditampilkan di bagian atas jendela notifikasi saat dipicu.

Objek opsi (opsional) berisi opsi pengaturan khusus apa pun yang berlaku untuk notifikasi.

body: Isi notifikasi, yang akan ditampilkan di bawah judul.

tag: Mirip dengan ID setiap notifikasi sehingga notifikasi dapat di-refresh, diganti atau dihapus bila diperlukan.

ikon: ikon untuk menampilkan notifikasi

gambar: URL gambar yang akan ditampilkan di badan notifikasi.

data: Data apa pun yang ingin Anda kaitkan dengan notifikasi. Ini bisa berupa tipe data apa pun.

renotify: Boolean yang menentukan apakah pengguna harus diberi tahu setelah pemberitahuan baru menggantikan pemberitahuan lama. Nilai defaultnya adalah false, yang berarti mereka tidak akan diberi tahu.

requireInteraction: menunjukkan bahwa notifikasi harus tetap aktif hingga pengguna mengklik atau menutupnya, bukan menutup secara otomatis. Nilai defaultnya adalah salah.

Saat kode ini dijalankan, browser akan menanyakan pengguna apakah mengizinkan situs menampilkan notifikasi pesan, seperti terlihat pada gambar berikut:

Notifikasi hanya akan ditampilkan jika pengguna mengklik Izinkan dan mengotorisasi notifikasi.

Bagaimana cara mengetahui apakah pengguna mengklik izinkan atau blokir?

Contoh jendela Notifikasi memiliki fungsi requestPermission untuk mendapatkan status otorisasi pengguna:

 // Pertama, kita periksa apakah kita punya izin untuk menampilkan notifikasi // Jika tidak, kita ajukan izin if (window.Notification && Notification.permission !== diberikan) { Notifikasi.requestPermission(function (status) { //status adalah status otorisasi . //Jika pengguna mengklik Izinkan, statusnya adalah 'diberikan' // Jika pengguna mengklik Nonaktifkan, statusnya adalah 'ditolak' // Ini akan memungkinkan kita untuk menggunakan Notifikasi.izin jika di Chrome/Safari (Pemberitahuan.izin !== status) { Pemberitahuan.izin = status;

Catatan: Jika pengguna mengklik tombol tutup di sudut kanan atas otorisasi, nilai status adalah default.

Setelah itu, kita hanya perlu menentukan apakah nilai status diberikan untuk memutuskan apakah akan menampilkan notifikasi tersebut.

Namun menampilkan kotak pesan saja tidaklah menarik, jadi notifikasi pesan harus memiliki tingkat interaktivitas tertentu, dan peristiwa harus dilibatkan sebelum dan sesudah menampilkan pesan.

Notifikasi telah merumuskan serangkaian fungsi acara sejak awal. Pengembang dapat menggunakan fungsi ini untuk menangani interaksi pengguna secara komprehensif:

Ada: onshow, onclick, onerror, onclose.

 var n = Notifikasi baru(Desktop push, { icon: 'img/icon.png', body: 'Ini adalah notifikasi desktop pertama saya.'}); //fungsi onshow terpicu saat kotak pesan ditampilkan // Oke Lakukan beberapa rekaman data dan tutup kotak pesan secara teratur n.onshow = function() { console.log('Tampilkan kotak pesan'); //Tutup kotak pesan setelah 5 detik setTimeout(function() { n.close(); } , 3000);};//Dipanggil ketika kotak pesan diklik //Anda dapat membuka tampilan yang relevan, menutup kotak pesan, dan operasi lainnya secara bersamaan n.onclick = function() { console.log('Klik pesan box'); // Buka tampilan yang relevan n.close();};//Ketika terjadi kesalahan, fungsi onerror akan dipanggil //Jika tidak ada otorisasi yang diberikan, fungsi onerror juga akan dijalankan saat membuat a Contoh objek notifikasi n.onerror = function() { console.log('Kesalahan kotak pesan'); // Lakukan hal lain}; // Fungsi onclose akan dipanggil ketika kotak pesan ditutup n.onclose = function() { console.log('Tutup kotak pesan'); ) ; //Lakukan hal lain};

sebuah contoh sederhana

 <!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>Dokumen</title> </head> <body> <button>Klik untuk memulai notifikasi</button> < / body> <script> window.addEventListener(load, function() { // Pertama, mari kita periksa apakah kita mempunyai izin untuk mengirim notifikasi // Jika tidak, kita minta izin if (window.Notification && Notification.permission !== diberikan) { Notifikasi.requestPermission(fungsi(status) { if (Notification.permission !== status) { Notifikasi.permission = status; } } } var button = document.getElementsByTagName(button)[0]; button.addEventListener(klik, function() { // Buat notifikasi jika pengguna setuju if (window.Notification && Notice.permission === diberikan) { var n = new Notifikasi(Hai! } // Jika pengguna tidak memilih apakah akan menampilkan notifikasi // Catatan: Karena di Chrome kita tidak dapat menentukan apakah atribut izin mempunyai nilai, maka tidak aman untuk // memeriksa apakah nilai atribut ini adalah default else if (window.Notification && Notice.permission !== ditolak) { Notifikasi.requestPermission(function(status) { if (Notification.permission !== status) { Notifikasi.permission = status; } // Jika pengguna setuju if (status === diberikan) { var n = new Notifikasi(Hai! } // Jika tidak, kita dapat berkompromi dan menggunakan mode reguler alert else { alert(Hai!!); // Jika pengguna menolak untuk menerima notifikasi else { // Kita dapat berkompromi dan menggunakan mode peringatan alert(Hai! } });

Saat kita membuka antarmuka, akan muncul aplikasi otorisasi. Jika kita klik Izinkan lalu klik tombolnya, notifikasi akan dikirim ke desktop, dan kita bisa melihat notifikasi ini di pojok kanan bawah desktop.

Di atas kami hanya menampilkan pesan.

 if (status === diberikan) { var n = Notifikasi baru(Hai);}

Jika kita memiliki banyak pesan, misalnya, saya menggunakan loop for untuk mensimulasikan notifikasi dalam jumlah besar.

 untuk(var i=0; i<10; i++) { var n = Pemberitahuan baru(Hai,+i);}

Anda dapat melihat 10 notifikasi ditampilkan. Namun dalam beberapa kasus, menampilkan notifikasi dalam jumlah besar dapat menyusahkan pengguna.

Misalnya, jika aplikasi perpesanan instan meminta pengguna untuk setiap pesan masuk. Untuk menghindari membanjiri desktop pengguna dengan ratusan notifikasi yang tidak perlu, mungkin perlu mengambil alih antrean pesan yang tertunda.

Oleh karena itu, perlu ditambahkan tag pada notifikasi yang baru dibuat.

Jika ada notifikasi baru dengan tag yang sama dengan notifikasi sebelumnya, maka notifikasi baru tersebut akan menggantikan notifikasi sebelumnya, dan hanya notifikasi terbaru yang akan ditampilkan di desktop.

Masih menggunakan contoh di atas, Anda hanya perlu menambahkan atribut tag pada trigger notifikasi:

 for (var i = 0; i < 10; i++) { // Terakhir, hanya notifikasi dengan konten Hi! 9 yang akan terlihat var n = new Notifikasi(Hai! + i, {tag: 'soManyNotification'});}

Pemberitahuan pesan adalah fitur yang bagus, tetapi tidak menutup kemungkinan bahwa beberapa situs menggunakan fungsi ini dengan jahat. Setelah pengguna mengizinkannya, mereka akan mengirimkan beberapa pesan yang tidak ramah dari waktu ke waktu dan mengganggu pekerjaan pengguna izin situs. Nonaktifkan fitur pemberitahuan pesannya.

Kita bisa mengklik tanda seru di sisi kiri kotak input alamat browser dan akan ada opsi notifikasi, dan kita bisa mengubah otorisasinya. Atau ada opsi untuk mengubah notifikasi di halaman notifikasi, dan Anda dapat mengubah notifikasi otorisasi sesuai dengan situasi spesifik.

Jadi Notifikasi Web paling dasar diterapkan.

Di atas adalah metode implementasi fungsi notifikasi desktop Notifikasi Web dalam HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!