Як користуються сповіщеннями на робочому столі Chrome ? Мені б хотілося, щоб це використовувало у власному коді.
Оновлення : Ось повідомлення в блозі, де пояснюється приклад сповіщень веб-кайт.
Як користуються сповіщеннями на робочому столі Chrome ? Мені б хотілося, щоб це використовувало у власному коді.
Оновлення : Ось повідомлення в блозі, де пояснюється приклад сповіщень веб-кайт.
Відповіді:
У сучасних браузерах є два типи сповіщень:
Виклик 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 щодо бібліотеки помічників.
Перевірте специфікацію дизайну та API (це все ще чернетка) або перевірте джерело (сторінка більше не доступна) на простий приклад: в основному це дзвінок на window.webkitNotifications.createNotification
.
Якщо ви хочете більш надійний приклад (ви намагаєтеся створити власне розширення Google Chrome і хочете знати, як боротися з дозволами, локальним сховищем тощо), ознайомтеся з розширенням Gmail Notifier : завантажте файл crx замість установки розпакуйте його та прочитайте його вихідний код.
Виявляється, 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}`);
}
}
else
кінці я додав додатковий, щоб розповісти, в чому проблема. Ви, ймовірно, сповіщення глобально відключені, як я: \
Мені подобається: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples, але він використовує старі змінні, тому демонстрація більше не працює. webkitNotifications
є зараз Notification
.
Я зробив цю просту обгортку сповіщень. Він працює на 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 як другий аргумент необов’язковий.
Ось приємна документація про API,
https://developer.chrome.com/apps/notifications
І, офіційне пояснення відео від Google,
Notify.js - це обгортка навколо нових сповіщень веб-сайту. Це працює досить добре.
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
<!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>
Notification.requestPermission();
, var notification = new Notification('hello', { body: "Hey there!", });
з’явиться повідомлення.