Bagaimana saya menggunakan API Pemberitahuan HTML5 untuk memaparkan pemberitahuan desktop?

Bagaimana saya menggunakan API Pemberitahuan HTML5 untuk memaparkan pemberitahuan desktop?

Untuk menggunakan API Pemberitahuan HTML5 untuk memaparkan pemberitahuan desktop, anda perlu mengikuti langkah -langkah ini:

1. Semak kebenaran : Sebelum anda dapat menunjukkan pemberitahuan, anda perlu menyemak sama ada pengguna telah memberikan kebenaran. Ini boleh dilakukan dengan menggunakan harta Notification.permission . Jika kebenaran tidak diberikan, anda perlu meminta kebenaran daripada pengguna.
2. Permintaan Kebenaran : Jika kebenaran tidak diberikan, anda boleh memintanya menggunakan kaedah Notification.requestPermission() . Kaedah ini mengembalikan janji yang menetap di negara kebenaran baru.
3. Buat pemberitahuan : Sebaik sahaja kebenaran diberikan, anda boleh membuat pemberitahuan menggunakan pembuat new Notification() . Anda lulus tajuk pemberitahuan sebagai hujah pertama, dan objek pilihan sebagai hujah kedua.
4. Tunjukkan pemberitahuan : Pemberitahuan dipaparkan secara automatik selepas anda menciptanya dengan pembentukan new Notification() . Walau bagaimanapun, anda juga boleh mengawal tingkah lakunya dengan menubuhkan pendengar acara untuk pelbagai acara pemberitahuan seperti show , click , close , dan lain -lain.

Berikut adalah contoh mudah bagaimana menggunakan API Pemberitahuan:

 <code class="javascript">// Check if the browser supports notifications if (!("Notification" in window)) { console.log("This browser does not support notifications."); } else { // Check permission if (Notification.permission === "granted") { // If it's okay let's create a notification var notification = new Notification("Hi there!"); } else if (Notification.permission !== "denied") { // Otherwise, we need to ask the user for permission Notification.requestPermission().then(function (permission) { // If the user accepts, let's create a notification if (permission === "granted") { var notification = new Notification("Hi there!"); } }); } }</code>

Apakah keperluan kebenaran untuk menggunakan API Pemberitahuan HTML5?

Untuk menggunakan API Pemberitahuan HTML5, anda mesti mendapatkan kebenaran yang diperlukan dari pengguna. API menggunakan model kebenaran di mana kebenaran boleh berada di salah satu daripada tiga negeri:

1. Diberikan : Pengguna telah memberi kebenaran kepada Laman Web untuk menunjukkan pemberitahuan.
2. Ditolak : Pengguna telah menafikan kebenaran untuk laman web untuk menunjukkan pemberitahuan.
3. Lalai : Pengguna belum diminta kebenaran.

Anda menyemak keadaan kebenaran semasa dengan Notification.permission . Jika kebenaran itu tidak granted , anda mesti meminta kebenaran menggunakan Notification.requestPermission() , yang mengembalikan janji yang menetap pada keadaan kebenaran baru.

Adalah penting untuk mengendalikan proses ini dengan anggun, kerana pengguna mungkin berhati -hati tentang memberikan kebenaran, dan anda harus menghormati keputusan mereka jika mereka memilih untuk menafikan pemberitahuan.

Bagaimanakah saya dapat menyesuaikan penampilan pemberitahuan yang dibuat dengan API Pemberitahuan HTML5?

API Pemberitahuan HTML5 membolehkan anda menyesuaikan pemberitahuan ke tahap tertentu melalui objek Opsyen yang disampaikan kepada pembuat new Notification() . Berikut adalah beberapa sifat yang boleh anda tetapkan:

• Badan : Teks yang muncul dalam pemberitahuan di bawah tajuk.
• Ikon : URL imej yang akan digunakan sebagai ikon.
• Imej : URL imej yang akan dipaparkan dalam pemberitahuan (tidak disokong dalam semua pelayar).
• Lencana : URL imej yang akan digunakan sebagai lencana (tidak disokong dalam semua pelayar).
• Getaran : Arahan yang menentukan corak getaran (disokong dalam beberapa pelayar mudah alih).
• Data : Sebarang data yang anda mahu kaitkan dengan pemberitahuan.
• Memerlukan Interaction : Boolean yang menunjukkan sama ada pemberitahuan harus tetap aktif sehingga pengguna mengklik atau menolaknya.
• Senyap : Boolean yang menunjukkan sama ada pemberitahuan harus diam (tidak disokong dalam semua pelayar).
• Renotify : Boolean yang menunjukkan sama ada pemberitahuan baru harus dibuat untuk menggantikan yang lama (tidak disokong dalam semua pelayar).
• Tag : Pengenal pasti unik untuk pemberitahuan (boleh digunakan untuk mengemas kini atau menggantikan pemberitahuan).

Inilah contoh cara membuat pemberitahuan yang disesuaikan:

 <code class="javascript">if (Notification.permission === "granted") { var options = { body: "Here is a notification body!", icon: "path/to/icon.png", image: "path/to/image.png", badge: "path/to/badge.png", vibrate: [200, 100, 200], data: { someData: "Here's some data" }, requireInteraction: true, silent: false, renotify: true, tag: "my-unique-notification" }; var notification = new Notification("Customized Notification", options); }</code>

Perlu diingat bahawa tidak semua pelayar menyokong semua pilihan ini, jadi anda harus menyemak sokongan ciri sebelum menggunakannya.

Pelayar apa yang menyokong pemberitahuan HTML5 API untuk pemberitahuan desktop?

API Pemberitahuan HTML5 disokong oleh beberapa pelayar moden untuk pemberitahuan desktop. Inilah ringkasan sokongan penyemak imbas:

• Google Chrome : Disokong pada Windows, MacOS, dan Linux.
• Mozilla Firefox : Disokong pada Windows, MacOS, dan Linux.
• Microsoft Edge : Disokong pada versi Windows 10 dan kemudian.
• Opera : Disokong pada Windows, MacOS, dan Linux.
• Safari : Disokong pada MACOS bermula dari versi 6.

Pelayar mudah alih umumnya tidak menyokong pemberitahuan desktop, walaupun ada yang boleh menyokong pemberitahuan push melalui API yang berbeza. Sentiasa periksa jadual keserasian penyemak imbas terkini atau gunakan pengesanan ciri dalam kod anda untuk memastikan pemberitahuan API tersedia sebelum cuba menggunakannya.

Atas ialah kandungan terperinci Bagaimana saya menggunakan API Pemberitahuan HTML5 untuk memaparkan pemberitahuan desktop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!