Bildirimler API'sini kullanmaya başlama

Bu codelab'de, Notifications API'nin temel özelliklerini kullanarak şunları yapacaksınız:

• Bildirim gönderme izni isteme
• Bildirim gönderme
• Bildirim seçenekleriyle denemeler yapma

Başlangıç uygulaması ve kodu hakkında bilgi edinme

Yeni Chrome sekmesinde canlı uygulamayı inceleyerek başlayın:

1. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın. Konsol sekmesini tıklayın.

   Konsolda aşağıdaki mesajı görmeniz gerekir:

   Notification permission is default
   

   Bu ne anlama geliyor bilmiyorsanız endişelenmeyin. Yakında her şey açıklanacak.

2. Yayınlanan uygulamadaki Bildirim gönderme izni iste ve Bildirim gönder düğmelerini tıklayın.

   Konsol, birkaç işlev saplamasından "TODO" mesajları yazdırır: requestPermission ve sendNotification. Bu codelab'de uygulayacağınız işlevler şunlardır:

Şimdi örnek uygulamanın koduna bakalım. public/index.js bağlantısını açın ve mevcut kodun bazı önemli bölümlerine göz atın:

• showPermission işlevi, sitenin mevcut izin durumunu almak ve konsola kaydetmek için Notifications API'yi kullanır:

  // Print current permission state to console;
  // update onscreen message.
  function showPermission() {
    let permission = Notification.permission;
    console.log('Notification permission is ' + permission);
    let p = document.getElementById('permission');
    p.textContent = 'Notification permission is ' + permission;
  }
  

  İzin istenmeden önce izin durumu default olur. default izin durumunda, bir site bildirim gönderebilmek için izin istemeli ve izin verilmelidir.

• requestPermission işlevi bir saplamadır:

  // Use the Notification API to request permission to send notifications.
  function requestPermission() {
    console.log('TODO: Implement requestPermission()');
  }
  

  Bu işlevi bir sonraki adımda uygulayacaksınız.

• sendNotification işlevi bir saplamadır:

  // Use the Notification constructor to create and send a new Notification.
  function sendNotification() {
    console.log('TODO: Implement sendNotification()');
  }
  

  Bu işlevi, requestPermission işlevini uyguladıktan sonra kullanırsınız.

• window.onload etkinlik işleyicisi, sayfa yüklendiğinde showPermission işlevini çağırarak mevcut izin durumunu konsolda ve sayfada gösterir:

  window.onload = () => { showPermission(); };
  

Bildirim gönderme izni isteme

Bu adımda, kullanıcının bildirim gönderme iznini isteme işlevini ekleyeceksiniz.

Kullanıcıdan sitenizden gelen bildirimlere izin vermesini veya bunları engellemesini isteyen bir pop-up'ı tetiklemek için Notification.requestPermission() yöntemini kullanacaksınız.

1. public/index.js dosyasındaki requestPermission işlev saplamasını aşağıdaki kodla değiştirin:

   // Use the Notification API to request permission to send notifications.
   function requestPermission() {
     Notification.requestPermission()
       .then((permission) => {
         console.log('Promise resolved: ' + permission);
         showPermission();
       })
       .catch((error) => {
         console.log('Promise was rejected');
         console.log(error);
       });
   }
   

2. Canlı uygulamanızı görüntülediğiniz Chrome sekmesini yeniden yükleyin.

3. Canlı uygulama arayüzünde Bildirim gönderme izni iste'yi tıklayın. Bir pop-up gösterilir.

Kullanıcı, izin pop-up'ına üç farklı yanıt verebilir.

Kullanıcı İzin ver'i tıklarsa:

• Notification.permission, granted olarak ayarlandı.

• Site bildirim gösterebilir.

• Notification.requestPermission'ya yapılan sonraki çağrılar, pop-up olmadan granted olarak çözümlenir.

Kullanıcı Engelle'yi tıklarsa:

• Notification.permission, denied olarak ayarlandı.

• Site, kullanıcıya bildirim gösteremez.

• Notification.requestPermission'ya yapılan sonraki çağrılar, pop-up olmadan denied olarak çözümlenir.

Kullanıcı pop-up'ı kapatırsa:

• Notification.permission kaldıdefault.

• Site, kullanıcıya bildirim gösteremez.

• Notification.requestPermission için sonraki aramalar daha fazla pop-up oluşturur.

  Ancak kullanıcı pop-up'ları kapatmaya devam ederse tarayıcı siteyi engelleyebilir ve Notification.permission ayarını denied olarak belirleyebilir. Bu durumda, kullanıcıya ne izin isteği pop-up'ları ne de bildirimler gösterilebilir.

  Bu makalenin yazıldığı sırada, kapatılan bildirim izni pop-up'larına yönelik tarayıcı davranışları hâlâ değişebilir. Bu durumu ele almanın en iyi yolu, kullanıcının başlattığı bir etkileşime yanıt olarak her zaman bildirim izni istemektir. Böylece kullanıcılar bildirim izni isteğini bekler ve ne olduğunu bilir.

Bildirim gönderme

Bu adımda kullanıcıya bir bildirim gönderirsiniz.

Yeni bir bildirim oluşturmak ve bunu görüntülemeye çalışmak için Notification oluşturucusunu kullanacaksınız. İzin durumu granted ise bildiriminiz gösterilir.

1. index.js dosyasındaki sendNotification işlev saplamasını aşağıdaki kodla değiştirin:

   // Use the Notification constructor to create and send a new Notification.
   function sendNotification() {
     let title = 'Test';
     let options = {
       body: 'Test body',
       // Other options can go here
     };
     console.log('Creating new notification');
     let notification = new Notification(title, options);
   }
   

   Notification oluşturucusu iki parametre alır: title ve options. options, bildirimlere ekleyebileceğiniz görsel ayarları ve verileri temsil eden özelliklere sahip bir nesnedir. Daha fazla bilgi için bildirim parametreleriyle ilgili MDN belgelerine bakın.

2. Canlı uygulamanızı görüntülediğiniz Chrome sekmesini yenileyin ve Bildirim gönder düğmesini tıklayın. Test body metnini içeren bir bildirim gösterilir.

İzin almadan bildirim gönderdiğinizde ne olur?

Bu adımda, kullanıcının izni olmadan bildirim göstermeye çalıştığınızda ne olduğunu görmenizi sağlayacak birkaç satırlık kod ekleyeceksiniz.

• public/index.js içinde, sendNotification işlevinin sonunda yeni bildirimin onerror etkinlik işleyicisini tanımlayın:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

Bildirim izni hatasını gözlemlemek için:

1. Chrome URL çubuğunun yanındaki kilit simgesini tıklayın ve sitenin bildirim izni ayarını varsayılan değerine sıfırlayın.

2. Bildirim gönderme izni iste'yi tıklayın ve bu kez pop-up'tan Engelle'yi seçin.

3. Bildirim gönder'i tıklayın ve sonucu görün. Hata metni (Could not send notification) ve etkinlik nesnesi konsola kaydedilir.

İsteğe bağlı olarak, sitenin bildirim izinlerini tekrar sıfırlayın. Ne olacağını görmek için izni birden çok kez isteyebilir ve pop-up'ı kapatabilirsiniz.

Bildirim seçenekleriyle denemeler yapma

Artık izin isteme ve bildirim göndermeyle ilgili temel bilgileri öğrendiniz. Ayrıca, kullanıcı yanıtlarının uygulamanızın bildirim gösterme özelliği üzerindeki etkisini de gördünüz.

Artık bildirim oluştururken kullanabileceğiniz birçok görsel ve veri seçeneğiyle denemeler yapabilirsiniz. Kullanabileceğiniz seçeneklerin tam listesini aşağıda bulabilirsiniz. (Bu seçenekler hakkında daha fazla bilgi için MDN'deki bildirim dokümanlarına bakın.)

Tarayıcılar ve cihazlar bu seçenekleri farklı şekilde uyguladığından bildirimlerinizin nasıl göründüğünü görmek için farklı platformlarda test etmenizi öneririz.

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

Daha fazla fikir için Peter Beverloo'nun Bildirim Oluşturucu aracına göz atın.

Daha fazla bilgi edinmek için bu serideki bir sonraki codelab olan Handle notifications with a service worker'a (Servis çalışanıyla bildirimleri işleme) göz atın.