Exemple de notification de bureau Chrome [fermé]


409

Comment utilise-t-on les notifications de bureau Chrome ? J'aimerais que cela utilise cela dans mon propre code.

Mise à jour : voici un article de blog expliquant les notifications de webkit avec un exemple.


2
J'ai laissé une réponse ci-dessous mise à jour en novembre 2012, après que les notifications HTML soient devenues obsolètes. Il a un exemple réel comme celui que vous cherchiez.
Dan Dascalescu


1
Mise à jour : à partir de 2015, les sites Web peuvent également envoyer de véritables notifications push, qui sont délivrées même lorsque l'utilisateur ne surfe pas sur le site Web. Découvrez cette réponse
collimarco

3
Tous ces votants pour l'avoir marqué comme fermé doivent être des amoureux d'IE / Safari. Il est spécifique à la notification du navigateur et particulièrement au chrome. si c'est si hors sujet, alors pourquoi tant de gens l'aiment et le marquent comme étant en premier lieu?
prash

2
Pourquoi hors sujet?
SmartManoj

Réponses:


717

Dans les navigateurs modernes, il existe deux types de notifications:

  • Notifications sur le bureau - simples à déclencher, fonctionnent tant que la page est ouverte et peuvent disparaître automatiquement après quelques secondes
  • Notifications Service Worker - un peu plus compliquées, mais elles peuvent fonctionner en arrière-plan (même après la fermeture de la page), sont persistantes et prennent en charge les boutons d'action

L'appel d'API prend les mêmes paramètres (sauf pour les actions - non disponibles sur les notifications de bureau), qui sont bien documentés sur MDN et pour les travailleurs de service, sur le site Web Fundamentals de Google .


Vous trouverez ci-dessous un exemple de notifications de bureau pour Chrome, Firefox, Opera et Safari. Notez que pour des raisons de sécurité, à partir de Chrome 62, l' autorisation pour l'API de notification ne peut plus être demandée à partir d'un iframe d'origine croisée , nous ne pouvons donc pas faire de démonstration à l'aide des extraits de code de StackOverflow. Vous devrez enregistrer cet exemple dans un fichier HTML sur votre site / application et assurez-vous d'utiliser localhost://ou HTTPS.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}
 <button onclick="notifyMe()">Notify me!</button>

Nous utilisons l' API W3C Notifications . Ne confondez pas cela avec l' API de notification des extensions Chrome , qui est différente. Les notifications d'extensions Chrome ne fonctionnent évidemment que dans les extensions Chrome et ne nécessitent aucune autorisation spéciale de l'utilisateur.

Les notifications W3C fonctionnent dans de nombreux navigateurs (voir le support sur caniuse ) et nécessitent une autorisation utilisateur. En tant que meilleure pratique, ne demandez pas cette autorisation dès le départ. Expliquez d'abord à l'utilisateur pourquoi il souhaite recevoir des notifications et consultez d'autres modèles de notifications push. .

Notez que Chrome n'honore pas l'icône de notification sous Linux, en raison de ce bogue .

Les derniers mots

La prise en charge des notifications est en constante évolution, plusieurs API étant obsolètes ces dernières années. Si vous êtes curieux, consultez les modifications précédentes de cette réponse pour voir ce qui fonctionnait auparavant dans Chrome et pour découvrir l'histoire des notifications HTML riches.

Maintenant, la dernière norme se trouve à https://notifications.spec.whatwg.org/ .

Quant à savoir pourquoi il y a deux appels différents dans le même sens, selon que vous travaillez dans un service ou non - consultez ce ticket que j'ai déposé pendant que je travaillais chez Google .

Voir aussi notify.js pour une bibliothèque d'assistance.


4
@mghaoui - populaire! = vrai (nécessairement). j'ai marqué celui-ci comme la bonne réponse.
Sridhar Ratnakumar

2
window.webkitNotifications.checkPermission () lèvera une exception dans les navigateurs non-Chrome
JT Taylor

2
Fermer n'est pas une méthode. Je pense que vous voulez notification.cancel ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> Il semble également se fermer de lui-même.
KingOfHypocrites

3
Merci pour le support, l'utilisation de ceci avec Pusher m'a aidé à construire un système de notification.
Awijeet

3
ne fonctionne pas dans Chrome Version 47.0.2526.80 dev-m tout en travaillant sur Mozilla Fire fox sur Windows 8
Sarz

87

Vérifiez la conception et les spécifications de l'API (c'est toujours un brouillon) ou vérifiez la source de (la page n'est plus disponible) pour un exemple simple: c'est principalement un appel à window.webkitNotifications.createNotification.

Si vous voulez un exemple plus robuste (vous essayez de créer votre propre extension Google Chrome, et souhaitez savoir comment gérer les autorisations, le stockage local, etc.), consultez l' extension de notification Gmail : téléchargez le fichier crx au lieu d'installer , décompressez-le et lisez son code source.


N'y a-t-il rien qui fonctionne pour tous les navigateurs?
Royi Namir

@Royi, Il existe une extension Firefox , ainsi qu'une implémentation native de Firefox qui arrivera tôt ou tard . Dans le cas d'Internet Explorer, une solution possible serait de demander aux utilisateurs de votre site de télécharger Chrome Frame , car ce serait une solution viable pour faire fonctionner les notifications. Il existe une autre solution Microsoft .
Bryan Field

7
Cette réponse est complètement obsolète maintenant, 4 ans plus tard. @RoyiNamir: il y a l'API Notifications. Vérifiez ma réponse .
Dan Dascalescu

1
Le lien d'exemple est mort.
Vinny

33

Il semble que ce window.webkitNotificationssoit déjà obsolète et supprimé. Cependant, il existe une nouvelle API , et elle semble également fonctionner dans la dernière version de Firefox.

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen


@Miron Veuillez consulter l'hyperlien dans le premier paragraphe. J'ai lié la source, puis copié le code dans ma réponse selon l'étiquette SO. Si MDN n'était pas un wiki, j'aurais peut-être été plus explicite sur qui était l'auteur, mais je ne prétends rien.
mpen

Je ne vois pas où il a dit qu'il l'avait écrit?
Brandito

codepen ne fonctionne pas
Stepan Yakovenko

1
@StepanYakovenko Essayez à nouveau le lien codepen. J'ai ajouté un supplément elseà la fin pour vous dire quel est le problème. Vous avez probablement des notifications globalement désactivées comme moi: \
mpen

14

J'aime: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples mais il utilise d'anciennes variables, donc la démo ne fonctionne plus. webkitNotificationsest maintenant Notification.


L'exemple Twitter n'y fonctionne plus.
Dan Dascalescu

Vous devriez dire à html5rocks.com/en/profiles L'un d'eux doit travailler pour Twitter =)
Rudie

Il h. Hakim était le meilleur gars à informer , car il se trouve que j'ai contribué à son cadre de présentation.
Dan Dascalescu

4

J'ai fait ce simple wrapper de notification. Il fonctionne sur Chrome, Safari et Firefox.

Probablement sur Opera, IE et Edge également, mais je ne l'ai pas encore testé.

Obtenez simplement le fichier notify.js ici https://github.com/gravmatt/js-notify et placez-le dans votre page.

Obtenez-le sur Bower

$ bower install js-notify

Voilà comment cela fonctionne:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Vous devez définir le titre mais l'objet json comme deuxième argument est facultatif.


@gravmatt avez-vous rencontré un problème avec Firefox où s'il y a plus d'une fenêtre de navigateur ouverte, la notification n'apparaît pas?
eran otzap

@eranotzap cela devrait fonctionner avec plusieurs onglets. Je lance un projet où ce n'est pas un problème. mais je ne suis pas sûr avec plusieurs fenêtres.
gravmatt

J'ai le même problème avec plusieurs onglets
eran otzap

Cela fonctionne-t-il à partir de plusieurs onglets dans Firefox?
eran otzap

1
@eranotzap Je l'ai testé maintenant sur Windows et Mac. Je ne vois pas la notification dans un coin de l'écran mais j'entends le son des notifications et sur mac, je reçois la notification dans la barre latérale (avec plusieurs onglets ouverts). Firefox est le nouvel explorateur d'Internet.
gravmatt



3
<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>


1
Veuillez ne pas publier de réponses contenant uniquement du code. Ajoutez un peu de commentaires et / ou d'explications, de sorte que lorsque les gens liront ce message à l'avenir, ils le comprendront.
Adriaan

Pour cet extrait de code particulier, cela semble assez simple, cependant. D'autres utilisateurs peuvent également poster une question de suivi sur le commentaire, non?
frostshoxx

1
JSfiddle avec le code ci-dessus ne fonctionne pas, "L'autorisation pour l'API de notification ne peut plus être demandée à partir d'un iframe d'origine croisée.". Cependant, lorsque vous ouvrez la console développeur et entrez Notification.requestPermission();, var notification = new Notification('hello', { body: "Hey there!", });la notification s'affiche.
Kai Noack

Je suis désolé, mais qu'est-ce que cette réponse ajoute exactement à la mienne?
Dan Dascalescu
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.