Как можно использовать уведомления рабочего стола Chrome? Я'хотел бы использовать это в своем собственном коде.
Обновление: Вот запись в блоге, объясняющая уведомления webkit с примером.
В современных браузерах существует два типа уведомлений:
Вызов API принимает те же параметры (за исключением действий - они недоступны для уведомлений на рабочем столе), которые хорошо документированы на сайте MDN, а для рабочих служб - на сайте Google's Web Fundamentals.
Ниже приведен рабочий пример настольных уведомлений для Chrome, Firefox, Opera и Safari. Обратите внимание, что по соображениям безопасности, начиная с Chrome 62, разрешение на Notification 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 Notifications. Не путайте его с API Chrome extensions notifications API, который отличается. Уведомления расширений Chrome, очевидно, работают только в расширениях Chrome и не требуют специального разрешения от пользователя.
Уведомления W3C работают во многих браузерах (см. поддержку на caniuse) и требуют разрешения пользователя. В качестве лучшей практики, не спрашивайте этого разрешения сразу. Сначала объясните пользователю, зачем ему нужны уведомления и посмотрите другие шаблоны push-уведомлений.
Обратите внимание, что Chrome не поддерживает значок уведомления в Linux из-за этой ошибки.
Поддержка уведомлений находится в постоянном движении, и за последние годы различные API были устаревшими. Если вам интересно, просмотрите предыдущие редакции этого ответа, чтобы узнать, что раньше работало в Chrome, и узнать историю богатых HTML-уведомлений.
Теперь последний стандарт находится по адресу https://notifications.spec.whatwg.org/.
Что касается того, почему существует два разных вызова одного и того же эффекта в зависимости от того, находитесь ли вы в сервисном работнике или нет - смотрите этот тикет я подал, когда работал в Google.
См. также notify.js для вспомогательной библиотеки.
Посмотрите дизайн и спецификацию API (это 'все еще черновик) или посмотрите исходники из (страница больше недоступна) для простого примера: Это 'в основном вызов window.webkitNotifications.createNotification
.
Если вам нужен более наглядный пример (вы'пытаетесь создать собственное расширение для Google Chrome'и хотели бы знать, как работать с разрешениями, локальным хранилищем и т.п.), посмотрите Gmail Notifier Extension: скачайте crx-файл вместо установки, распакуйте его и прочитайте исходный код.
Появляется окно, что.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}`);
}
}
Мне нравится: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples, но он использует старые переменные, поэтому демонстрация больше не работает. webkitNotifications
теперь Notification
.
Я сделал этот простой фантик уведомления. Это работает в Chrome, Safari и Firefox.
Наверное, в опере, 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-объект в качестве второго аргумента является обязательным.
Вот хорошая документация по API-интерфейсы,
https://developer.chrome.com/apps/notifications
И, официальное видео объяснение от Google,
Notify.js это обертка вокруг нового уведомления в WebKit. Он работает довольно хорошо.
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>
</HTML и ГТ;