Chrome masaüstü bildirim örneği [kapalı]

Chrome masaüstü bildirimleri nasıl kullanılır ? Bunu kendi kodumda kullanmak istiyorum.

Güncelleme : İşte webkit bildirimlerini bir örnekle açıklayan bir blog yazısı .

Modern tarayıcılarda iki tür bildirim vardır:

• Masaüstü bildirimleri - tetiklemesi kolaydır, sayfa açık olduğu sürece çalışır ve birkaç saniye sonra otomatik olarak kaybolabilir
• Servis Çalışanı bildirimleri - biraz daha karmaşık, ancak arka planda çalışabilirler (sayfa kapatıldıktan sonra bile), kalıcıdır ve eylem düğmelerini destekler

API çağrısı, MDN'de ve hizmet çalışanları için Google'ın Web Fundamentals sitesinde iyi belgelenmiş eylemleri (masaüstü bildirimlerinde bulunmayan işlemler hariç) alır .

Aşağıda Chrome, Firefox, Opera ve Safari için masaüstü bildirimlerinin çalışan bir örneği bulunmaktadır . Güvenlik nedeniyle, Chrome 62'den başlayarak Bildirim API'sı için izin artık bir çapraz kökenli iframe'den istenmeyebileceğinden , StackOverflow'un kod snippet'lerini kullanarak bunu demo yapamayız. Bu örneği sitenizdeki / uygulamanızdaki bir HTML dosyasına kaydetmeniz ve localhost://HTTPS kullandığınızdan emin olmanız gerekir .

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

Biz kullanıyoruz W3C Bildirimler API. Bunu Chrome uzantıları bildirim API'sı ile karıştırmayın , farklı olan . Chrome uzantı bildirimleri yalnızca Chrome uzantılarında çalışır ve kullanıcıdan herhangi bir özel izin gerektirmez.

W3C bildirimleri birçok tarayıcıda çalışır ( caniuse desteğine bakın ) ve kullanıcı izni gerektirir. En iyi uygulama olarak, bu izni hemen yarasadan istemeyin. Öncelikle kullanıcıya neden bildirim isteyeceklerini açıklayın ve diğer anlık bildirim kalıplarını görün .

Bu hata nedeniyle Chrome'un Linux'ta bildirim simgesini onurlandırmadığını unutmayın .

Son sözler

Bildirim desteği sürekli değişmektedir ve son yıllarda çeşitli API'ler kullanımdan kaldırılmıştır. Merak ediyorsanız, Chrome'da neyin işe yaradığını görmek ve zengin HTML bildirimlerinin hikayesini öğrenmek için bu cevabın önceki düzenlemelerini kontrol edin.

Şimdi en son standart https://notifications.spec.whatwg.org/ adresinde .

Bir hizmet çalışanında bulunup bulunmamanıza bağlı olarak, aynı etkiyi neden iki farklı aramayla ilgili olarak, Google'da çalışırken yaptığım bu bileti görün .

Yardımcı kütüphane için notify.js'ye de bakınız .

Basit bir örnek için tasarım ve API spesifikasyonunu (hala taslak) kontrol edin veya kaynağından (sayfa artık mevcut değil) bakın:window.webkitNotifications.createNotification .

Daha sağlam bir örnek istiyorsanız (kendi Google Chrome uzantınızı oluşturmaya çalışıyorsunuz ve izinler, yerel depolama alanı vb . İle nasıl başa çıkacağınızı bilmek istiyorsanız), Gmail Notifier Uzantısına bakın : yüklemek yerine crx dosyasını indirin açın, kaynak kodunu okuyun.

Anlaşılmaktadır window.webkitNotificationszaten kaldırılmış ve kaldırıldı. Ancak, yeni bir API var ve Firefox'un en son sürümünde de çalışıyor gibi görünüyor.

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

Seviyorum: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples ancak eski değişkenleri kullanıyor, bu yüzden demo artık çalışmıyor. webkitNotificationsşimdi Notification.

Bu basit Bildirim sarmalayıcısını yaptım. Chrome, Safari ve Firefox üzerinde çalışır.

Muhtemelen Opera, IE ve Edge'de de ama henüz test etmedim.

Notify.js dosyasını buradan alın https://github.com/gravmatt/js-notify ve sayfanıza koyun.

Bower'dan edinin

$ bower install js-notify

Bu nasıl çalışır:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Başlığı ayarlamanız gerekir, ancak ikinci bağımsız değişken olarak json nesnesi isteğe bağlıdır.

İşte API'larla ilgili güzel belgeler,

https://developer.chrome.com/apps/notifications

Google'ın resmi video açıklaması,

https://developers.google.com/live/shows/83992232-1001

Notify.js, yeni webkit bildirimlerinin etrafını saran bir pakettir. Oldukça iyi çalışıyor.

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>