Bagaimana cara menggunakan Chrome desktop pemberitahuan? I'd seperti yang menggunakannya dalam kode saya sendiri.
Update: Berikut's blog post menjelaskan webkit pemberitahuan dengan sebuah contoh.
Di browser modern, ada dua jenis pemberitahuan:
API call mengambil parameter yang sama (kecuali untuk tindakan - tidak tersedia pada desktop pemberitahuan), yang terdokumentasi dengan baik pada MDN dan untuk pekerja layanan, pada Google's Web Fundamentals situs.
Di bawah ini adalah contoh kerja dari desktop pemberitahuan untuk Chrome, Firefox, Opera dan Safari. Perhatikan bahwa untuk alasan keamanan, dimulai dengan Chrome 62, izin untuk Pemberitahuan API tidak lagi dapat diminta dari cross-asal iframe, sehingga kita dapat't demo ini menggunakan StackOverflow's potongan kode. Anda'll perlu untuk menyimpan contoh ini di file HTML pada situs/aplikasi, dan pastikan untuk menggunakan `localhost:// atau 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>
Kami're menggunakan W3C Pemberitahuan API. Jangan bingung ini dengan Chrome ekstensi pemberitahuan API, yang berbeda. Ekstensi Chrome pemberitahuan yang jelas-jelas hanya bekerja di ekstensi Chrome, dan don't memerlukan izin khusus dari pengguna.
W3C pemberitahuan bekerja di berbagai browser (lihat dukungan pada caniuse), dan memerlukan izin pengguna. Sebagai praktik terbaik, don't meminta izin ini, langsung dari kelelawar. Jelaskan kepada pengguna pertama mengapa mereka ingin pemberitahuan dan lihat lainnya pemberitahuan push patterns.
Perhatikan bahwa Chrome doesn't menghormati ikon pemberitahuan di Linux, karena bug.
Dukungan pemberitahuan telah terus-menerus fluks, dengan berbagai Api yang ditinggalkan selama beberapa tahun terakhir. Jika anda're penasaran, memeriksa suntingan sebelumnya dari jawaban ini untuk melihat apa yang digunakan untuk bekerja di Chrome, dan untuk mempelajari kisah kaya HTML pemberitahuan.
Sekarang standar terbaru di https://notifications.spec.whatwg.org/.
Mengapa ada dua panggilan yang berbeda untuk efek yang sama, tergantung pada apakah anda're dalam layanan pekerja atau tidak - lihat tiket ini saya mengajukan sementara saya bekerja di Google.
Lihat juga notify.js untuk pembantu perpustakaan.
Cek desain dan spesifikasi API (it's masih draft) atau memeriksa sumber dari (halaman tidak lagi tersedia) untuk contoh sederhana: It's terutama panggilan untuk jendela.webkitNotifications.createNotification
.
Jika anda ingin yang lebih kuat misalnya (anda're mencoba untuk membuat anda sendiri Google Chrome's ekstensi, dan ingin tahu bagaimana untuk berurusan dengan perizinan, penyimpanan lokal, dan semacamnya), check out Gmail Notifier Ekstensi: download crx file bukan menginstal itu, unzip dan membaca kode sumbernya.
Tampak bahwa jendela.webkitNotifications
telah usang dan dihapus. Namun, ada's API baru, dan tampaknya untuk bekerja pada versi terbaru dari Firefox juga.
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}`);
}
}
Aku seperti: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples tetapi menggunakan variabel tua, sehingga demo yang doesn't bekerja lagi. webkitNotifications
sekarang Pemberitahuan
.
Saya membuat ini sederhana Pemberitahuan wrapper. Ia bekerja pada Chrome, Safari dan Firefox.
Mungkin pada Opera, IE dan Edge juga tapi saya belum't diuji belum.
Hanya mendapatkan notify.js file dari sini https://github.com/gravmatt/js-notify dan memasukkannya ke halaman anda.
Di Pondok
$ bower install js-notify
Ini adalah cara kerjanya:
notify('title', {
body: 'Notification Text',
icon: 'path/to/image.png',
onclick: function(e) {}, // e -> Notification object
onclose: function(e) {},
ondenied: function(e) {}
});
Anda harus mengatur judul tapi objek json sebagai argumen kedua adalah opsional.
Berikut adalah dokumentasi yang bagus pada Api,
https://developer.chrome.com/apps/notifications
Dan, official video penjelasan oleh Google,
Notify.js adalah pembungkus di sekitar baru webkit pemberitahuan. Bekerja dengan cukup baik.
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>