English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Heute sind die meisten Projekte fast getestet. Ich habe in meiner Freizeit zwei Artikel geschrieben. Der Artikel 'Wie man ein Node-Projekt aufbaut' ist bestimmt von den meisten Lesern gelesen worden, die dies lernen möchten. Der Effekt, der am Ende dieses Artikels gezeigt wird, ist wirklich großartig. Daher möchte ich ihn hier aufzeichnen, damit ich ihn später selbst ansehen kann.
Es ist noch immer dasselbe Schema wie früher. Wir erläutern Schritt für Schritt, so dass die Gedanken klar sind.
Schauen wir uns zunächst den Effekt an:
Beobachten Sie den rechten unteren Bereich, die angezeigten Pop-up-Nachrichten. Genau so ein Effekt ist es, den wir implementiert haben.
Nachdem die Ergebnisse betrachtet wurden, geht es weiter in den Verteilungsmodus………..
Schritt 1:Zuerst einen Rahmen schreiben
Der folgende Code wird im script-Tag geschrieben. Sie müssen sich nur um den Inhalt im script-Tag kümmern:
<!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>Beispiel für Nachrichtenpush</title>
</head>
<body>
Check the message notification at the bottom right..........
</body>
</html>
<script type="text/javascript">
</script>
Schritt 2:Überprüfen Sie, ob der Browser die Web Notifications API unterstützt
Hier wird geprüft, ob die Web Notifications API unterstützt wird. Nur wenn diese Unterstützung besteht, können wir mit den folgenden Schritten fortfahren.
function justify_notifyAPI(){
if (window.Notification) {
// Supported
console.log("Supported"+"Web Notifications API"
} else {
// Not supported
console.log("Not supported"+"Web Notifications API"
}
}
Schritt 3:Überprüfen Sie, ob der Browser eine Pop-up-Instanz unterstützt
Hier ist ein Pop-up-Fenster, um zu überprüfen, ob der Browser eine Pop-up-Instanz unterstützt (ersetzen Sie den Bildadresse mit Ihrer eigenen Adresse)
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 would you like to see, guest?',
icon:"../../images/headerPic/QQ Image20160525234650.jpg"
});
}
var n = new Notification("baby! I will leave you!");
}
});
}
}
Vierter Schritt:Example of pop-up content
Der title-Attribut des Notification-Konstruktors ist obligatorisch, um den Titel der Benachrichtigung zu spezifizieren, Format einer Zeichenkette. Das options-Attribut ist optional, Format eines Objekts, um verschiedene Einstellungen zu festlegen. Die Attribute des Objekts sind wie folgt:
dir: Die Richtung des Textes, mögliche Werte sind auto, ltr (von links nach rechts) und rtl (von rechts nach links), in der Regel geerbt von den Einstellungen des Browsers.
lang: Die verwendete Sprache, z.B. en-US、zh-CN.
body: Der Inhalt der Benachrichtigung, Format einer Zeichenkette, um den Zweck der Benachrichtigung weiter zu erläutern.
tag: Die ID der Benachrichtigung, Format einer Zeichenkette. Eine Gruppe von Benachrichtigungen mit demselben tag werden nicht gleichzeitig angezeigt, sondern nur, wenn der Benutzer die vorherige Benachrichtigung schließt, in der ursprünglichen Position angezeigt.
icon: Der URL des Diagramms, um es in der Benachrichtigung anzuzeigen.
function otification_construct(){
var notification = new Notification('Received new email', {
body: '您有1来自雪静的未读邮件。
dir: "auto"
lang: "zh"-CN
tag: "a"1,
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "收到新邮件"
console.log(notification.body); // "您总共有3来自未读邮件。
}
Fünfter Schritt:Notifications API 相关事件
Eine Notification-Instanz löst die folgenden drei Ereignisse aus:
show: Wird ausgelöst, wenn die Benachrichtigung dem Benutzer angezeigt wird.
click: Wird ausgelöst, wenn der Benutzer auf die Benachrichtigung klickt.
close: Wird ausgelöst, wenn der Benutzer die Benachrichtigung schließt.
error: Wird ausgelöst, wenn eine Benachrichtigung ausgegeben wird (wenn die Benachrichtigung nicht korrekt angezeigt wird).
Diese Ereignisse haben die entsprechenden onshow, onclick, onclose, onerror Methoden, um die entsprechenden Callback-Funktionen zu spezifizieren. Die addEventListener-Methode kann auch verwendet werden, um Callback-Funktionen für diese Ereignisse zu spezifizieren.
function notification_event(){
var MM = new Notification("Hi! My beautiful little princess!",{
body: '您有1来自外太空的邮件。
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification showing!');
};
MM.onclick = function() {
console.log('Notification have been clicked!');
};
MM.onerror = function() {
console.log('Notification have been clicked!');
// 手动关闭
MM.close();
};
}
Hier sind die grundlegenden Funktionen erläutert, und hier ist der Demo-Quellcode für die obige Effekt:
<!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 bottom right..........
</body>
</html>
<script type="text/javascript">
window.onload= function(){
justify_notifyAPI(); //Check if the browser supports the Web Notifications API
justify_showMess(); //Does the browser support pop-up instances
otification_construct(); //Example of pop-up content
otification_event(); //Notifications API 相关事件
}
//Check if the browser supports the 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"
}
}
//Does the browser support pop-up instances
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 would you like to see, guest?',
icon:"../../images/headerPic/QQ Image20160525234650.jpg"
});
// alert("Hi! this is the notifyMessages!");
}
var n = new Notification("baby! I will leave you!");
}
});
}
}
// Example of pop-up content
function otification_construct(){
var notification = new Notification('Received new email', {
body: '您有1来自雪静的未读邮件。
dir: "auto"
lang: "zh"-CN
tag: "a"1,
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "收到新邮件"
console.log(notification.body); // "您总共有3来自未读邮件。
}
//Notifications API 相关事件
function notification_event(){
var MM = new Notification("Hi! My beautiful little princess!",{
body: '您有1来自外太空的邮件。
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification showing!');
};
MM.onclick = function() {
console.log('Notification have been clicked!');
};
MM.onerror = function() {
console.log('Notification have been clicked!');
// 手动关闭
MM.close();
};
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）