Html5 desktop Notifications instance resolution, html5notifications

Html5 desktop Notifications instance resolution, html5notifications
This article mainly introduces html5 desktop Notifications instances, which are very useful for html5 website construction! For more information, see

Html5 desktop Notifications are useful for implementing desktop Notifications when new messages are connected. Here, we will briefly introduce the new html5 attributes.

Here is a good demo: html5 web notification demo

From the demo above, we can obtain the required basic core code, as shown below:

The Code is as follows: <script>
Var Notification = window. Notification | window. Notification | window. webkitNotification;

Notification. requestPermission (function (permission ){
// Console. log (permission );
});

Function show (){
Var instance = new Notification (
"Test title ",{
Body: "test message"
}
);

Instance. onclick = function (){
// Something to do
};
Instance. onerror = function (){
// Something to do
};
Instance. onshow = function (){
// Something to do
};
Instance. onclose = function (){
// Something to do
};

Return false;
}
</Script>
 
Where:The function of the Code Notification. requestPermission is to request permission to the user..

Through the above example, we already have the basic idea. When loading the document, we will request the permission from the user. After obtaining the permission, it will be so easy.

The Code is as follows: window. addEventListener ('load', function (){
// At first, let's check if we have permission for notification
If (Notification & Notification. permission! = "Granted "){
Notification. requestPermission (function (status ){
If (Notification. permission! = Status ){
Notification. permission = status;
}
});
}
});

Firefox passes the verification, but it always fails in chrome. Later I found such a paragraph

The Code is as follows: Not a Bug, Feature.

Desktop configurications can only be triggered via a user action. Typing into
JavaScript console has the same effect as raw javascript code embedded into the web
Page (no user action). Typing the javascript into the location bar, however,
Represents a user-action (the user is intentionally visiting a javascript link
Enable configurications, probably for sites that tend to use href = "javascript:" instead
Of onclick = "".

I'm pretty sure this is a non-issue.

OriginalIn chrome, it must be manually triggered. Otherwise, chrome will ignore this section of js

However, you cannot add a button or hyperlink to your website to explicitly authorize users, we can handle this authorization by the way on the buttons frequently clicked by users, which is useful for life in chrome. Unless you go to the settings and disable it.

The Code is as follows:

The Code is as follows: function showMsgNotification (title, msg ){
Var Notification = window. Notification | window. Notification | window. webkitNotification;

If (Notification & Notification. permission = "granted "){
Var instance = new Notification (
Title ,{
Body: msg,
Icon: "image_url"
}
);

Instance. onclick = function (){
// Something to do
};
Instance. onerror = function (){
// Something to do
};
Instance. onshow = function (){
// Something to do
// Console. log (instance. close );
SetTimeout (instance. close, 3000 );
};
Instance. onclose = function (){
// Something to do
};
} Else if (Notification & Notification. permission! = "Denied "){
Notification. requestPermission (function (status ){
If (Notification. permission! = Status ){
Notification. permission = status;
}
// If the user said okay
If (status = "granted "){
Var instance = new Notification (
Title ,{
Body: msg,
Icon: "image_url"
}
);

Instance. onclick = function (){
// Something to do
};
Instance. onerror = function (){
// Something to do
};
Instance. onshow = function (){
// Something to do
SetTimeout (instance. close, 3000 );
};
Instance. onclose = function (){
// Something to do
};

} Else {
Return false
}
});
} Else {
Return false;
}

}

Html5 Java Web Development

Just like jsp, you can change the previous tag to html5.

HTML5 mobile web Development Guide pdf full version, not more than 2 M

I have HTML5-related guides, but they all belong to webpages. You can check
Ie.microsoft.com/testdrive/
Www.beautyoftheweb.cn/developers
Www. modern. ie
Www.html5labs.com
Www.w3school.com.cn/html5/index.asp
Www.admindomain.com
They are all related developer materials, and there are some developer tools in them. Hope to help you