Przykład powiadomienia o pulpicie Chrome [zamknięty]
Jak używać Chrome desktop notifications ? Chciałbym użyć tego w moim własnym kodzie.
Update : Oto post na blogu wyjaśniający powiadomienia webkit za pomocą przykładu.
9 answers
Poniżej znajduje się roboczy przykład powiadomień pulpitu dla Chrome, Firefox, Opera i Safari. Należy pamiętać, że ze względów bezpieczeństwa, począwszy od Chrome 62, pozwolenie na API powiadomień może nie być już wymagane od ramki iframe, więc musisz zapisać ten przykład w pliku HTML w swojej witrynie/aplikacji i upewnij się, że używasz 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>
Używamy API W3C Notifications , udokumentowanego w MDN. Nie należy mylić tego z interfejs API Chrome Extensions notifications , który jest inny. Powiadomienia o rozszerzeniach Chrome oczywiście działają tylko w rozszerzeniach Chrome, nie wymagają specjalnych uprawnień od użytkownika, obsługują powiadomienia tekstowe, ale znikają automatycznie, a użytkownik może nie zauważyć, że zostały uruchomione ). Powiadomienia W3C działają w wielu przeglądarkach (Zobacz Wsparcie na caniuse), wymagają uprawnień użytkownika, układają się na szczycie poprzedniego powiadomienia i nie są automatycznie znikają w Chrome ( robią w Firefoksie ).
Ostatnie słowa
[3]}Obsługa powiadomień stale się rozwija, a w ciągu ostatnich trzech lat różne interfejsy API były przestarzałe. Jeśli jesteś ciekawy, Sprawdź poprzednie edycje tej odpowiedzi, aby zobaczyć, co kiedyś działało w Chrome i poznać historię zaawansowanych powiadomień HTML.Teraz najnowszy standard jest na https://notifications.spec.whatwg.org/.
Istnieje również inne wywołanie (choć z tymi samymi parametrami) do tworzenia powiadomień od pracowników serwisu, którzy z jakiegoś powodu nie mają dostępu do konstruktora Notification().
Zobacz też js {[5] } dla biblioteki pomocniczej.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-14 22:23:43
Sprawdź specyfikację API design i (nadal jest to szkic) lub sprawdź źródło z (strona nie jest już dostępna) dla prostego przykładu: jest to głównie wywołanie do window.webkitNotifications.createNotification.
Jeśli chcesz uzyskać bardziej solidny przykład (próbujesz utworzyć własne rozszerzenie Google Chrome i chcesz wiedzieć, jak radzić sobie z uprawnieniami, lokalną pamięcią masową itp.), Sprawdź rozszerzenie Gmail Notifier: pobierz plik crx zamiast go instalować, rozpakuj go i przeczytaj jego źródło kod.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-04 13:04:53
Wygląda na to, że window.webkitNotifications został już przestarzały i usunięty. Jednak istnieje nowe API i wydaje się działać również w najnowszej wersji Firefoksa.
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.
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-31 20:41:38
Lubię: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples ale używa starych zmiennych, więc demo już nie działa. webkitNotifications jest teraz Notification.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-08 17:38:51
/ align = "left" / js jest owijką wokół nowych powiadomień webkit. Działa całkiem nieźle.
Http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-03 22:04:12
Zrobiłem ten prosty wrapper powiadomień. Działa na Chrome, Safari i Firefox.
Prawdopodobnie również na Operze, IE i Edge, ale jeszcze tego nie testowałem.
/ Align = "left" / plik js stąd https://github.com/gravmatt/js-notify i umieść go na swojej stronie.Get it on Bower
$ bower install js-notify
Tak to działa:
notify('title', {
body: 'Notification Text',
icon: 'path/to/image.png',
onclick: function(e) {}, // e -> Notification object
onclose: function(e) {},
ondenied: function(e) {}
});
Musisz ustawić tytuł, ale obiekt json jako drugi argument jest opcjonalny.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-27 13:18:36
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-07 09:41:49
Tu jest fajna dokumentacja na API,
Https://developer.chrome.com/apps/notifications
I, oficjalne wyjaśnienie wideo przez Google,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-11 06:32:48
Z jakiegoś powodu zaakceptowana odpowiedź nie zadziałała dla mnie, skończyło się na poniższym przykładzie:
Https://developer.chrome.com/apps/app_codelab_alarms#create-notification
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) {});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-09 07:22:56