Chrome pentru desktop notificare exemplu

În browserele moderne, există două tipuri de notificări:

• Notificări pe Desktop - simplu de a declanșa, locul de muncă atâta timp cât pagina este deschis, și poate dispărea automat după câteva secunde
• Lucrător de servicii notifications - un pic mai complicat, dar se poate lucra în fundal (chiar și după ce pagina este închis), sunt persistente, și suport butoane de acțiune

API apel are aceeași parametri (cu excepția acțiunilor - nu sunt disponibile pe notificări pe desktop), care sunt bine documentate pe MDN și pentru lucrătorii de servicii, pe Google's Web Fundamentals site-ului.

Mai jos este un exemplu de lucru desktop notificări pentru Chrome, Firefox, Opera și Safari. Rețineți că din motive de securitate, începând cu Chrome 62, permisiunea pentru Notificare API nu mai poate fi solicitat de la o cruce de origine iframe, astfel încât să ne putem't acest demo folosind StackOverflow's fragmente de cod. Te'll nevoie pentru a salva acest exemplu într-un fișier HTML pe site-ul/aplicația, și asigurați-vă că pentru a utiliza `localhost:// sau 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');
  };
 }
}

 Notify me!

Am're folosind W3C Notificări API. A nu se confunda acest lucru cu Crom extensii notificări API, care este diferit. Extensia Chrome notificări, evident, numai de muncă în Chrome extensii, și don't nevoie de nici o permisiune specială din partea utilizatorului.

W3C notificări de muncă în mai multe browsere (a se vedea sprijin pe caniuse), și necesită permisiunea utilizatorului. Ca o bună practică, don't cere permisiunea pentru acest lucru, right off bat. Explica pentru primul utilizator ce ar vrea ei notificări și a vedea alte notificări împinge patterns.

Rețineți că Chrome nu't onoarea pictograma de notificare pe Linux, din cauza acest bug.

Cuvinte finale

Suport notificare a fost în flux continuu, cu diverse Api-uri depreciată în ultimii ani. Daca're curios, verificați editări anterioare de acest răspuns pentru a vedea ce a lucrat în Chrome, și să învețe povestea bogat HTML notificări.

Acum cel mai recent standard este la https://notifications.spec.whatwg.org/.

De ce există două apeluri diferite în același sens, în funcție de're într-un serviciu de lucrător sau nu - a se vedea acest bilet am depus-o în timp ce am lucrat la Google.

A se vedea, de asemenea, notify.js pentru un helper library.

Verificați design și specificația API (l's încă un proiect) sau verificați sursa (pagina nu mai este disponibil) pentru un exemplu simplu: It's, în principal, un apel la fereastră.webkitNotifications.createNotification`.

Dacă doriți o mai robust exemplu (ai're încercarea de a crea propria dvs. de Google Chrome's prelungire, și ar dori să știe cum să se ocupe cu permisiuni de stocare locale și astfel), a verifica afară Gmail Notifier Extensie: descărcați de la crx fișier în loc de a-l instala, dezarhivați-l și citiți codul său sursă.

Se pare că fereastra.webkitNotifications` a fost deja învechit și a fost eliminat. Cu toate acestea, nu's o nouă API, și pare să funcționeze în cea mai recentă versiune de Firefox la fel de bine.

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

Îmi place: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples dar acesta utilizează variabile vechi, deci demo-ul nu - 't mai funcționează. webkitNotifications este acum "Notificare".

Am făcut această Notificare simplu înveliș. Acesta funcționează pe Chrome, Safari și Firefox.

Probabil pe Opera, IE și C, precum și, dar nu am't testat încă.

Doar obține notify.js fișierul de aici https://github.com/gravmatt/js-notify si pune-l in pagina ta.

Ia-l pe Bower

$ bower install js-notify

Acesta este modul în care funcționează:

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

Aveți pentru a seta titlul, dar la obiect json ca al doilea argument este opțional.

Aici este frumos documentația pe Api-uri,

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

Și, oficial video explicație de Google,

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

Notify.js este un înveliș în jurul valorii de nou webkit notificări. Acesta funcționează destul de bine.

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