Bagaimana cara menggunakan notifikasi desktop Chrome ? Saya ingin itu menggunakannya dalam kode saya sendiri.
Pembaruan : Berikut adalah posting blog yang menjelaskan pemberitahuan webkit dengan sebuah contoh.
javascript
desktop
google-chrome
notifications
Sridhar Ratnakumar
sumber
sumber
Jawaban:
Di browser modern, ada dua jenis pemberitahuan:
Panggilan API mengambil parameter yang sama (kecuali untuk tindakan - tidak tersedia pada pemberitahuan desktop), yang didokumentasikan dengan baik di MDN dan untuk pekerja layanan, di situs Fundamentals Web Google .
Di bawah ini adalah contoh notifikasi desktop untuk Chrome, Firefox, Opera dan Safari. Perhatikan bahwa karena alasan keamanan, dimulai dengan Chrome 62, izin untuk API Pemberitahuan mungkin tidak lagi diminta dari iframe asal-silang , jadi kami tidak dapat melakukan demo menggunakan potongan kode StackOverflow. Anda harus menyimpan contoh ini dalam file HTML di situs / aplikasi Anda, dan pastikan untuk menggunakan
localhost://
atau HTTPS.Kami menggunakan API Pemberitahuan W3C . Jangan bingung dengan API pemberitahuan ekstensi Chrome , yang berbeda. Pemberitahuan ekstensi Chrome jelas hanya berfungsi di ekstensi Chrome, dan tidak memerlukan izin khusus dari pengguna.
Pemberitahuan W3C berfungsi di banyak browser (lihat dukungan di caniuse ), dan memerlukan izin pengguna. Sebagai praktik terbaik, jangan langsung meminta izin ini. Jelaskan kepada pengguna terlebih dahulu mengapa mereka menginginkan notifikasi dan melihat pola notifikasi push lainnya .
Perhatikan bahwa Chrome tidak menghormati ikon pemberitahuan di Linux, karena bug ini .
Kata-kata terakhir
Dukungan notifikasi terus berubah, dengan berbagai API tidak digunakan lagi selama beberapa tahun terakhir. Jika Anda penasaran, periksa editan sebelumnya dari jawaban ini untuk melihat apa yang dulu berfungsi di Chrome, dan untuk mempelajari kisah pemberitahuan HTML yang kaya.
Sekarang standar terbaru ada di https://notifications.spec.whatwg.org/ .
Mengenai mengapa ada dua panggilan berbeda untuk efek yang sama, tergantung pada apakah Anda seorang pekerja layanan atau tidak - lihat tiket ini yang saya ajukan saat saya bekerja di Google .
Lihat juga notify.js untuk pustaka pembantu.
sumber
Periksa spesifikasi desain dan API (masih berupa konsep) atau periksa sumber dari (halaman tidak lagi tersedia) untuk contoh sederhana: Ini sebagian besar panggilan ke
window.webkitNotifications.createNotification
.Jika Anda ingin contoh yang lebih kuat (Anda mencoba membuat ekstensi Google Chrome Anda sendiri, dan ingin tahu cara berurusan dengan izin, penyimpanan lokal, dan semacamnya), lihat Gmail Notifier Extension : unduh ekstensi file crx daripada menginstal unzip, dan baca kode sumbernya.
sumber
Tampaknya
window.webkitNotifications
sudah usang dan dihapus. Namun, ada API baru , dan tampaknya berfungsi di Firefox versi terbaru juga.codepen
sumber
else
di akhir untuk memberi tahu Anda apa masalahnya. Anda mungkin menonaktifkan pemberitahuan secara global seperti saya: \Saya suka: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples tetapi menggunakan variabel lama, jadi demo tidak berfungsi lagi.
webkitNotifications
sekarangNotification
.sumber
Saya membuat bungkus Pemberitahuan sederhana ini. Ini bekerja di Chrome, Safari dan Firefox.
Mungkin di Opera, IE dan Edge juga, tetapi saya belum mengujinya.
Dapatkan saja file notify.js dari sini https://github.com/gravmatt/js-notify dan masukkan ke halaman Anda.
Dapatkan di Bower
Begini Cara kerjanya:
Anda harus mengatur judul tetapi objek json sebagai argumen kedua adalah opsional.
sumber
Ini dokumentasi bagus tentang API,
https://developer.chrome.com/apps/notifications
Dan, penjelasan video resmi oleh Google,
https://developers.google.com/live/shows/83992232-1001
sumber
Notify.js adalah pembungkus notifikasi webkit baru. Ini bekerja dengan cukup baik.
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
sumber
sumber
Notification.requestPermission();
, makavar notification = new Notification('hello', { body: "Hey there!", });
notifikasi muncul.