使用HTML5的Notification API製作web通知的教學_html5教學技巧

使用網頁版Gmail的時候，每當收到新郵件，螢幕的右下方都會彈出對應的提示框。借助HTML5提供的Notification API，我們也可以輕鬆實現這樣的功能。
確保瀏覽器支援

如果你在特定版本的瀏覽器上進行開發，那麼我建議你先到 caniuse 查看瀏覽器對Notification API的支援情況，避免你將寶貴時間浪費在了一個無法使用的API上。
如何開始
 

JavaScript Code複製內容到剪貼簿

1. var notification=new Notification('Notification Title Notification('Notification Title'
2.     body:'Your Message'   
3. });   
4.   

上面的程式碼建構了一個簡陋的通知欄。建構函數的第一個參數設定了通知欄的標題，而第二個參數則是一個option 對象，該對象可設定以下屬性：

• 
      body ：設定通知欄的正文內容。
      dir ：定義通知列文字的顯示方向，可設為auto（自動）、ltr（由左至右）、rtl（由右至左）。
      lang ：聲明通知欄內文本所使用的語種。 （譯註：此屬性的值必須屬於BCP 47 language tag。）
      tag：為通知欄分配一個ID值，以便檢索、取代或移除通知欄。
    icon ：設定作為通知欄icon的圖片的URL

取得權限

在顯示通知欄之前需向使用者申請權限，只有使用者允許，通知欄才可出現在螢幕中。權限申請的處理將有以下回傳值：

• 
      default：使用者處理結果未知，因此瀏覽器將視為使用者拒絕彈出通知欄。 （「瀏覽器：你沒要求通知，我就不通知你了」）
      denied：用戶拒絕彈出通知欄。 （「使用者：從我的螢幕滾開」）
      granted：使用者允許彈出通知欄。 （「使用者：歡迎！我很高興能夠使用這個通知功能」）
     
   

JavaScript Code複製內容到剪貼簿

1. Notification.requestPermission(function(permission){   
2.     //display notification here making use of constructor   
3.   
4.     });   

  

用HTML建立一個按鈕 

XML/HTML Code

1. 複製內容到剪貼簿 button id=id=id=id 🎜>>
2. Read your notification

button

>

button

>

button>

   不要忘了CSS  CSS Code複製內容到剪貼簿

1. #button{   
2.   字體大小:1.1rem;   
3.   寬度:200px;   
4. ;   ;      高度
5. :60px;   ;   ;      邊框
:
6. 2px 2px  🎜>#df7813;   
  
7. 邊框-半徑：20px/
8.   背景:#fff;   
9. ;   
10.   顏色:
#df7813
11. ;   ;   ;   
12. }    #button：停留{   
13.   背景
14. :#df7813
15. ;   
;   

;   

;   

;   

  顏色:#fff;   ;      過渡：0.4s 輕鬆；    }       全部Javascript程式碼如下：  JavaScript 程式碼 將內容複製到剪切板

1. document.addEventListener('DOMContentLoaded', >         document.getElementById('按鈕'
2. ).addEventListener().addEventListener().addEventListener( >函數(){                
3. if(!('(!(                 以對中完成('抱歉兄弟，您的瀏覽器不夠好，無法顯示通知'
'抱歉兄弟，您的瀏覽器不夠好，無法顯示通知'
4. '抱歉兄弟，您的瀏覽器不夠好，無法顯示通知'                
5. 回中;   回;   
6. ;   
;   
7. ;   ;   
8. ;             }                    Notification.requestPermission(
9. 函數（                  var
10.  config  {                                  希望您喜歡。 ',   
11.                               中以來應用程式中/O) MetroUI_HTML5.png' ，                                
12.                                                
13. var通知= var通知= var告知>，設定）；   
            });   
        });   
    }）；   
  

從大概的程式碼可以看出，如果瀏覽器不支援Notification API，在點擊按鈕時就會出現警告「兄弟，很遺憾。你的瀏覽器並不能很好地支援Notification功能」（對不起兄弟，你的瀏覽器不夠好，無法顯示通知）。否則，在獲得了使用者的允許之後，我們自製的通知欄便可以出現在螢幕附近啦。

為什麼要讓使用者手動關閉通知欄？

對於這個問題，我們可以藉助setTimeout函數設定一個時間間隔，使通知欄能定時關閉。

 

JavaScript 程式碼

將內容複製到剪切板

1. var config = {   
2.                 中：'今天有太多人注視我，你也做了同樣的事情。 謝謝'，  
3.                已中與 🎜>'icon.png',  
4.                以指目錄中'自動'  '自動'
5.   
7.              }   
8. var通知= 新
9. 通知（「我在這裡！」
通知（
10. 「我在這裡！」通知（

「我在這裡！」

通知（

「我在這裡！ >

，設定）；   

setTimeout(函數

(){   

    notification.close(); 

//關閉通知   },5000);       該說的東西就這些了。如果你意猶未盡，希望更深入了解Notification API，可以閱讀以下頁面：     MDN    Paul lund 的通知 API 教學 在CodePen上查看示範 你可以在CodePen上看到Prakash（@imprakash）寫的示範。