Tutorial membuat pemberitahuan web menggunakan Pemberitahuan HTML5 API_html5 petua tutorial

Apabila menggunakan versi web Gmail, setiap kali e-mel baharu diterima, kotak gesaan yang sepadan akan muncul di penjuru kanan sebelah bawah skrin. Dengan API Pemberitahuan yang disediakan oleh HTML5, kami juga boleh melaksanakan fungsi sedemikian dengan mudah.
Pastikan penyemak imbas anda menyokongnya

Jika anda sedang membangun pada versi penyemak imbas tertentu, maka saya syorkan anda pergi ke caniuse terlebih dahulu untuk menyemak sokongan penyemak imbas untuk API Pemberitahuan untuk mengelakkan pembaziran masa yang berharga pada API yang tidak boleh digunakan.
Bagaimana untuk bermula

Kod JavaScriptSalin kandungan ke papan keratan

1. var pemberitahuan=baharu Pemberitahuan('Tajuk Pemberitahuan',{
2. badan:'Mesej Anda'
3. });

Kod di atas membina bar pemberitahuan ringkas. Parameter pertama pembina menetapkan tajuk bar pemberitahuan, dan parameter kedua ialah objek pilihan, yang boleh menetapkan sifat berikut:

• badan: Tetapkan kandungan badan bar pemberitahuan.
  dir: Tentukan arah paparan teks bar pemberitahuan, yang boleh ditetapkan kepada auto (automatik), ltr (kiri ke kanan) atau rtl (kanan ke kiri).
  lang: Mengisytiharkan bahasa yang digunakan untuk teks dalam bar pemberitahuan. (Anotasi: Nilai atribut ini mestilah tergolong dalam teg bahasa BCP 47.) Teg
  : Berikan nilai ID pada bar pemberitahuan untuk memudahkan pengambilan semula, penggantian atau pengalihan keluar bar pemberitahuan. Ikon
  : Tetapkan URL imej yang digunakan sebagai ikon bar pemberitahuan

Dapatkan kebenaran

Sebelum memaparkan bar pemberitahuan, anda perlu memohon kebenaran daripada pengguna Hanya dengan kebenaran pengguna boleh bar pemberitahuan muncul pada skrin. Pemprosesan permohonan kebenaran akan mempunyai nilai pulangan berikut:

• Lalai: Hasil pemprosesan pengguna tidak diketahui, jadi penyemak imbas akan menganggap pengguna enggan untuk muncul bar pemberitahuan. ("Pelayar: Anda tidak meminta pemberitahuan, jadi saya tidak akan memberitahu anda")
  menafikan: Pengguna enggan memaparkan bar pemberitahuan. ("Pengguna: tatal keluar dari skrin saya")
  diberikan: Pengguna membenarkan bar pemberitahuan muncul. ("Pengguna: Selamat Datang! Saya teruja untuk menggunakan ciri pemberitahuan ini")
  
  

Kod JavaScriptSalin kandungan ke papan keratan

1. Pemberitahuan.requestPermission(fungsi(kebenaran){
2.  //paparkan pemberitahuan di sini menggunakan pembina  
3. });

Buat butang menggunakan HTML

Kod XML/HTMLSalin kandungan ke papan keratan

1. <butang id="butang" >Baca pemberitahuan andabutang>

Jangan lupa CSS

Kod CSSSalin kandungan ke papan keratan

1. #butang{   
2.   saiz fon:1.1rem;   
3.   lebar:200px;   
4.   tinggi:60px;   
5.   sempadan:2px pepejal #df7813;   
6.   sempadan-jejari:20px/50px;   
7.   latar belakang:#fff;   
8.   warna:#df7813;   
9. }   
10. #butang:tuding{   
11.   latar belakang:#df7813;   
12.   warna:#fff;   
13.   peralihan:0.4s mudah;   
14. }   
15.   

全部的Javascript代码如下：
 

Kod JavaScript复制内容到剪贴板

1. document.addEventListener('DOMContentLoaded',fungsi(){   
2.         document.getElementById('butang').addEventListener('klik',,,
3. >fungsi(){                 jika(! ('Pemberitahuan' 
4. dalamdalam tingkap) ){   
5.                 makluman('Maaf bro, pelayar anda tidak cukup baik untuk memaparkan pemberitahuan');   
6.                 kembali
7. ;                }       
8.             Notification.requestPermission(fungsi(kebenaran){   
9.                 var config = {   
10.                                badan:'Terima kasih kerana mengklik butang itu. Harap anda suka.',   
11.                               ikon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/'_HTML 🎜 ,   
                              dir:
12. 'auto'
  
13.                               };                    var pemberitahuan = baharu
 Pemberitahuan(
14. "
" >
15. ,konfigurasi);   
16.             });   
17.         });   

    });   

  

从这段代码可以看出，如果浏览器不支持Pemberitahuan API，在点击按钮时将会出现，徦出现，徦子。浏览器并不能很好地支持通知功能”（Maaf bro, penyemak imbas anda tidak cukup baik untuk memaparkan pemberitahuan）。否则，在获得了用户的允许之后，我们自制的通知栏便可以出现在屓年。

为什么要让用户手动关闭通知栏？

对于这个问题，我们可以借助setTimeout函数设置一个时间间隔，使通知栏能> Kod JavaScript

复制内容到剪贴板

1. var config = {   
2.                badan:'Hari ini terlalu ramai lelaki melihat saya, anda melakukan perkara yang sama. Terima kasih',   
3.                ikon:'icon.png',   
4.                dir:'auto'  
5.              }   
6. var pemberitahuan = baharu Pemberitahuan("Saya di sini!",konfigurasi);   
7. setTimeout(fungsi(){   
8.     notification.close(); //menutup pemberitahuan   
9. },5000);   
10.   

该说的东西就这些了。如果你意犹未尽，希望更加深入地了解Notification API，可以以阅与说

   

MDN
    Tutorial Paul lund tentang API pemberitahuan

在CodePen上查看demo

你可以在CodePen上看到由Prakash （@imprakash）编写的

demo。