javascript - example - Exemple de notification de bureau Chrome




web push notification example (6)

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

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.


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) {});

}


Vous trouverez ci-dessous un exemple pratique de notifications sur le bureau pour Chrome, Firefox, Opera et Safari. Notez que pour des raisons de sécurité, depuis Chrome 62, l' autorisation de l'API de notification ne peut plus être demandée à partir d'un iframe d'origine croisée . Vous devez donc enregistrer cet exemple dans un fichier HTML sur votre site / application et vous assurer utiliser 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://.com/a/13328397/1269037");      
    };

  }

}
<button onclick="notifyMe()">Notify me!</button>

Nous utilisons l'API W3C Notifications , documentée sur MDN . Ne confondez pas cela avec l' API des notifications des extensions Chrome , qui est différente. Les notifications d'extension Chrome ne fonctionnent évidemment que dans les extensions Chrome, ne nécessitent aucune autorisation spéciale de l'utilisateur, prennent en charge les notifications de texte enrichi, mais disparaissent automatiquement et l'utilisateur peut ne pas remarquer qu'elles ont été déclenchées ). Les notifications W3C fonctionnent dans de nombreux navigateurs (voir support sur caniuse ), requièrent l'autorisation de l'utilisateur, s'empilent en plus de la notification précédente et ne disparaissent pas automatiquement dans Chrome ( ils le font dans Firefox ).

Derniers mots

Le support des notifications a été continuellement modifié, diverses API étant obsolètes depuis trois ans. Si vous êtes curieux, vérifiez les modifications précédentes de cette réponse pour voir ce qui fonctionnait dans Chrome et pour connaître l'histoire des notifications HTML enrichies.

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

Il existe également un appel différent (avec les mêmes paramètres) pour créer des notifications auprès des techniciens de service, qui, pour une raison quelconque , n'ont pas accès au constructeur Notification() .

Voir aussi notify.js pour une bibliothèque auxiliaire.





notifications