Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5 to achieve Notification API desktop notification function. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Why HTML5 Desktop Notification is needed

The traditional desktop notification can write a div and put it in the lower right corner of the page to pop up automatically, and through polling and other ways to get the message and push it to the user. There is a disadvantage in this way: when I am using JD.com for shopping, I do not know that Renren has a message pushed to me, but I have to wait until I cut the current page to Renren to know that there is a message. Message push in this way is based on the survival of the page, but we need a strategy: no matter which page you are looking at, as long as there is a message should be able to push to me to see, this is the problem that webkitNotification is trying to solve. The messages generated by Notification are not attached to a page, only to the browser.

A normal process for desktop notification generation

Let's first look at how a desktop notification is generated:

1. Check whether the browser supports Notification

two。 Check the notification permissions of the browser (whether notification is allowed)

3. If the permission is not enough, get the notification permission of the browser.

4. Create message Notification

5. Display message notification

NOTE: the first point needs to be explained. Notification is not standardized yet, so it only supports chrome19+ and safari6+;. There are data on the Internet that show that Firefox26+ also supports it, but I can't support it with my Firefox27 test results.

I'm sure you're no stranger to html5's desktop notice. Common web version of Wechat and other applications, you need to set up the desktop notification function can be used.

It is not difficult to implement such a function with a client program. The traditional web version of the desktop notification can write a div and put it in the lower right corner of the page to automatically pop up, and through polling and other ways to get the message and push it to the user. The drawback of this approach is that when I was shopping on Taobao, I didn't know that Weibo had been pushed to me, but I had to wait until I cut the current page to Sina Weibo. Message push in this way is based on the survival of the page, but we need a strategy: no matter which page you are looking at, as long as there is a message should be able to push to me to see, this is the problem that webkitNotification is trying to solve.

On "how to use HTML5 to achieve Notification API desktop notification function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.