Tutoriel sur la création de notifications Web à l'aide des conseils du didacticiel HTML5 Notification API

Tutoriel sur la création de notifications Web à l'aide des conseils du didacticiel HTML5 Notification API_html5

WBOY

Libérer： 2016-05-16 15:46:43

original

1727 Les gens l'ont consulté

Lorsque vous utilisez la version Web de Gmail, chaque fois qu'un nouvel e-mail est reçu, une boîte de dialogue correspondante apparaîtra dans le coin inférieur droit de l'écran. Avec l'API de notification fournie par HTML5, nous pouvons également facilement implémenter une telle fonction.
Assurez-vous que votre navigateur le prend en charge

Si vous développez sur une version spécifique du navigateur, alors je vous recommande d'aller d'abord sur caniuse pour vérifier la prise en charge par le navigateur de l'API de notification afin d'éviter de perdre un temps précieux sur une API inutilisable.
Comment commencer

Code JavaScriptCopier le contenu dans le presse-papiers

var notification=nouveau Notification('Titre de la notification',{
corps : 'Votre message'
});

Le code ci-dessus construit une simple barre de notification. Le premier paramètre du constructeur définit le titre de la barre de notification, et le deuxième paramètre est un objet option, qui peut définir les propriétés suivantes :

body : définissez le contenu du corps de la barre de notification.
dir : définissez le sens d'affichage du texte de la barre de notification, qui peut être défini sur auto (automatique), ltr (de gauche à droite) ou rtl (de droite à gauche).
lang : Déclare la langue utilisée pour le texte dans la barre de notification. (Annotation : La valeur de cet attribut doit appartenir à la balise de langue BCP 47.) Balise
: Attribue une valeur d'ID à la barre de notification pour faciliter la récupération, le remplacement ou la suppression de la barre de notification. Icône
: définissez l'URL de l'image utilisée comme icône de la barre de notification

Obtenir l'autorisation

Avant d'afficher la barre de notification, vous devez demander l'autorisation de l'utilisateur. Ce n'est qu'avec l'autorisation de l'utilisateur que la barre de notification peut apparaître à l'écran. Le traitement de la demande d'autorisation aura la valeur de retour suivante :

Par défaut : le résultat du traitement de l'utilisateur est inconnu, le navigateur considérera donc l'utilisateur comme refusant d'afficher la barre de notification. ("Navigateur : vous n'avez pas demandé de notification, donc je ne vous en informerai pas")
refusé : l'utilisateur refuse d'afficher la barre de notification. ("Utilisateur : éloignez-vous de mon écran")
accordé : L'utilisateur autorise l'apparition de la barre de notification. ("Utilisateur : Bienvenue ! Je suis ravi d'utiliser cette fonctionnalité de notification")

Code JavaScriptCopier le contenu dans le presse-papiers

Notification.requestPermission(fonction(autorisation){
//afficher la notification ici en utilisant le constructeur
});

Créer un bouton en HTML

Code XML/HTMLCopier le contenu dans le presse-papiers

<bouton id="bouton" >Lisez votre notificationbouton>

N'oubliez pas CSS

Code CSSCopier le contenu dans le presse-papiers

#bouton{
taille de police:1.1rem;
largeur :200px ;
hauteur :60px ;
bordure:2px solide #df7813;
bordure-rayon :20px/50px;
fond :#fff ;
couleur :#df7813;
}
#bouton:survol{
fond :#df7813 ;
couleur :#fff ;
transition : 0,4 s facilité ;
}

全部的Javascript代码如下：

Code JavaScript复制内容到剪贴板

document.addEventListener('DOMContentLoaded',function(){
document.getElementById('button').addEventListener('click',fonction(){
si(! ('Notification' dans fenêtre) ){
alert('Désolé mon frère, votre navigateur n'est pas assez performant pour afficher une notification');
retour ;
}
Notification.requestPermission(fonction(autorisation){
var config = {
body :'Merci d'avoir cliqué sur ce bouton. J'espère que vous avez aimé.',
icône :'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png' ,
dir:'auto'
} ;
var notification = nouveau Notification("Je suis !",config);
});
});
});

L'API de notification est basée sur l'API de notification.浏览器并不能很好地支持通知功能 » (Désolé mon frère, votre navigateur n'est pas assez puissant pour afficher des notifications.

为什么要让用户手动关闭通知栏？

对于这个问题，使通知栏能定时关闭。

Code JavaScript复制内容到剪贴板

var config = {
body :'Aujourd'hui, trop de gars ont eu des yeux sur moi, tu as fait la même chose. Merci',
icône :'icon.png',
dir:'auto'
}
var notification = nouveau Notification("Me voici!",config);
setTimeout(fonction(){
notification.close(); //ferme la notification
},5000);

MDN
Tutoriel de Paul Lund sur l'API de notification

Démo de CodePen

你可以在CodePen上看到由Prakash （@imprakash）编写的

démo。