javascript - contoh notifikasi desktop Chrome

Bagaimana cara menggunakan notifikasi desktop Chrome? Saya ingin menggunakan itu dalam kode saya sendiri.

Pembaruan: Berikut adalah posting blog yang menjelaskan notifikasi webkit dengan sebuah contoh.

Jawaban #1

Di browser modern, ada dua jenis notifikasi:

Notifikasi desktop - mudah dipicu, bekerja selama halaman terbuka, dan dapat hilang secara otomatis setelah beberapa detik
Notifikasi Service Worker - sedikit lebih rumit, tetapi mereka dapat bekerja di latar belakang (bahkan setelah halaman ditutup), bersifat persisten, dan mendukung tombol aksi

Panggilan API mengambil parameter yang sama (kecuali untuk actions - tidak tersedia pada notifikasi desktop), yang terdokumentasi dengan baik di MDN dan untuk service worker, di situs Web Fundamentals Google.

Berikut adalah contoh yang berfungsi dari notifikasi desktop untuk Chrome, Firefox, Opera, dan Safari. Perlu dicatat bahwa untuk alasan keamanan, mulai dari Chrome 62, izin untuk Notification API mungkin tidak lagi dapat diminta dari iframe lintas-origin, sehingga kita tidak dapat mendemonstrasikannya menggunakan potongan kode StackOverflow. Anda perlu menyimpan contoh ini di file HTML pada situs/aplikasi Anda, dan pastikan 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 Notifikasi W3C. Jangan bingung ini dengan API notifikasi ekstensi Chrome, yang berbeda. Notifikasi ekstensi Chrome jelas hanya bekerja di ekstensi Chrome, dan tidak memerlukan izin khusus dari pengguna.

Notifikasi W3C bekerja di banyak browser (lihat dukungan di caniuse), dan memerlukan izin pengguna. Sebagai praktik terbaik, jangan langsung meminta izin ini. Jelaskan terlebih dahulu kepada pengguna mengapa mereka ingin menerima notifikasi dan lihat pola notifikasi push lainnya.

Perlu dicatat bahwa Chrome tidak menghormati ikon notifikasi di Linux, karena bug ini.

Kata-kata terakhir

Dukungan notifikasi telah mengalami perubahan terus-menerus, dengan berbagai API yang dihentikan dalam beberapa tahun terakhir. Jika Anda penasaran, periksa suntingan sebelumnya dari jawaban ini untuk melihat apa yang dulu bekerja di Chrome, dan untuk mempelajari sejarah notifikasi HTML yang kaya.

Sekarang standar terbaru ada di https://notifications.spec.whatwg.org/.

Mengenai mengapa ada dua panggilan berbeda untuk efek yang sama, tergantung apakah Anda berada di service worker atau tidak - lihat tiket ini yang saya buat saat saya bekerja di Google.

Lihat juga notify.js untuk pustaka penolong.

Jawaban #2

Periksa desain dan spesifikasi API (ini masih draft) atau periksa sumber dari (halaman tidak lagi tersedia) untuk contoh sederhana: Ini terutama merupakan panggilan ke window.webkitNotifications.createNotification.

Jika Anda menginginkan contoh yang lebih kuat (Anda sedang mencoba membuat ekstensi Google Chrome sendiri, dan ingin tahu bagaimana menangani izin, penyimpanan lokal, dan sejenisnya), lihat Ekstensi Gmail Notifier: unduh file crx alih-alih menginstalnya, unzip file tersebut dan baca kode sumbernya.

Jawaban #3

Lihat juga ServiceWorkerRegistration.showNotification

Tampaknya window.webkitNotifications sudah tidak digunakan lagi dan telah dihapus. Namun, ada API baru, dan tampaknya bekerja di versi terbaru 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}`);
  }
}

codepen

Jawaban #4