Bildirim davranışı

Şimdiye kadar bildirimlerin görünümünü değiştiren seçenekleri inceledik. Bildirimlerin davranışını değiştiren seçenekler de vardır.

Varsayılan olarak, yalnızca görsel seçeneklerle showNotification() çağrıldığında aşağıdaki davranışlar olur:

  • Bildirim tıklandığında hiçbir işlem yapılmaz.
  • Her yeni bildirim birbiri ardına gösterilir. Tarayıcı bildirimleri hiçbir şekilde daraltmaz.
  • Platform, kullanıcının cihazını titreştirebilir veya ses çalabilir (platforma bağlı olarak).
  • Bazı platformlarda kısa bir süre sonra bildirim kaybolur. Bazı platformlarda ise kullanıcı etkileşimde bulunmadığı sürece bildirim gösterilir. (Örneğin, Android ve Masaüstündeki bildirimlerinizi karşılaştırın.)

Bu bölümde, seçenekleri tek başına kullanarak bu varsayılan davranışları nasıl değiştirebileceğimizi ele alacağız. Bunların uygulanması ve kullanılması nispeten daha kolaydır.

Bildirim Tıklama Etkinliği

Kullanıcı bir bildirimi tıkladığında varsayılan davranış olarak hiçbir şey olmaz. Bildirim kapatılmaz veya kaldırılmaz.

Bir bildirim tıklamasının genel uygulaması, kapatılıp başka bir mantık uygulamaktır (ör. bir pencere açma veya uygulamaya bir API çağrısı yapma).

Bunu sağlamak için hizmet çalışanımıza bir 'notificationclick' etkinlik işleyici eklemeniz gerekir. Bu işlev, bir bildirim tıklandığında çağrılır.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

Bu örnekte görebileceğiniz gibi, tıklanan bildirime event.notification olarak erişilebilir. Buradan, bildirimin özelliklerine ve yöntemlerine erişebilirsiniz. Bu durumda, close() yöntemini çağırır ve ek işler gerçekleştirirsiniz.

İşlemler

İşlemler, yalnızca bildirimi tıklayarak kullanıcılarınızla başka bir etkileşim düzeyi oluşturmanıza olanak tanır.

Düğmeler

Önceki bölümde, showNotification() çağrısı yapılırken işlem düğmelerinin nasıl tanımlanacağını gördünüz:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Kullanıcı bir işlem düğmesini tıklarsa hangi işlem düğmesinin tıklandığını anlamak için noticationclick etkinliğindeki event.action değerini kontrol edin.

event.action, seçeneklerde ayarlanan action değerini içerir. Yukarıdaki örnekte event.action değerleri şunlardan biri olur: 'coffee-action', 'doughnut-action', 'gramophone-action' veya 'atom-action'.

Bu sayede, aşağıdakiler gibi bildirim tıklamalarını veya işlem tıklamalarını tespit ederiz:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

Satır İçi Yanıtlar

Ayrıca önceki bölümde bildirime satır içi yanıtın nasıl ekleneceğini de görmüştünüz:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply, giriş alanına kullanıcı tarafından yazılan değeri içerir:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

Etiket

tag seçeneği temelde bildirimleri "gruplandıran" ve birden fazla bildirimin kullanıcıya nasıl gösterileceğini belirlemenin kolay bir yolunu sağlayan bir dize kimliğidir. Bunu bir örnekle açıklamanın en kolay yolu.

Bir bildirim gösterelim ve buna 'message-group-1' etiketini ekleyelim. Bildirimi, şu kodla görüntüleriz:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Burada ilk bildirimimiz gösterilir.

1. mesaj grubunun etiketini içeren ilk bildirim.

Yeni 'message-group-2' etiketini içeren ikinci bir bildirim gösterelim. Örneğin:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Bu işlem, kullanıcıya ikinci bir bildirim gösterir.

2. mesaj grubunun ikinci etiketinin olduğu iki bildirim.

Şimdi üçüncü bir bildirimi gösterelim, ancak ilk 'message-group-1' etiketini tekrar kullanalım. Bu işlem yapıldığında ilk bildirim kapatılır ve yeni bildirimimizle değiştirilir.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

showNotification() üç kez aranmış olmasına rağmen şu anda iki bildirimimiz var.

İlk bildirimin üçüncü bir bildirimle değiştirildiği iki bildirim.

tag seçeneği, mesajları gruplandırmanın bir yoludur. Böylece, görüntülenmekte olan tüm eski bildirimler, yeni bir bildirimle aynı etikete sahipse kapatılır.

tag kullanımının ince bir yönü, bir bildirimin yerini alan bildirimin bunu ses veya titreşim olmadan yapmasıdır.

Bu noktada renotify seçeneği devreye girer.

Yeniden bildir

Bu, çoğunlukla yazma işlemi sırasındaki mobil cihazlar için geçerlidir. Bu seçenek ayarlandığında yeni bildirimler titreşir ve bir sistem sesi çalar.

Bazı durumlarda, sessiz bir şekilde güncelleme yapmak yerine kullanıcıyı bilgilendirmek için değiştirme bildirimi isteyebilirsiniz. Sohbet uygulamaları buna iyi bir örnektir. Bu durumda, tag ve renotify değerlerini true olarak ayarlamanız gerekir.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Sessiz

Bu seçenek, yeni bir bildirim göstermenize olanak tanır ancak varsayılan titreşim, ses ve cihaz ekranının açılmasını engeller.

Bildirimleriniz kullanıcının hemen ilgilenmesini gerektirmiyorsa bu ideal bir seçenektir.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Etkileşim gerektirir

Masaüstündeki Chrome, bildirimleri gizlemeden önce belirli bir süre boyunca gösterir. Android üzerinde Chrome'da bu davranış yoktur. Bildirimler, kullanıcı etkileşimde bulunana kadar görüntülenir.

Bir bildirimi, kullanıcı etkileşimde bulunana kadar görünür kalmaya zorlamak için requireInteraction seçeneğini ekleyin. Bu ekranda bildirim, kullanıcı bildiriminizi kapatana veya tıklayana kadar gösterilir.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Bu seçeneği dikkatlice kullanın. Bir bildirim göstermek ve kullanıcıyı, bildiriminizi kapatmak için yaptığı işlemi durdurmaya zorlamak can sıkıcı olabilir.

Bir sonraki bölümde, bildirimleri yönetmek ve bir bildirim tıklandığında sayfaları açma gibi işlemleri gerçekleştirmek için web'de yaygın olarak kullanılan kalıplardan bazılarına göz atacağız.

Sonraki adımlar

Code Labs