Implementasi notifikasi desktop Notifikasi di Html5

Kata Pengantar: Bagi seorang front-end developer, saya selalu memperhatikan beberapa fungsi baru saat browsing web. Bagi saya yang selalu menggunakan Teambition di tempat kerja, saya selalu menerima Notifikasi... Jadi hari ini saya akan mempelajari fungsi H5 ini...

 let n = new Notifikasi( Ini adalah pesan notifikasi, //Ini adalah Judul yang diperlukan dan judul notifikasi yang akan ditampilkan { icon: xxx.png, // Ikon ini digunakan untuk menampilkan gambar kiri di badan notifikasi: Halo, saya xxx, // Karakter konten di direktori notifikasi: auto, // Nilai arah teks meliputi: auto (otomatis), ltr (kiri ke kanan), rtl (kanan ke kiri) tag: gxlself / / Berikan ID untuk pesan notifikasi ini, Digunakan untuk menyegarkan, menghapus, mengganti, dan operasi lain pada pesan pemberitahuan ini // panjang: en-US //Bidang lang perlu merujuk ke https://tools.ietf.org/html/bcp47 tidak berpengaruh.. // ... // Lihat properti instance di bawah untuk properti opsional lainnya})

n.actions // Array objek NotifikasiAction yang hanya dapat dibaca. Setiap objek menjelaskan satu tindakan yang dapat dipilih pengguna dalam notifikasi.

n.image // URL gambar yang ditampilkan sebagai bagian dari notifikasi

n.badge // URL gambar yang digunakan untuk mewakili notifikasi ketika tidak ada cukup ruang untuk menampilkan notifikasi itu sendiri.

n.permission // Ada tiga nilai: granted , denied , atau default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝

n.renotify // Nilai Boolean. Apakah akan mengganti notifikasi sebelumnya ketika muncul yang baru. Jika disetel benar berarti penggantian, artinya hanya akan muncul satu notifikasi tanda saat ini. Perhatikan markup saat ini di sini? Benar, agar parameter true berfungsi, tag必须menyetel nilai atribut.

n.requireInteraction // Nilai Boolean, mengacu pada apakah notifikasi tetap aktif hingga pengguna mengklik atau membatalkan notifikasi alih-alih menutup secara otomatis..

n.silent // Nilai Boolean. Apakah harus ada suara saat muncul notifikasi. Standarnya false , yang artinya diam.

n.timestamp //Waktu ketika notifikasi dibuat atau dapat digunakan.

n.data // Semua jenis data yang terkait dengan notifikasi.

n.vibrate // Saat notifikasi ditampilkan, mode getaran yang dibutuhkan oleh perangkat keras getaran perangkat. Yang disebut mode getaran mengacu pada larik yang menggambarkan waktu pergantian, yang masing-masing mewakili jumlah milidetik getaran dan non-getaran, dan terus bergantian. Misalnya, [200, 100, 200] berarti perangkat bergetar selama 200 milidetik, lalu berhenti selama 100 milidetik, lalu bergetar selama 200 milidetik. (versi seluler)

n.suara // String. Alamat audio. Menunjukkan pemberitahuan adanya sumber suara yang akan diputar.

n.sticky // Adsorpsi notifikasi tidak mudah dihapus... (versi seluler)

n.noscreen // Nilai Boolean. Apakah akan berhenti menampilkan informasi notifikasi di layar. Standarnya adalah false , yang berarti konten notifikasi harus ditampilkan di layar. (versi seluler)

1> acara klik pengguna onclick pada informasi notifikasi

2> acara pertunjukan dipicu setelah pesan notifikasi ditampilkan

3> onerror adalah peristiwa yang akan dipicu ketika terjadi kesalahan.

4> Penanganan kejadian onclose close

Perlu dicatat bahwa metode requestPermission() hanya valid di objek Notifikasi, bukan objek instance!!! Metode ini digunakan untuk meminta izin kepada pengguna untuk menampilkan notifikasi, dan hanya dapat dipanggil secara aktif oleh pengguna ( itu bisa dipanggil di halaman onload, dan Terapkan ke pengguna dan kirimkan nanti...)

Metode yang dimiliki oleh objek instance adalah:

(1). close() digunakan untuk menutup pesan notifikasi --> Anda juga dapat menambahkan panggilan tertunda ke metode onshow untuk meningkatkan pengalaman pengguna...

(2). addEventListener() mendengarkan acara (metode umum ini)

(3).removeEventListener mencopot pemasangan acara mendengarkan (umumnya, sama seperti di atas)

(4). acara pengiriman dispatchEvent (sama seperti di atas)

Selanjutnya, tulis tes js. Jika Anda menggunakan Google Chrome, disarankan untuk menampilkan notifikasi di pengaturan dan menambahkan alamat layanan lokal untuk mengizinkan notifikasi.

Namun, nama domain http ditutup secara default di Google Chrome dan tidak diperbolehkan untuk diubah. Periksa konsol Google Chrome untuk melihat pesan peringatan --->

index.js:78 [Penghentian] API Notifikasi tidak dapat lagi digunakan dari sumber yang tidak aman. Anda harus mempertimbangkan untuk mengalihkan aplikasi Anda ke sumber yang aman, seperti HTTPS.

Baiklah, menambahkan sertifikat https benar-benar beracun... Meskipun menambahkan fungsi ini ke beranda Anda hanya menyenangkan di Firefox...

(Tencent Cloud memiliki sertifikat SSL gratis satu tahun, Anda dapat menginstalnya sendiri...)

 // index.jswindow.onload = function(){ biarkan gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}kelas Gxlself{ konstruktor(){ ini. isNotificationSupported = Notifikasi di jendela } isPermissionGranted(){ return Notifikasi.izin === 'diberikan'; } requestPermission(){ if(!this.isNotificationSupported){ kembali; } Notifikasi.requestPermission(status=>{ izinkan = Notifikasi.izin; }) } showNotification(){ if (!this.isNotificationSupported) { kembali; } jika (!ini.isPermissionGranted()) { kembali; } var n = baru Notifikasi(gxlself mengirimkan salam kepada Anda, { icon : 'gxlself.png', body : 'Selamat datang berkunjung, saya sangat berterima kasih! Klik untuk melompat ke halaman blog saya~' }); n.onshow = function () { console .log('gxlself telah mengirimkan informasi pemberitahuan'); setTimeout(function() { n.close(); }, 5000); location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' jendela pesan gxlself ditutup') } } }

Berikut tampilan efek setelah browser Firefox dijalankan:

Mari kita lihat efek menjalankan Google secara lokal: (Nama domain telah disadap dan dinonaktifkan secara default. Telah dijelaskan di atas dan tidak akan terulang kembali)

Efek dari Google sebenarnya lumayan bagus ya...hanya https saja yang memblokir saya...

------- Aplikasi Desktop -----------

Saat Anda ingin menggunakan notifikasi di aplikasi web terbuka, pastikan untuk menambahkan izin desktop-notification ke file manifes Anda. Notifikasi dapat digunakan pada tingkat izin apa pun, dihosting atau lebih tinggi.

 izin: { pemberitahuan desktop:{} }

Pemberitahuan ini lebih menyenangkan, dan juga merupakan bagian penting dalam pengiriman pesan di masa mendatang. Tinggalkan catatan ini... Saya harap ini dapat membantu pembelajaran semua orang, dan saya juga berharap semua orang mendukung Jaringan VeVb Wulin.