English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Today, the basic testing of the project is almost done. All of us took advantage of our free time to write two articles. The previous article 'How to Set Up a Node Project' I believe everyone who needed to learn has already read. The effect shown at the end of this article is indeed very good, so I want to record it here so that I can also look at it in the future.
It's still the same routine as before. Let's go step by step, which makes the thought process very clear.
Let's take a look at the effect first:
Pay attention to the pop-up message at the bottom right. That's the effect we achieved.
After enjoying the effect, let's move on to the distribution explanation mode………..
Step 1:First, let's write a framework
All the following code is written within the script tag. You only need to pay attention to the content inside the script tag:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>Push Notification Example</title>
</head>
<body>
Check the message notification at the lower right corner..........
</body>
</html>
<script type="text/javascript">
</script>
Step 2:Determine if the browser supports the Web Notifications API
Here we determine if the Web Notifications API is supported. Only if this feature is supported can we proceed with the next steps.
function justify_notifyAPI(){
if (window.Notification) {
// Supported
console.log("Supported"+"Web Notifications API"
} else {
// Not supported
console.log("Not supported"+"Web Notifications API"
}
}
Step 3:Determine whether the browser supports the popup instance
Here is a popup dialog to determine whether the browser supports the popup instance (change the image address to your own address)
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('Received message:',-O', {
body: 'Here is the notification content! What do you want to see, guest?',
icon:"../../images/headerPic/QQ image20160525234650.jpg"
});
} else{
var n = new Notification("baby! I will leave you!");
}
});
}
}
Step 4:Instance display of the popped content
The title attribute of the Notification constructor is required, used to specify the title of the notification, formatted as a string. The options attribute is optional, formatted as an object, used to set various settings. The properties of the object are as follows:
dir: Text direction, possible values are auto, ltr (left to right) and rtl (right to left), which are generally inherited from the browser's settings.
lang: The language used, such as en-US, zh-CN.
body: The content of the notification, formatted as a string, used to further explain the purpose of the notification.
tag: The ID of the notification, formatted as a string. Notifications with the same tag will not be displayed at the same time, but will be displayed at the original position after the user closes the previous notification.
icon: The URL of the chart, used to display on the notification.
function otification_construct(){
var notification = new Notification('Received new email', {
body: 'You have1An unread email from Xuejing.
dir: "auto"
lang:"zh"-CN"
tag: "a"1,
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "Received new email"
console.log(notification.body); // "You have a total of3An unread email.
}
Step 5:Notifications API related events
A Notification instance will trigger the following three events:
show: Triggered when the notification is displayed to the user.
click: Triggered when the user clicks on the notification.
close: Triggered when the user closes the notification.
error: Triggered when a notification fails to display correctly.
These events have corresponding methods such as onshow, onclick, onclose, onerror, which are used to specify the corresponding callback functions. The addEventListener method can also be used to specify callback functions for these events.
function notification_event(){
var MM = new Notification("Hi! My beautiful little princess!",{
body: 'You have1An email from outer space.
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification is showing!');
};
MM.onclick = function() {
console.log('Notification have been clicked!');
};
MM.onerror = function() {
console.log('Notification have been clicked!');
// Manual closure
MM.close();
};
}
The basic functions have been explained here, and the Demo source code for the above effect is attached:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>Web Notifications API</title>
</head>
<body>
Check the message notification at the lower right corner..........
</body>
</html>
<script type="text/javascript">
window.onload= function(){
justify_notifyAPI(); //Determine whether the browser supports Web Notifications API
justify_showMess(); //Whether the browser supports the pop-up instance
otification_construct(); //Instance display of the popped content
otification_event(); //Notifications API related events
}
//Determine whether the browser supports Web Notifications API
function justify_notifyAPI(){
if (window.Notification) {
// Supported
console.log("Supported"+"Web Notifications API"
} else {
// Not supported
console.log("Not supported"+"Web Notifications API"
}
}
//Whether the browser supports the pop-up instance
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('Received message:',-O', {
body: 'Here is the notification content! What do you want to see, guest?',
icon:"../../images/headerPic/QQ image20160525234650.jpg"
});
// alert("Hi! this is the notifyMessages!");
} else{
var n = new Notification("baby! I will leave you!");
}
});
}
}
// Instance display of the popped content
function otification_construct(){
var notification = new Notification('Received new email', {
body: 'You have1An unread email from Xuejing.
dir: "auto"
lang:"zh"-CN"
tag: "a"1,
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "Received new email"
console.log(notification.body); // "You have a total of3An unread email.
}
//Notifications API related events
function notification_event(){
var MM = new Notification("Hi! My beautiful little princess!",{
body: 'You have1An email from outer space.
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification is showing!');
};
MM.onclick = function() {
console.log('Notification have been clicked!');
};
MM.onerror = function() {
console.log('Notification have been clicked!');
// Manual closure
MM.close();
};
}
</script>
That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not undergo manual editing, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report the issue, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.