Contoh pemberitahuan desktop Chrome [ditutup]

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.

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.

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.

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

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

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.

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

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/

<!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>