Tutorial on making web notifications using HTML5 Notification API_html5 tutorial tips

When using the web version of Gmail, whenever a new email is received, a corresponding prompt box will pop up in the lower right corner of the screen. With the Notification API provided by HTML5, we can also easily implement such a function.
Make sure your browser supports it

If you are developing on a specific version of the browser, then I recommend that you first go to caniuse to check the browser's support for the Notification API to avoid wasting precious time on an unusable API.
How to get started

JavaScript CodeCopy content to clipboard

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

The above code constructs a simple notification bar. The first parameter of the constructor sets the title of the notification bar, and the second parameter is an option object, which can set the following properties:

• body: Set the body content of the notification bar.
  dir: Define the display direction of the notification bar text, which can be set to auto (automatic), ltr (left to right), or rtl (right to left).
  lang: Declares the language used for the text in the notification bar. (Annotation: The value of this attribute must belong to the BCP 47 language tag.)
  tag: Assign an ID value to the notification bar to facilitate retrieval, replacement or removal of the notification bar.
  icon: Set the URL of the image used as the notification bar icon

Get permission

Before displaying the notification bar, you need to apply for permission from the user. Only with the user's permission can the notification bar appear on the screen. The processing of permission application will have the following return value:

• Default: The user processing result is unknown, so the browser will regard the user as refusing to pop up the notification bar. ("Browser: You didn't ask for notification, so I won't notify you")
  denied: The user refuses to pop up the notification bar. ("User: scroll away from my screen")
  granted: The user allows the notification bar to pop up. ("User: Welcome! I'm excited to use this notification feature")
  
  

JavaScript CodeCopy content to clipboard

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

Create a button using HTML

XML/HTML CodeCopy content to clipboard

1. button id="button" >Read your notificationbutton>

Don’t forget CSS

CSS CodeCopy content to clipboard

1. #button{   
2.   font-size:1.1rem;   
3.   width:200px;   
4.   height:60px;   
5.   border:2px solid #df7813;   
6.   border-radius:20px/50px;   
7.   background:#fff;   
8.   color:#df7813;   
9. }   
10. #button:hover{   
11.   background:#df7813;   
12.   color:#fff;   
13.   transition:0.4s ease;   
14. }   
15.   

全部的Javascript代码如下：
 

JavaScript Code复制内容到剪贴板

1. document.addEventListener('DOMContentLoaded',function(){   
2.         document.getElementById('button').addEventListener('click',function(){   
3.             if(! ('Notification' in window) ){   
4.                 alert('Sorry bro, your browser is not good enough to display notification');   
5.                 return;   
6.             }       
7.             Notification.requestPermission(function(permission){   
8.                 var config = {   
9.                               body:'Thanks for clicking that button. Hope you liked.',   
10.                               icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',   
11.                               dir:'auto'  
12.                               };   
13.                 var notification = new Notification("Here I am!",config);   
14.             });   
15.         });   
16.     });   
17.   

从这段代码可以看出，如果浏览器不支持Notification API，在点击按钮时将会出现警告“兄弟，很抱歉。你的浏览器并不能很好地支持通知功能”（Sorry bro, your browser is not good enough to display notification）。否则，在获得了用户的允许之后，我们自制的通知栏便可以出现在屏幕当中啦。

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

对于这个问题，我们可以借助setTimeout函数设置一个时间间隔，使通知栏能定时关闭。
 

JavaScript Code复制内容到剪贴板

1. var config = {   
2.                body:'Today too many guys got eyes on me, you did the same thing. Thanks',   
3.                icon:'icon.png',   
4.                dir:'auto'  
5.              }   
6. var notification = new Notification("Here I am!",config);   
7. setTimeout(function(){   
8.     notification.close(); //closes the notification   
9. },5000);   
10.   

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

    MDN
    Paul lund’s tutorial on notification API

在CodePen上查看demo

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