Пример уведомления рабочего стола Chrome [закрыто]

Как использовать уведомления рабочего стола Chrome? Я бы хотел использовать это в моем собственном коде.

обновление: вот блоге объяснение уведомлений webkit с примером.

9 362
javascript google-chrome notifications desktop-application

9 ответов:

Ниже приведен рабочий пример уведомлений рабочего стола для Chrome, Firefox, Opera и Safari. Обратите внимание, что по соображениям безопасности, начиная с Chrome 62,разрешение на API уведомлений больше не может быть запрошено у iframe перекрестного происхождения, поэтому вам нужно будет сохранить этот пример в HTML-файле на вашем сайте / приложении и обязательно использовать 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>

мы используем W3C уведомления API, документированный по адресу MDN. Не путайте это с Chrome extensions notifications API, которая отличается. Уведомления о расширении Chrome, очевидно, работают только в расширениях Chrome, не требуют специального разрешения от пользователя, поддерживают текстовые уведомления, но исчезнет автоматически, и пользователь может не заметить, что они были вызваны). Уведомления W3C работают во многих браузерах (см. раздел Поддержка на caniuse), требуется разрешение пользователя, стек в верхней части предыдущего уведомления и не исчезают автоматически в Chrome (они делают в Firefox).

последние слова

поддержка уведомлений находится в непрерывном потоке, а различные API-интерфейсы устарели за последние три года. Если вам интересно, проверьте предыдущие изменения этого ответа, чтобы узнать, что раньше работало в Chrome, и узнать историю богатых уведомлений HTML.

Теперь самый последний стандарт на https://notifications.spec.whatwg.org/.

есть еще разные (хотя и с теми же параметрами) для создания уведомлений от сервисных работников, которые почему-то, не имеют доступа к Notification() конструктор.

см. также уведомления.js для вспомогательной библиотеки.

634

Регистрация конструкция и спецификация API (Это все еще черновик) или проверьте источник (страница больше не доступна) для простого примера: это в основном вызов window.webkitNotifications.createNotification.

Если вы хотите более надежный пример (вы пытаетесь создать свое собственное расширение Google Chrome и хотели бы знать, как обращаться с разрешениями, локальным хранилищем и т. д.), Проверьте Расширение Gmail Notifier: загрузите crx-файл вместо его установки, распакуйте его и прочитайте исходный код.

83

получается, что window.webkitNotifications уже устарели и удалены. Однако, есть новый API, и это, кажется, работает в последней версии 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

31

мне нравится:http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples но он использует старые переменные, поэтому демо больше не работает. webkitNotifications теперь Notification.

14

уведомления.js-это оболочка вокруг новых уведомлений webkit. Это работает довольно хорошо.

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

4

Я сделал эту простую обертку уведомления. Он работает на Chrome, Safari и Firefox.

вероятно, на Opera, IE и Edge, но я еще не тестировал его.

просто получить уведомление.js файл отсюда https://github.com/gravmatt/js-notify и поместите его на свою страницу.

получить его на Бауэр

$ bower install js-notify

вот как это работает:

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

вы должны установить заголовок, но объект json в качестве второго аргумента необязательный.

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

4

вот хорошая документация по API,

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

и, официальное видео объяснение от Google,

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

3

по какой-то причине принятый ответ не сработал для меня, я в конечном итоге использовал следующий пример:

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

}
1