Bildirimler API'sini kullanma

Ernest Delgado

Giriş

Notifications API, belirli etkinliklerle ilgili bildirimleri kullanıcıya hem pasif olarak (yeni e-postalar, tweet'ler veya takvim etkinlikleri) hem de hangi sekmenin odakta olduğundan bağımsız olarak kullanıcı etkileşimlerinde göstermenize olanak tanır. Taslak spesifikasyon mevcuttur ancak şu anda herhangi bir standartta değildir.

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'ün 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 bulunur.

// 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 bildirim göstermek için bir web sitesine izin vermesine izin verin

Kullanıcı, web sitesine bildirim gösterme iznini manuel olarak vermemişse bahsettiğimiz kuruculardan herhangi biri güvenlik hatası verir. İstisnayı işlemek için bir try-catch ifadesi kullanabilirsiniz ancak aynı amaç için 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 bildirimleri gösterme izni yoksa requestPermission yöntemi bir bilgi çubuğu gösterir:

Ancak istenmeyen bilgi çubuğu gösterilmesini önlemek için requestPermission yönteminin yalnızca kullanıcı işlemi (ör. fare veya klavye etkinlikleri) tarafından tetiklenen etkinlik işleyicilerde çalıştığını hatırlamak çok önemlidir. Bu durumda kullanıcı işlemi, "show_button" kimlikli düğmenin tıklanmasıdır. Kullanıcı bir noktada requestPermission öğesini 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: Dinleyiciler 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, kodu daha temiz tutmak için kendi bildirim sınıfınızı oluşturarak tüm bu etkinlikleri ve işlemleri kapsayabilirsiniz. Ancak bu, bu eğitim kapsamında değildir.