Как отображать уведомления через браузеры

Question

Как отображать уведомления через браузеры

1

Я пытаюсь создать веб-сайт, который отображает уведомления, когда происходит какое-то событие. Я проверил страницу MDN для уведомлений, и я написал пример, который работает в Firefox Developer Edition 58.0b7, но имеет странное поведение в Edge 40.15063.674.0 и Chrome 62.0.3202.94 (в Windows 10).

Вот минимальный полный проверяемый пример:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
  <script>
  function notify(str) {
  if(!("Notification" in window) || Notification.permission === "deneided") {
    return alert(str);
  }
  if (Notification.permission === "granted") {
    return new Notification("TITLE", {body: str});
  }
  Notification.requestPermission().then(perm => {
    console.log("request result", perm);
    console.log("Notification.permission", Notification.permission);
    if (perm === "granted") {
      return new Notification("TITLE", {body: str});
    }
  });
}

notify("test");
  </script>
</body>
</html>

Сохраните этот код в файле на вашем компьютере и откройте его в браузере.

В Firefox, если вы предоставляете разрешения при каждом запросе, и появляется уведомление.
В Chrome, если вы предоставляете разрешения, вы можете видеть в консоли, что запрос разрешения был возвращен "granted" но Notification.permission по-прежнему "по умолчанию", и уведомление не отображается. При повторном notify появляется другое диалоговое окно с запросом разрешений на отображение уведомлений.
В Крае, после выдачи разрешений, Notification.permission будет granted, но atempting создать новые результаты уведомления в качестве UnknownError.

Почему код работает в Firefox, но не в Edge или Chrome? Как я могу заставить его работать хотя бы в Chrome (и, надеюсь, в Edge)?

Hawkings 28 нояб. 2017, в 22:01

Источник

Теги:

javascript

microsoft-edge

google-chrome

notifications

firefox

1 ответ

Ещё вопросы

randomguy04 · Answer 1 · 2017-11-28T19-31-00.000Z

Вы можете следовать примеру, который они предоставляют в Документах API уведомлений MDN в разделе "Альтернативный пример: выполнить при загрузке страницы", вы можете добиться отображения уведомлений с меньшими накладными расходами.

попробуйте код ниже с локальными файлами (фрагмент здесь будет отклонять попытки уведомления)

В Chrome вы увидите обновленную версию Notification.permission после обновления страницы.

Notification.requestPermission().then(function(result) {
  console.log(result);
});

document.querySelector('#notifyButton').addEventListener('click', showNotification)

function showNotification(){
	console.log('Clicked!!')
	var options = {
	    body: 'this is the body!'
	}
	var n = new Notification('this is the title', options);
}

<input id="notifyButton" type="button" name="notify" value="click for notification">

Использование вашего кода в Chrome приводит к тому же результату, что и мой код. Уведомление не отображается, и Notification.permission по-прежнему "default" даже после перезагрузки страницы.