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


409

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

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


2
Я оставил ответ, обновленный по состоянию на ноябрь 2012 года, после того, как уведомления HTML стали устаревшими. Это реальный пример, подобный тому, который вы искали.
Дан Даскалеску


1
Обновление : с 2015 года веб-сайты могут также отправлять реальные push-уведомления, которые доставляются, даже если пользователь не просматривает веб-сайт. Проверьте этот ответ
collimarco

3
Все эти избиратели, отметившие это как закрытое, должны быть любителями IE / Safari. Это относится к уведомлениям браузера и особенно к Chrome. если это так не по теме, то почему так много людей любят его и отмечают его как помеченного в первую очередь?
prash

2
Почему не по теме?
SmartManoj

Ответы:


717

В современных браузерах существует два типа уведомлений:

  • Уведомления на рабочем столе - их легко запускать, они работают до тех пор, пока страница открыта, и могут исчезнуть автоматически через несколько секунд.
  • Уведомления Service Worker - немного сложнее, но они могут работать в фоновом режиме (даже после закрытия страницы), являются постоянными и поддерживают кнопки действий

Вызов API принимает те же параметры (за исключением действий - недоступных в уведомлениях на рабочем столе), которые хорошо документированы в MDN и для сервисных работников на сайте Google Web Fundamentals .


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

Мы используем API уведомлений W3C . Не путайте это с API уведомлений расширений Chrome , который отличается. Уведомления расширений Chrome, очевидно, работают только в расширениях Chrome и не требуют специального разрешения от пользователя.

Уведомления W3C работают во многих браузерах (см. Поддержку caniuse ) и требуют разрешения пользователя. В качестве лучшей практики, не спрашивайте это разрешение сразу. Сначала объясните пользователям, почему им нужны уведомления, и посмотрите другие шаблоны push-уведомлений .

Обратите внимание, что Chrome не поддерживает значок уведомлений в Linux из-за этой ошибки .

Заключительные слова

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

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

Относительно того, почему есть два разных вызова одного и того же эффекта, в зависимости от того, работаете ли вы в сервисном центре или нет - посмотрите этот билет, который я подал, работая в Google .

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


4
@mghaoui - популярно! = правда (обязательно). я пометил это как правильный ответ.
Шридхар Ратнакумар

2
window.webkitNotifications.checkPermission () сгенерирует исключение в браузерах без Chrome
JT Taylor

2
Закрыть это не метод. Я думаю, что вы хотите уведомление.cancel ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> Также, похоже, закрывается само по себе.
KingOfHypocrites

3
Спасибо за поддержку, использование этого с Pusher помогло мне построить систему уведомлений.
Авиджит

3
не работает в Chrome версии 47.0.2526.80 dev-m, когда работал на Mozilla Fire fox в Windows 8
Sarz

87

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

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


Есть ли что-нибудь, что работает для всех браузеров?
Рой Намир

@Royi, есть расширение Firefox , а также встроенная реализация Firefox, которая появится рано или поздно . В случае Internet Explorer одним из возможных решений было бы попросить пользователей вашего сайта загрузить Chrome Frame , поскольку это было бы жизнеспособным решением для получения уведомлений. Есть другое решение Microsoft .
Брайан Филд

7
Этот ответ полностью устарел к настоящему времени, спустя 4 года. @RoyiNamir: есть API уведомлений. Проверьте мой ответ .
Дан Даскалеску

1
Ссылка на пример не работает.
Винни

33

Похоже, что 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!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen


@Miron Пожалуйста, взгляните на гиперссылку в первом абзаце. Я связал источник, а затем скопировал код в мой ответ согласно SO этикету. Если бы MDN не был вики, я мог бы более четко сказать, кто автор, но я ничего не притворяюсь.
mpen

Я не понимаю, где он сказал, что написал это?
Брандито

не работает codepen
Степан Яковенко

1
@StepanYakovenko Попробуйте снова ссылку на кодовый блок. Я добавил дополнительный elseв конце, чтобы сказать вам, в чем проблема. Вы, вероятно, отключили глобальные уведомления, как я: \
mpen

14

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


Пример с Твиттером там больше не работает.
Дан Даскалеску

Вы должны сказать html5rocks.com/en/profiles Один из них должен работать для Twitter =)
Rudie

Хех. Хаким был лучшим парнем, чтобы уведомить , так как я случайно внес вклад в его структуру представления.
Дан Даскалеску

4

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

Возможно, в Opera, IE и Edge, но я еще не проверял.

Просто получите файл notify.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 в качестве второго аргумента является необязательным.


@gravmatt Вы сталкивались с проблемой с Firefox, когда, если открыто более одного окна браузера, уведомление не появляется?
Эран Отзап

@eranotzap должен работать с несколькими вкладками. Я запускаю проект, где это не проблема. но я не уверен с несколькими окнами.
гравмат

У меня та же проблема с несколькими вкладками
eran otzap

Работает ли он с нескольких вкладок в Firefox?
Эран Отзап

1
@eranotzap Я проверил это сейчас на Windows и Mac. Я не вижу уведомления ни в одном углу экрана, но слышу звук уведомлений, и на Mac я получаю уведомление на боковой панели (с несколькими открытыми вкладками). Firefox - новый интернет-обозреватель.
гравматт



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


1
Пожалуйста, воздержитесь от публикации ответов только по коду. Добавьте немного комментариев и / или объяснений, чтобы, когда люди будут читать этот пост в будущем, они его поняли.
Adriaan

Однако для этого конкретного фрагмента кода это выглядит довольно просто. Другие пользователи также могут оставить в комментарии дополнительный вопрос, верно?
frostshoxx

1
JSfiddle с приведенным выше кодом не работает: «Разрешение для API уведомлений больше не может запрашиваться из межкадрового iframe». Однако, когда вы открываете консоль разработчика и вводите Notification.requestPermission();, var notification = new Notification('hello', { body: "Hey there!", });появляется уведомление.
Кай Ноак

Извините, но что именно этот ответ добавляет к моему?
Дан Дакалеску
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.