Bildirimler API'sini kullanmaya başlama

Bu codelab'de, Bildirimler API'sini kullanarak:

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

Örnek uygulamayı remiksleyip yeni bir sekmede görüntüleyin

Bildirimler, yerleşik Glitch uygulamasından otomatik olarak engellendiği için bu sayfada uygulamayı önizleyemezsiniz. Bunun yerine aşağıdakileri yapmanız gerekir:

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
2. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .

Glitch yeni bir Chrome sekmesinde açılır:

Bu codelab'de çalışırken bu sayfadaki yerleştirilmiş Glitch'te yer alan kodda değişiklik yapın. Değişiklikleri görmek için yeni sekmeyi yayındaki uygulamanızla yenileyin.

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

Yeni Chrome sekmesinde yayındaki uygulamaya göz atarak başlayın:

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

   Console'da aşağıdaki mesajı görürsünüz:

   Notification permission is default
   

   Bunun ne anlama geldiğini bilmiyorsanız endişelenmeyin. yakında açıklanacak!

2. Canlı uygulamadaki şu düğmeleri tıklayın: Bildirim gönderme izni isteyin ve Bildirim gönder.

   Konsolda "TODO" yazdırılıyor birkaç işlev saplamasından gelen iletiler: requestPermission ve sendNotification. Bunlar, bu codelab'de uygulayacağınız işlevlerdir.

Şimdi bu sayfadaki yerleşik Glitch'te bulunan ö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, aşağıdaki işlemler için Notifications API'yi kullanır: sitenin mevcut izin durumunu kontrol edip konsola kaydedin:

  // 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 olarak ayarlanır. default izin durumunda, bildirim gönderebilmesi için önce istekte bulunmalı ve siteye izin verilmesi gerekir.

• requestPermission işlevi köktü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 köktür:

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

  requestPermission uygulandıktan sonra bu işlevi uygularsınız.

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

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

Bildirim gönderme izni isteme

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

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

1. public/index.js içindeki requestPermission işlev sapı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. Yayındaki 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 verilen üç yanıttan birini yapabilir.

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

• Notification.permission, granted olarak ayarlandı.

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

• Notification.requestPermission numaralı telefona yapılan sonraki aramalar, pop-up olmadan granted numarasına çözümlenecek.

Kullanıcı Engelle'yi tıklarsa:

• Notification.permission, denied olarak ayarlandı.

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

• Notification.requestPermission numaralı telefona yapılan sonraki aramalar, pop-up olmadan denied numarasına çözümlenecek.

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

• Notification.permission, default olarak kaldı.

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

• Notification.requestPermission numaralı telefona yapılan sonraki çağrılar daha fazla pop-up oluşturur.

  Ancak kullanıcı pop-up'ları kapatmaya devam ederse tarayıcı siteyi engelleyebilir. Bu durumda Notification.permission, denied olarak ayarlanır. Bu şekilde ne izin isteği pop-up'ları ne de bildirimleri kullanıcıya gösterilemez.

  Bu yazının yazıldığı sırada, kapatılan bildirimler izin pop-up'larına karşı tarayıcı davranışı değişebilir. Bunu yapmanı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ı bunu bekler ve neler olduğunu öğrenir.

Bildirim gönderme

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

Yeni bir bildirim oluşturmak ve bunu görüntülemeyi denemek için Notification oluşturucusunu 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şturucusu iki parametre alır: title ve options. options, bildirime ekleyebileceğiniz görsel ayarları ve 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 yenileme ve Bildirim gönder düğmesini tıklayın. Test body metnini içeren bir bildirim gösterilir.

İzniniz olmadan bildirim gönderdiğinizde ne olur?

Bu adımda, birkaç satırlık bir kod ekleyerek ne olduğunu görebilirsiniz. kullanıcının izni olmadan bir bildirim görüntülemeye çalıştığınızda.

• 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. Bu kez, pop-up'tan Engelle'yi seçin.

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

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

Bildirim seçenekleriyle denemeler yapma

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

Artık bildirim oluştururken mevcut olan birçok görsel ve veri seçeneğini kullanarak denemeler yapabilirsiniz. Mevcut seçeneklerin tamamını aşağıda bulabilirsiniz. (Bu seçenekler hakkında daha fazla bilgi edinmek için MDN'deki Bildirim dokümanlarına göz atın.)

Tarayıcıların ve cihazların bu seçenekleri farklı şekilde uyguladığını unutmayın. Bu nedenle, nasıl göründüklerini anlamak için bildirimlerinizi farklı platformlarda test etmeniz önerilir.

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'
    },],
  */
}

Diğer fikirler için Peter Beverloo'nun Bildirim Oluşturucu sayfasına göz atın.

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

Daha ayrıntılı bilgi edinmek için bu serinin bir sonraki codelab'ine göz atın: Hizmet çalışanı ile bildirimleri yönetme.