web-dev-qa-db-fra.com

Chrome exemple de notification de bureau

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

Mise à jour : Voici n article de blog expliquant les notifications du kit Web à l'aide d'un exemple.

javascriptdesktopgoogle-chromenotifications
385
Sridhar Ratnakumar

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

  • notifications du burea - simple à déclencher, fonctionne tant que la page est ouverte et peut disparaître automatiquement après quelques secondes
  • notifications du technicien de service - un peu plus compliqué, mais ils peuvent fonctionner en arrière-plan (même après la fermeture de la page), sont persistants et prennent en charge des boutons

L'appel d'API utilise les mêmes paramètres (à l'exception des actions - non disponibles dans les notifications de poste de travail), qui sont bien documentés sur MDN et pour les prestataires de services, sur Web Fundamentals de Google = site.

Vous trouverez ci-dessous un exemple de travail de burea notifications pour Chrome, Firefox, Opera et Safari. Notez que pour des raisons de sécurité, en commençant par Chrome 62, l'autorisation de l'API de notification peut ne plus être demandée à un iframe d'origine croisée , nous ne pouvons donc pas le démontrer à l'aide de StackOverflow. extraits de code. 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 Notifications W3C . Ne confondez pas ceci avec l'API de notifications Chrome extensions , qui est différent. _ Les notifications d'extension 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 l’assistance technique sur caniuse ) et nécessitent l’autorisation de l’utilisateur. À titre de pratique exemplaire, ne demandez pas cette autorisation immédiatement. Expliquez d'abord à l'utilisateur pourquoi il veut des notifications et voyez-en d'autres modèles de notifications Push .

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

Mots finaux

La prise en charge des notifications a été en constante évolution, diverses API étant obsolètes au cours des dernières années. Si vous êtes curieux, vérifiez les modifications précédentes de cette réponse pour voir ce qui fonctionnait auparavant dans Chrome et pour apprendre l'histoire des notifications HTML riches.

Le dernier standard est maintenant https://notifications.spec.whatwg.org/ .

Pourquoi deux appels différents vont-ils dans le même sens, selon que vous travaillez chez un prestataire de services ou pas - voir ce ticket que j'ai classé pendant que je travaillais chez Google .

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

677
Dan Dascalescu

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

Si vous souhaitez 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 Gmail Notifier. Extension : téléchargez le fichier crx au lieu de l’installer, décompressez-le et lisez son code source.

84
GmonC

Il semble que window.webkitNotifications ait déjà été 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

33
mpen

J'aime: http://www.html5rocks.com/fr/tutorials/notifications/quick/#toc-examples mais il utilise d'anciennes variables pour que la démo ne fonctionne plus. webkitNotifications est maintenant Notification.

14
Rudie

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

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

Récupérez simplement le fichier notify.js à partir d’ici https://github.com/gravmatt/js-notify et mettez-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 second argument est facultatif.

4
gravmatt
<!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>
3
Hina Halani

Voici la documentation de Nice sur les API,

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

Et, explication vidéo officielle par Google,

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

3
Altaf Patel

Notify.js encapsule les nouvelles notifications du kit Web. Ça marche plutôt bien.

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

3
Ashley Davis