HTML5 implements Notification API desktop notification function _html5 tutorial skills

Why do we need HTML5 desktop notifications
Traditional desktop notifications can be written as a div and placed in the lower right corner of the page to automatically pop up, and get messages through polling and other methods. Push to users. One disadvantage of this method is that when I use JD.com to shop, I don’t know that Renren has news pushed to me, but I have to wait until I switch the current page to Renren to know that there is news. Pushed. This method of message push is based on page survival, but we need such a strategy: no matter which page you are looking at, as long as there is a message, it should be pushed to me. This is the problem that webkitNotification wants to solve. The message generated by Notification is not attached to a certain page, only to the browser.
The normal process of generating a desktop notification
Let’s first take a look at how a desktop notification is generated:
1. Check whether the browser supports Notification
2. Check the browser’s notification permissions (whether notifications are allowed)
3. If the permissions are insufficient, obtain the browser’s notification permissions
4. Create message notifications
5. Display message notifications
NOTE : Regarding the first point, some explanation is needed. Notification has not been standardized yet, so it currently only supports chrome19 and safari6. There is information on the Internet that Firefox26 also supports it, but the results of my Firefox27 test are that it cannot be supported.
I believe everyone is familiar with desktop notifications of HTML5. Common applications include the web version of WeChat, which requires setting up the desktop notification function before they can be used.
It is not difficult to implement such a function using a client program. For the traditional web version of desktop notifications, you can write a div and place it in the lower right corner of the page to automatically pop up, and obtain messages through polling and other methods and push them to the user. One disadvantage of this method is that when I use Taobao to shop, I don’t know that there are messages pushed to me on Weibo, but I have to wait until I switch the current page to Sina Weibo to know that there are messages pushed to me. . This method of message push is based on page survival, but we need such a strategy: no matter which page you are looking at, as long as there is a message, it should be pushed to me. This is the problem that webkitNotification wants to solve.
Notification is not standardized yet, so you can’t learn it on websites such as w3cschool. However, most current mainstream browsers support Notification. The desktop notification rendering of html5 is as follows:

The code is as follows:

XML/HTML CodeCopy content to clipboard

1. /span>> 
2. html> 
3. head> 
4. meta charset="utf- 8"> 
5. title>html5 desktop notification title> 
6. head> 
7. body> 
8. input type="button" value="Turn on desktop notifications" onclick ="showNotice();"> 
9. script> 
10. function showNotice(){
11. Notification.requestPermission(function(status){  
12. //The default value of status 'default' is equivalent to rejection 'denied' means the user does not want notifications 'granted' means the user agrees to enable notifications
13. if("granted" != status)
14. return;
15. var notify = new Notification("Message",{
16. dir:'auto',
17. lang:'zh-CN',
18. tag:'sds',//The id of the instantiated notification
19. //icon supports ico, png, jpg, jpeg formats
20. icon:'http://www.xttblog.com/icons/favicon.ico',//Thumbnail image of notification
21. body:'html5 desktop notification' //The specific content of the notification
22. });
23. notify.onclick=function(){ 
24. //If the notification message is clicked, the notification window will be activated
25. window.focus();
26. }
27. });
28. }
29. script> 
30. body> 
31. html>

The above content is the HTML5 implementation of Notification API desktop notification function shared by the editor. I hope it will be helpful to everyone!
Original text: http://www.xttblog.com/?p=249