Я пытаюсь создать веб-сайт, который отображает уведомления, когда происходит какое-то событие. Я проверил страницу 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>
Сохраните этот код в файле на вашем компьютере и откройте его в браузере.
"granted"
но Notification.permission
по-прежнему "по умолчанию", и уведомление не отображается. При повторном notify
появляется другое диалоговое окно с запросом разрешений на отображение уведомлений.Notification.permission
будет granted
, но atempting создать новые результаты уведомления в качестве UnknownError
.Почему код работает в Firefox, но не в Edge или Chrome? Как я могу заставить его работать хотя бы в Chrome (и, надеюсь, в Edge)?
Вы можете следовать примеру, который они предоставляют в Документах 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">
Notification.permission
по-прежнему"default"
даже после перезагрузки страницы.