Exemple de notification de bureau Chrome [fermé]

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.

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.

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.

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

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.

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.

Voici une belle documentation sur les API,

https://developer.chrome.com/apps/notifications

Et, explication vidéo officielle de Google,

https://developers.google.com/live/shows/83992232-1001

Notify.js est un wrapper autour des nouvelles notifications webkit. Cela fonctionne plutôt bien.

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

<!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>