Penggunaan notifikasi pesan HTML5 (Pemberitahuan Web)

Saya telah menulis banyak artikel tentang HTML5, tetapi saya selalu merasa harus mempelajari API tingkat tinggi yang relevan. Hanya dengan memahami sistem dan memikirkan masalah dari tingkat yang lebih tinggi kita dapat memperoleh hasil dua kali lipat dengan setengah usaha.

Mari kita coba contoh paling sederhana terlebih dahulu. Buka alat pengembang chrome , tempelkan kodenya dan langsung jalankan:

 Notifikasi baru('Pemberitahuan pesan Jartto/', { dir: 'rtl', isi: 'Ini adalah pesan, dikirim melalui Notifikasi Web, sebagai ujian!', ikon: 'https://raw.githubusercontent.com / chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

Tidak ada notifikasi pesan yang muncul, apa yang terjadi? Jangan khawatir, teruslah membaca.

Berdasarkan contoh di atas, kami menjalankannya, namun tidak berhasil mengaktifkan kotak dorong pesan. Saat ini, Anda perlu memeriksa apakah pengguna diberi otorisasi. Masuk ke konsol: > Notification.permission

Segera kita akan menemukan bahwa izin pengguna asli adalah default . Karena pilihan pengguna tidak diketahui, perilaku browser sama dengan denied , yaitu penolakan.

Saat melihat API HTML5 tingkat tinggi ini, selalu ada beberapa kekhawatiran. Meskipun contohnya bagus dan mudah digunakan, namun bagaimana kompatibilitasnya adalah pertanyaan yang patut dipikirkan.

Seperti yang Anda lihat, pada dasarnya semua browser mendukungnya, kecuali iOS Safari dan Opera Mini , jadi aplikasi seluler perlu berhati-hati.

4. Dokumentasi API

Pertama mari kita memilah API secara sistematis. Ini sangat sederhana.

Kasus penggunaan:

 biarkan notifikasi = Notifikasi baru (judul, opsi)

parameter:

title : Judul notifikasi yang pasti akan ditampilkan

options: Objek yang boleh digunakan untuk mengatur notifikasi. Ini berisi properti berikut:

• dir : Arah teks; nilainya bisa auto (otomatis), ltr (kiri ke kanan), atau rtl (kanan ke kiri)
• lang: Menentukan bahasa yang digunakan dalam notifikasi. String ini harus valid dalam dokumen tag bahasa BCP 47.
• body: string tambahan yang ditampilkan di notifikasi
• tag: Berikan ID pada notifikasi sehingga notifikasi dapat disegarkan, diganti, atau dihapus bila diperlukan.
• icon: URL gambar yang akan digunakan untuk menampilkan ikon notifikasi.

milik:

Notifikasi.izin: Sebuah string yang menunjukkan status otorisasi tampilan notifikasi saat ini. Nilai yang mungkin meliputi:

• denied (pengguna menolak tampilan notifikasi),
• granted (pengguna mengizinkan notifikasi ditampilkan),
• default (karena pilihan pengguna tidak diketahui, browser berperilaku sama seperti ketika denied )

metode:

• Notifikasi.onclick: menangani peristiwa klik, yang dipicu setiap kali pengguna mengklik notifikasi.
• Notifikasi.onshow: menangani acara pertunjukan, yang dipicu saat notifikasi ditampilkan.
• Notifikasi.onerror: Menangani kejadian kesalahan, yang dipicu setiap kali notifikasi menemukan kesalahan.
• Notifikasi.onclose: menangani peristiwa penutupan, yang dipicu saat pengguna menutup notifikasi.
• Notifikasi.requestPermission(): Digunakan pada halaman saat ini untuk mengajukan izin kepada pengguna untuk menampilkan notifikasi.
• Notifikasi.close(): digunakan untuk menutup notifikasi.

Notifikasi.requestPermission Metode ini hanya bisa dipanggil berdasarkan perilaku pengguna (misalnya: event onclick) dan tidak bisa dipanggil dengan metode lain.

Berdasarkan API di atas, mari kita tulis contoh lengkapnya:

 function notifyMe(){ // Pertama periksa apakah browser mendukung if (!(Pemberitahuan di jendela)) { alert(Browser ini tidak mendukung pemberitahuan desktop } // Periksa apakah pengguna setuju untuk menerima pemberitahuan else if (Pemberitahuan. izin = == diberikan) { // Jika tidak apa-apa mari kita buat notifikasi var notifikasi = new Notifikasi(Halo! } // Jika tidak, kita perlu mendapatkan izin dari pengguna lain if (Notification.permission !== 'denied ') { Notifikasi.requestPermission(function (izin){ // Jika pengguna setuju, Anda dapat mengirimi mereka notifikasi if (izin === diberikan) { var notifikasi = new Notifikasi(Halo!); } } } // Akhirnya , Jika eksekusi mencapai titik ini, berarti pengguna menolak untuk mengotorisasi notifikasi terkait // Demi rasa hormat, kami tidak boleh mengganggu mereka lagi}

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.