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


409

Як користуються сповіщеннями на робочому столі Chrome ? Мені б хотілося, щоб це використовувало у власному коді.

Оновлення : Ось повідомлення в блозі, де пояснюється приклад сповіщень веб-кайт.


2
Я залишив відповідь нижче, оновлену станом на листопад 2012 року, після того як HTML-сповіщення застаріли. Він має фактичний приклад, як той, який ви шукали.
Дан Даскалеску


1
Оновлення : станом на 2015 рік веб-сайти також можуть надсилати реальні push-сповіщення, які надсилаються навіть тоді, коли користувач не займається веб-сайтом. Ознайомтеся з цією відповіддю
колимарко

3
Усі ці виборці для позначення його як закритого повинні бути любителями IE / Safari. Він специфічний для сповіщення браузера і особливо для хромування. якщо це так поза темою, то чому так багато людей сподобається і в першу чергу позначає його як зірковий?
праш

2
Чому поза темою?
SmartManoj

Відповіді:


716

У сучасних браузерах є два типи сповіщень:

  • Сповіщення на робочому столі - це легко запустити, працювати до тих пір, поки сторінка відкрита, і може автоматично зникнути через кілька секунд
  • Сповіщення працівника служби - трохи складніше, але вони можуть працювати у фоновому режимі (навіть після закриття сторінки), є стійкими та підтримують кнопки дій

Виклик 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 працюють у багатьох браузерах (див. Підтримку в каніузі ) та потребують дозволу користувача. Як найкраща практика, не вимагайте цього дозволу одразу ж у миші. Спочатку поясніть користувачеві, чому вони хочуть отримувати сповіщення, і перегляньте інші шаблони сповіщень .

Зауважте, що Chrome не вшановує значок сповіщення в Linux через цю помилку .

Заключні слова

Підтримка сповіщень знаходиться в постійному потоці, оскільки останні API застаріли протягом останніх років. Якщо вам цікаво, перегляньте попередні зміни цієї відповіді, щоб побачити, що раніше працювало в Chrome, і дізнатися історію багатих HTML-сповіщень.

Тепер останній стандарт знаходиться на веб- сайті https://notifications.spec.whatwg.org/ .

Щодо того, чому є два різні дзвінки з однаковим ефектом, залежно від того, ви працюєте в службі чи ні - дивіться цей квиток, який я подав під час роботи в Google .

Дивіться також notify.js щодо бібліотеки помічників.


4
@mghaoui - популярний! = true (обов’язково). я позначив цю як правильну відповідь.
Шрідхар Ратнакумар

2
window.webkitNotifications.checkPermission () викине виняток у веб-переглядачах, які не перебувають у Chrome
JT Taylor

2
Закрити - це не метод. Думаю, ви хочете noti.cancel ()> decimalcity.net/blog/2012/10/12/webkit-notification-api >> Також, схоже, закривається самостійно.
KingOfHypocrites

3
Дякую за підтримку, використовуючи це з Pusher, ми допомогли створити систему сповіщень.
Awijeet

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

кодоп


@Miron Будь ласка, подивіться на гіперпосилання в першому пункті. Я зв’язав джерело, а потім скопіював код у свою відповідь згідно етикету SO. Якби MDN не був вікі, я, можливо, був би більш чіткий про те, ким був автор, але я нічого не претендую.
mpen

Я не бачу, де він сказав, що це написав?
Брандіто

codepen не працює
Степан Яковенко

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

14

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


Приклад Twitter там більше не працює.
Дан Даскалеску

Ви повинні сказати html5rocks.com/en/profiles Один з них повинен працювати на Twitter =)
Rudie

Хе. Хакім був найкращим хлопцем, який сповістив про це , оскільки я, мабуть, зробив внесок у його презентацію.
Дан Даскалеску

4

Я зробив цю просту обгортку сповіщень. Він працює на Chrome, Safari та Firefox.

Можливо, на Opera, IE та Edge, але я ще не перевіряв її.

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

Отримайте його на Bower

$ 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, коли якщо відкрито більше одного вікна браузера, повідомлення не з’являється?
eran otzap

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

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

Це працює з декількох вкладок у Firefox?
eran otzap

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
Утримайтеся від публікації відповідей, що стосуються лише коду. Додайте трохи коментарів та / або пояснень, щоб люди, читаючи цю публікацію, в майбутньому зрозуміли її.
Адріан

Однак цей фрагмент коду здається досить простим. Інші користувачі також можуть опублікувати додаткове запитання щодо коментаря, правда?
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.