Bildirimler API'sini kullanma

Ernest Delgado

Giriş

Notifications API, belirli etkinlikler için kullanıcıya hem pasif olarak (yeni e-postalar, tweet'ler veya takvim etkinlikleri) hem de hangi sekmenin odaklandığından bağımsız olarak kullanıcı etkileşimleri sırasında bildirimler göstermenize olanak tanır. Taslak spesifikasyon vardır ancak şu anda herhangi bir standartta yer almamaktadır.

Bildirimleri birkaç dakika içinde uygulamak için aşağıdaki basit adımları uygulayabilirsiniz:

1. adım: Notifications API desteğini kontrol edin

webkitNotifications desteklenip desteklenmediğini kontrol ederiz. webkitNotifications adının, taslak spesifikasyonun bir parçası olmasından kaynaklandığını unutmayın. Nihai spesifikasyonda bunun yerine notifications() işlevi yer alacaktır.

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

2. adım: Kullanıcının, bir web sitesine bildirim gösterme izni vermesine izin verin

Bahsettiğimiz oluşturuculardan herhangi biri, kullanıcı web sitesine bildirim gösterme izni vermediyse güvenlik hatası verir. İstisnayı işlemek için try-catch ifadesini kullanabilirsiniz ancak aynı amaçla checkPermission yöntemini de kullanabilirsiniz.

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

Web uygulamasının bildirim gösterme izni yoksa requestPermission yöntemi bir bilgi çubuğu gösterir:

Ancak, istenmeyen bilgi çubuklarını önlemek için requestPermission yönteminin yalnızca fare veya klavye etkinlikleri gibi kullanıcı işlemiyle tetiklenen etkinlik işleyicilerinde çalıştığını hatırlamak çok önemlidir. Bu durumda kullanıcı işlemi, kimliği "show_button" olan düğmeyi tıklamaktır. Kullanıcı bir noktada requestPermission tetikleyen bir düğmeyi veya bağlantıyı açıkça tıklamadıysa yukarıdaki snippet hiçbir zaman çalışmaz.

3. adım: Dinleyicileri ve diğer işlemleri ekleyin

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

Bu noktada, bu eğitimde ele alınmamış olsa da kodu daha temiz tutmak için kendi bildirim sınıfınızı oluşturarak tüm bu etkinlikleri ve işlemleri kapsamak isteyebilirsiniz.