Bildirimler API'sini kullanmaya başlama

Bu codelab'de Bildirimler API'sinin temel özelliklerini kullanarak şunları gerçekleştireceksiniz:

• Bildirim göndermek için izin isteyin
• Bildirim gönder
• Bildirim seçenekleriyle deneme yapma

Tarayıcı Desteği

• 20
• 14
• 22
• 7

Kaynak

Örnek uygulamayı remiks olarak derleme ve yeni sekmede görüntüleme

Yerleşik Glitch uygulamasından gelen bildirimler otomatik olarak engellendiğinden uygulamayı bu sayfada önizleyemezsiniz. Bunun yerine yapmanız gerekenler aşağıda açıklanmıştır:

1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
2. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.

Arıza yeni bir Chrome sekmesinde açılır:

Bu codelab'i incelerken bu sayfadaki yerleşik arızada yer alan kodda değişiklikler yapın. Değişiklikleri görmek için yeni sekmeyi yayındaki uygulamanızla yenileyin.

Başlangıç uygulamasını ve kodunu öğrenin

İlk olarak yeni Chrome sekmesinde yayındaki uygulamaya göz atı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örürsünüz:

   Notification permission is default
   

   Bunların ne anlama geldiğini bilmiyorsanız üzülmeyin. Kısa süre içinde her şey açıklanacaktır!

2. Canlı uygulamadaki şu düğmeleri tıklayın: Bildirim göndermek için izin iste ve Bildirim gönder.

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

Şimdi, bu sayfadaki yerleşik arızada yer alan örnek uygulamanın koduna bakalım. public/index.js uygulamasını açın ve mevcut kodun bazı önemli bölümlerine göz atın:

• showPermission işlevi, sitenin geçerli 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 istemeden önceki izin durumu default şeklindedir. default izin durumunda, bir sitenin bildirim gönderebilmesi için önce izin istemesi ve izin vermesi gerekir.

• 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 uygulandıktan sonra uygulayacaksınız.

• window.onload etkinlik işleyici sayfa yüklenirken showPermission işlevini çağırarak konsolda ve sayfada geçerli izin durumunu gösterir:

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

Bildirim göndermek için izin isteyin

Bu adımda, bildirim göndermek için kullanıcıdan izin isteme işlevi ekleyeceksiniz.

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

Not: Notification.requestPermission(), Promise döndürür. Bu taahhüt sonlandırıldıktan sonra işlem gerçekleştirmek için bunları bir işlevin içine yerleştirmeniz ve söz konusu işlevi söz konusu mesajın then() yöntemine parametre olarak iletmeniz gerekir: js Notification.requestPermission().then((result) => { /* do stuff */ }); Vaatlerin işleyiş şekli hakkında daha fazla bilgi için MDN ile ilgili Promise dokümanlarına bakın.

1. Public/index.js içindeki requestPermission işlev saplanması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öndermek için izin iste'yi tıklayın. Bir pop-up görüntülenir.

Kullanıcı, izin pop-up'ına üç yanıttan birini gönderebilir.

Kullanıcı yanıtı	Bildirim izni durumu
Kullanıcı İzin ver'i seçer	granted
Kullanıcı Engelle'yi seçer	denied
Kullanıcı, bir seçim yapmadan pop-up'ı kapatıyor	default

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

• Notification.permission, granted olarak ayarlandı.

• Site, bildirimleri görüntüleyebilecektir.

• Sonraki Notification.requestPermission aramaları 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.

• Sonraki Notification.requestPermission aramaları pop-up olmadan denied olarak çözümlenir.

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

• Notification.permission, default olarak kalır.

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

• Notification.requestPermission numaralı telefona bundan sonra yapılacak aramalar daha fazla pop-up oluşturur.

  Ancak kullanıcı pop-up'ları kapatmaya devam ederse tarayıcı, Notification.permission sitesini denied olarak ayarlayarak siteyi engelleyebilir. Sonrasında kullanıcıya izin isteği pop-up'ları veya bildirimleri gösterilemez.

  Bu yazının yazıldığı sırada, kapatılan bildirim izni pop-up'larına yanıt veren tarayıcı davranışı hâlâ değişebilir. Bunu sağlamanın en iyi yolu, kullanıcının başlattığı bazı etkileşimlere yanıt olarak her zaman bildirim izni istemektir. Böylece, kullanıcının beklentisi ve ne olup bittiğini öğrenir.

Not: Geliştirme sırasında bildirim pop-up'ının tekrar görünmesi için Chrome URL çubuğunun yanındaki kilit simgesini tıklayın. Chrome, sitenin bildirim izni ayarını varsayılan değerine sıfırlamanıza olanak tanıyan seçenekler gösterir.

Bildirim gönderme

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

Yeni bir bildirim oluşturmak ve bu bildirimi görüntülemeyi denemek için Notification oluşturucuyu kullanacaksınız. İzin durumu granted ise bildiriminiz gösterilir.

1. index.js'deki sendNotification işlev sapı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şturucu iki parametre alır: title ve options. options, görsel ayarları ve bildirime ekleyebileceğiniz verileri temsil eden özelliklere sahip bir nesnedir. Daha fazla bilgi için Bildirim parametreleriyle ilgili MDN dokümanlarına 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örünecektir.

İzinsiz bildirim gönderdiğinizde ne olur?

Bu adımda, kullanıcının izni olmadan bir bildirim görüntülemeyi denediğinizde ne olduğunu görmenizi sağlayacak birkaç satır 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öndermek için izin iste'yi tıklayın ve bu kez pop-up menüden Engelle'yi seçin.

3. Bildirim gönder'i tıklayın ve ne olduğuna bakın. Hata metni (Could not send notification) ve etkinlik nesnesi konsolda günlüğe kaydedilir.

İsteğe bağlı olarak, sitenin bildirim izinlerini yeniden sıfırlayın. Ne olduğunu görmek için izin istemeyi ve pop-up'ı kapatmayı birkaç kez deneyebilirsiniz.

Bildirim seçenekleriyle deneme yapma

İzin isteme ve bildirim göndermeyle ilgili temel bilgileri öğrendiniz. Ayrıca kullanıcı yanıtlarının, uygulamanızın bildirim görüntüleme özelliği üzerindeki etkisini de gördünüz.

Artık bildirim oluştururken kullanılabilen birçok görsel ve veri seçeneğini deneyebilirsiniz. Kullanılabilir seçeneklerin tamamını 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ın ve cihazların bu seçenekleri farklı şekillerde uyguladığını unutmayın. Bu nedenle, nasıl göründüklerini görmek için bildirimlerinizi farklı platformlarda test etmek faydalı olacaktır.

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şturma Aracı'na göz atın.

Takılırsanız bu codelab için tamamlanmış kodu burada bulabilirsiniz: glitch.com/edit/#!/codelab-notifications-get-started-completed

Daha ayrıntılı bilgi edinmek için bu serideki Bildirimleri bir hizmet çalışanıyla işleme başlıklı codelab'e göz atın.