Contoh pemberitahuan desktop Chrome [ditutup]

409

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.

Sridhar Ratnakumar
sumber
2
Saya telah meninggalkan jawaban di bawah yang diperbarui pada Nov 2012, setelah pemberitahuan HTML tidak digunakan lagi. Ini memiliki contoh aktual seperti yang Anda cari.
Dan Dascalescu
1
Pembaruan : pada 2015 situs web juga dapat mengirim pemberitahuan push nyata, yang dikirimkan bahkan ketika pengguna tidak menjelajahi situs web. Lihatlah jawaban ini
collimarco
3
Semua pemilih untuk menandai ini sebagai tertutup haruslah pecinta IE / Safari. Ini khusus untuk notifikasi browser dan khususnya untuk chrome. jika begitu off topic lalu mengapa ada begitu banyak orang yang menyukainya dan menandainya sebagai yang pertama kali dibintangi?
prash
2
Kenapa di luar topik?
SmartManoj

Jawaban:

717

Di browser modern, ada dua jenis pemberitahuan:

  • Pemberitahuan desktop - mudah dipicu, berfungsi selama halaman terbuka, dan dapat menghilang secara otomatis setelah beberapa detik
  • Pemberitahuan Pekerja Layanan - sedikit lebih rumit, tetapi mereka dapat bekerja di latar belakang (bahkan setelah halaman ditutup), persisten, dan mendukung tombol aksi

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.

// 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 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.

Dan Dascalescu
sumber
4
@mghaoui - populer! = benar (tentu saja). saya telah menandai yang ini sebagai jawaban yang benar.
Sridhar Ratnakumar
2
window.webkitNotifications.checkPermission () akan melempar pengecualian di browser non-Chrome
JT Taylor
2
Tutup bukan metode. Saya pikir Anda ingin notification.cancel ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> Tampaknya juga menutup sendiri.
KingOfHypocrites
3
Terima kasih atas dukungannya, menggunakan ini dengan Pusher telah membantu saya membangun sistem pemberitahuan.
Awijeet
3
tidak bekerja di Chrome Versi 47.0.2526.80 dev-m saat bekerja di Mozilla Fire fox di Windows 8
Sarz
87

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.

GmonC
sumber
Apakah tidak ada yang berfungsi untuk semua browser?
Royi Namir
@Royi, Ada ekstensi Firefox , serta implementasi Firefox asli yang akan muncul cepat atau lambat . Dalam kasus Internet Explorer, solusi yang mungkin adalah meminta pengguna situs Anda untuk mengunduh Chrome Frame , karena ini akan menjadi solusi yang memungkinkan untuk membuat pemberitahuan berfungsi. Ada beberapa Solusi Microsoft lainnya .
Lapangan Bryan
7
Jawaban ini benar-benar usang sekarang, 4 tahun kemudian. @RoyiNamir: ada API Pemberitahuan. Periksa jawabanku .
Dan Dascalescu
1
Tautan contoh sudah mati.
Vinny
33

Tampaknya window.webkitNotificationssudah usang dan dihapus. Namun, ada API baru , dan tampaknya berfungsi di Firefox versi terbaru 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}`);
  }
}

codepen

Mpen
sumber
@ Miron Silakan lihat hyperlink di paragraf pertama. Saya menautkan sumber, dan kemudian menyalin kode ke jawaban saya sesuai etiket SO. Jika MDN bukan wiki saya mungkin lebih eksplisit tentang siapa penulisnya, tapi saya tidak berpura-pura.
mpen
Saya tidak melihat di mana dia mengatakan dia menulisnya?
Brandito
codepen tidak berfungsi
Stepan Yakovenko
1
@StepanYakovenko Coba tautan codepen lagi. Saya menambahkan ekstra elsedi akhir untuk memberi tahu Anda apa masalahnya. Anda mungkin menonaktifkan pemberitahuan secara global seperti saya: \
mpen
14

Saya suka: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples tetapi menggunakan variabel lama, jadi demo tidak berfungsi lagi. webkitNotificationssekarang Notification.

Rudie
sumber
Contoh Twitter di sana tidak lagi berfungsi.
Dan Dascalescu
Anda harus memberi tahu html5rocks.com/en/profiles Salah satu dari mereka harus bekerja untuk Twitter =)
Rudie
Heh. Hakim adalah orang terbaik untuk memberi tahu , karena kebetulan saya telah berkontribusi pada kerangka presentasinya.
Dan Dascalescu
4

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

$ bower install js-notify

Begini 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 tetapi objek json sebagai argumen kedua adalah opsional.

gravmatt
sumber
@ gravmatt pernahkah Anda mengalami masalah dengan Firefox di mana jika ada lebih dari satu jendela browser terbuka, notifikasi tidak muncul?
eran otzap
@eranotzap seharusnya berfungsi dengan banyak tab. Saya menjalankan proyek di mana ini tidak ada masalah. tapi saya tidak yakin dengan banyak jendela.
gravmatt
Saya memiliki masalah yang sama dengan banyak tab
eran otzap
Apakah itu berfungsi dari banyak tab di Firefox?
eran otzap
1
@eranotzap Saya mengujinya sekarang di windows dan mac. Saya tidak bisa melihat notifikasi di sudut layar mana pun, tetapi saya mendengar suara notifikasi dan pada mac saya mendapatkan notifikasi di sidebar (dengan beberapa tab terbuka). Firefox adalah penjelajah internet baru.
gravmatt
3
<!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>

Hina Halani
sumber
1
Harap jangan memposting jawaban khusus kode. Tambahkan sedikit komentar dan / atau penjelasan, sehingga ketika orang membaca posting ini di masa depan mereka akan memahaminya.
Adriaan
Untuk cuplikan kode khusus ini, sepertinya cukup mudah. Pengguna lain juga dapat memposting pertanyaan tindak lanjut pada komentar, kan?
frostshoxx
1
JSfiddle dengan kode di atas tidak berfungsi, "Izin untuk API Pemberitahuan mungkin tidak lagi diminta dari iframe lintas-asal.". Namun, ketika Anda membuka konsol Pengembang, dan masuk Notification.requestPermission();, maka var notification = new Notification('hello', { body: "Hey there!", });notifikasi muncul.
Kai Noack
Maaf, tapi apa sebenarnya jawaban ini ditambahkan ke saya?
Dan Dascalescu