Пример уведомления рабочего стола Chrome
Как использовать уведомления Chrome на рабочем столе? Я хотел бы, чтобы это использовалось в моем собственном коде.
Обновление: вот сообщение в блоге, объясняющее уведомления webkit с примером.
9 ответов
Ниже приведен рабочий пример уведомлений на рабочем столе для Chrome, Firefox, Opera и Safari. Обратите внимание, что по соображениям безопасности, начиная с Chrome 62, разрешение на API уведомлений больше не может запрашиваться у iframe с несколькими источниками, поэтому вам нужно сохранить этот пример в файле HTML на вашем сайте / в приложении и убедиться, что использовать 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://stackru.com/a/13328397/1269037");
};
}
}
<button onclick="notifyMe()">Notify me!</button>
Мы используем API уведомлений W3C, документированный в MDN. Не путайте это с API уведомлений расширений Chrome, который отличается. Уведомления о расширениях Chrome, очевидно, работают только в расширениях Chrome, не требуют от пользователя каких-либо специальных разрешений, поддерживают уведомления с расширенным текстом, но исчезают автоматически, и пользователь может не заметить, что они сработали). Уведомления W3C работают во многих браузерах (см. Поддержку caniuse), требуют разрешения пользователя, помещаются поверх предыдущего уведомления и не исчезают автоматически в Chrome ( как в Firefox).
Заключительные слова
Поддержка уведомлений постоянно менялась, и в течение последних трех лет различные API не использовались. Если вам интересно, посмотрите предыдущие правки этого ответа, чтобы узнать, что раньше работало в Chrome, и узнать историю расширенных HTML-уведомлений.
Теперь последний стандарт находится по адресу https://notifications.spec.whatwg.org/.
Существует также другой вызов (хотя и с теми же параметрами) для создания уведомлений от сервисных работников, которые по какой-то причине не имеют доступа к Notification() конструктор.
Смотрите также 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!");
}
});
}
// At last, if the user already denied any notification, and you
// want to be respectful there is no need to bother him any more.
}
Мне нравится: http://www.html5rocks.com/en/tutorials/notifications/quick/, но в нем используются старые переменные, поэтому демонстрационная версия больше не работает. webkitNotifications сейчас Notification,
<!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>
Я сделал эту простую оболочку уведомлений. Работает на Chrome, Safari и Firefox.
Возможно, в Opera, 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 в качестве второго аргумента является необязательным.
Notify.js - это оболочка для уведомлений о новых webkit. Это работает довольно хорошо.
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
Вот хорошая документация по API,
https://developer.chrome.com/apps/notifications
И официальное объяснение видео от Google,
По какой-то причине принятый ответ не сработал для меня, я использовал следующий пример:
https://developer.chrome.com/apps/app_codelab_alarms
function notifyMe() {
chrome.notifications.create('reminder', {
type: 'basic',
iconUrl: 'icon.png',
title: 'Don\'t forget!',
message: 'You have things to do. Wake up, dude!'
}, function(notificationId) {});
}