Exemples de notifications de bureau HTML5 (notifications Web) Analysis_html5 Compétences du didacticiel

Les notifications de bureau html5 (Web Notifications) sont très utiles lorsqu'il est nécessaire d'avoir des effets de notification sur le bureau lorsque de nouveaux messages sont mis en ligne. Voici une brève introduction à ce nouvel attribut de html5.

Voici une bonne démo : démo de notification Web html5

À partir de la démo ci-dessus, nous pouvons obtenir le code de base dont nous avons besoin, comme suit :

Copier le code

Le code est le suivant :

<script><br> var Notification = fenêtre.Notification || window.mozNotification || window.webkitNotification;<br> <br> Notification.requestPermission(function (autorisation) {<br> // console.log(permission);<br> });<br> <br> function show() {<br> var instance = new Notification(<br> "titre du test", {<br> corps : "message de test"<br> }<br> );<br> <br> instance.onclick = function () {<br> // Quelque chose à faire<br> };<br> instance.onerror = function () {<br> // Quelque chose à faire<br> };<br> instance .onshow = function () {<br> // Quelque chose à faire<br> };<br> instance.onclose = function () {<br> // Quelque chose à faire<br> };<br> <br> return false; <br> }<br></script>

Parmi eux : Notification.requestPermission La fonction de ce code est de demander l'autorisation à l'utilisateur .

Grâce aux exemples ci-dessus, nous avons déjà l'idée de base. Lors du premier chargement du document, nous demandons l'autorisation à l'utilisateur. Après avoir obtenu l'autorisation, ce sera si simple à l'avenir.

Copier le code

Le code est le suivant :

window.addEventListener('load', function () {
// Dans un premier temps, vérifions si nous avons l'autorisation de notification
if (Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});

La vérification a réussi sous Firefox, mais elle n'a toujours pas réussi sous Chrome. Plus tard, j'ai trouvé ce paragraphe

.

Copier le code

Le code est le suivant :

Pas un bug, fonctionnalité.

Les notifications de bureau ne peuvent être déclenchées que via une action de l'utilisateur. La saisie dans la console
JavaScript a le même effet que le code javascript brut intégré dans la page Web
(aucune action de l'utilisateur en saisissant le javascript à l'emplacement). bar, cependant,
représente une action de l'utilisateur (l'utilisateur visite intentionnellement un lien javascript pour
activer les notifications, probablement pour les sites qui ont tendance à utiliser href="javascript：" au lieu de
onclick="" .

Je suis presque sûr que ce n'est pas un problème.

Il s'avère que doit être déclenché manuellement par l'utilisateur sous chrome, sinon, le navigateur chrome ignorera ce js

Mais il est certainement impossible d'ajouter un bouton ou un hyperlien vers notre site Web pour permettre explicitement aux utilisateurs de l'autoriser. En fait, ce n'est pas un problème, nous pouvons gérer cela sur les boutons sur lesquels les utilisateurs cliquent souvent. Sous Chrome, une autorisation est valable à vie. Sauf si vous allez dans les paramètres et le bannissez.

Pour l'assembler, le code est le suivant :

Copier le code

Le code est le suivant :

fonction showMsgNotification(titre, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;

if (Notification && Notification.permission === "granted") {
var instance = new Notification(
title, {
body: msg,
icône : "image_url"
}
);

instance.onclick = function () {
// Quelque chose à faire
};
instance.onerror = function ( ) {
// Quelque chose à faire
};
instance.onshow = function () {
// Quelque chose à faire
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Quelque chose à faire
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// Si l'utilisateur a dit d'accord
if (status === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
) ;

instance.onclick = function () {
// Quelque chose à faire
};
instance.onerror = function () {
// Quelque chose à faire
};
instance.onshow = function () {
// Quelque chose à faire
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Quelque chose à faire
};

}else {
return false
}
});
}else{
return false;
}

}