javascript html5 - Exemple de notification de bureau Chrome




push example (9)

Comment utiliser les notifications de bureau Chrome ? Je voudrais utiliser ça dans mon propre code.

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


Answers

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>



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

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

Il suffit d'obtenir le fichier notify.js d'ici https://github.com/gravmatt/js-notify et le mettre 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.


Pour une raison quelconque, la réponse acceptée n'a pas fonctionné pour moi, j'ai fini par utiliser l'exemple suivant:

https://developer.chrome.com/apps/app_codelab_alarms#create-notification

function notifyMe() {

    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon.png',
        title: 'Don\'t forget!',
        message: 'You have  things to do. Wake up, dude!'
    }, function(notificationId) {});

}

Vérifiez la design et les spécifications de l'API (il s'agit toujours d'un brouillon) ou vérifiez la source à partir de (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 l'extension de votre propre Google Chrome, et souhaitez savoir comment gérer les autorisations, le stockage local, etc.), consultez l' extension Gmail Notifier : téléchargez le fichier crx au lieu d'installer il, décompressez-le et lisez son code source.


Il semble que window.webkitNotifications a déjà été déprécié et supprimé. Cependant, il existe une nouvelle API , qui 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!");
      }
    });
  }

  // At last, if the user already denied any notification, and you 
  // want to be respectful there is no need to bother him any more.
}

codepen


J'ai découvert que vous pouvez également utiliser:

input:focus{
   border: transparent;
}




javascript desktop google-chrome notifications