English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Oggi il progetto è quasi completo, utilizzando il tempo libero, ho scritto due articoli. L'articolo precedente 'Come configurare un progetto node' penso che chi ha bisogno di imparare lo abbia già letto. L'effetto finale di questo articolo è davvero fantastico, quindi voglio registrarcelo qui, così possiamo guardarlo di nuovo in futuro.
È lo stesso schema di prima, passo dopo passo, in questo modo è chiaro nel pensiero.
Guardiamo prima l'effetto:
Attenzione alla parte in basso a destra, la消息弹出，我们实现的效果就是这样。
Dopo aver visto l'effetto, entriamo nel modello di spiegazione distribuita………..
Passo 1:Scriviamo prima una struttura di base
Il codice seguente viene scritto all'interno del tag script, quindi è sufficiente preoccuparsi del contenuto del tag script:
<!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>Esempio di messaggio di push</title>
</head>
<body>
Check the message notifications at the bottom right..........
</body>
</html>
<script type="text/javascript">
</script>
Passo 2:Determinare se il browser supporta l'API di notifiche Web
Qui determiniamo se supporta l'API di notifiche Web, solo supportando questa cosa possiamo continuare con le nostre cose.
function justify_notifyAPI(){
if (window.Notification) {
// Supportato
console.log("Supportato"+"Web Notifications API");
} else {
// Non supportato
console.log("Non supportato"+"Web Notifications API");
}
}
Passo 3:Determinare se il browser supporta l'esempio di espulsione
Ecco una finestra di dialogo, per determinare se il browser supporta l'esempio di espulsione (è sufficiente sostituire l'indirizzo dell'immagine con il tuo)
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('Ricevuta nuova informazione:-O', {
body: 'Ecco il contenuto della notifica! Cosa vorresti vedere, signore? ',
icon:"../../images/headerPic/QQ图片20160525234650.jpg"
});
} else{
var n = new Notification("baby! mi lascerò!");
}
});
}
}
Passo 4:Esempio di contenuto espulso
L'attributo title del costruttore Notification è obbligatorio, utilizzato per specificare il titolo della notifica, formato stringa. L'attributo options è opzionale, formato oggetto, utilizzato per impostare vari settaggi. Le proprietà dell'oggetto sono le seguenti:
dir: Direzione del testo, valori possibili: auto, ltr (da sinistra a destra) e rtl (da destra a sinistra), di solito eredita le impostazioni del browser.
lang: Lingua utilizzata, ad esempio en-US, zh-CN.
body: Contenuto della notifica, formato stringa, utilizzato per spiegare ulteriormente l'obiettivo della notifica.
tag: ID della notifica, formato stringa. Un gruppo di notifiche con lo stesso tag non vengono visualizzate contemporaneamente, ma vengono visualizzate nella posizione originale solo dopo che l'utente ha chiuso la notifica precedente.
icon: URL del grafico utilizzato per visualizzare le notifiche.
function notification_construct(){
var notification = new Notification('Nuovo email', {
body: 'Hai 1 nuova email in arrivo da Xuejing.',
dir: "auto",
lang: "zh-CN",
tag: "a1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "Nuova email ricevuta"
console.log(notification.body); // "Hai in totale 3 email non lette."
}
Passo 5:Eventi relativi all'API di notifiche
The Notification instance will trigger the following three events:
show: Triggered when the notification is displayed to the user.
click: Triggered when the user clicks the notification.
close: Triggered when the user closes the notification.
error: Triggered when the notification fails (when the notification cannot be displayed correctly).
These events have corresponding onshow, onclick, onclose, onerror methods to specify the corresponding callback functions. The addEventListener method can also be used to specify callback functions for these events.
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess！",{
body: 'Hai 1 email proveniente dallo spazio.',
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('La notifica è stata visualizzata!');
};
MM.onclick = function() {
console.log('La notifica è stata cliccata!');
};
MM.onerror = function() {
console.log('La notifica è stata cliccata!');
// Chiusura manuale
MM.close();
};
}
Here are the basic functions explained, and here is the Demo source code for the above effect:
<!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 notifications 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(); //Verifica se il browser supporta l'esempio di popup
notification_construct(); // Esempio di contenuto pop-up
notification_event(); //Eventi API delle Notifications
}
// Verifica se il browser supporta Web Notifications API
function justify_notifyAPI(){
if (window.Notification) {
// Supportato
console.log("Supportato"+"Web Notifications API");
} else {
// Non supportato
console.log("Non supportato"+"Web Notifications API");
}
}
// Il browser supporta l'esempio di popup
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('Ricevuta nuova informazione:-O', {
body: 'Ecco il contenuto della notifica! Cosa vorresti vedere, signore? ',
icon:"../../images/headerPic/QQ图片20160525234650.jpg"
});
// alert("Hi! this is the notifyMessages!");
} else{
var n = new Notification("baby! mi lascerò!");
}
});
}
}
// Esempio di contenuto pop-up
function notification_construct(){
var notification = new Notification('Nuovo email', {
body: 'Hai 1 nuova email in arrivo da Xuejing.',
dir: "auto",
lang: "zh-CN",
tag: "a1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "Nuova email ricevuta"
console.log(notification.body); // "Hai in totale 3 email non lette."
}
// Eventi relativi all'API delle notifiche
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess！",{
body: 'Hai 1 email proveniente dallo spazio.',
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('La notifica è stata visualizzata!');
};
MM.onclick = function() {
console.log('La notifica è stata cliccata!');
};
MM.onerror = function() {
console.log('La notifica è stata cliccata!');
// Chiusura manuale
MM.close();
};
}
</script>
Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di supportare e urlare la guida.
Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il diritto d'autore spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.