Bildirim davranışı

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Matt Gaunt
X Ana sayfa

Şimdiye kadar, bildirimin görsel 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, showNotification() yöntemini yalnızca görsel seçeneklerle çağırmak aşağıdaki davranışlara neden olur:

  • Bildirimi tıkladığınızda hiçbir şey olmuyor.
  • Her yeni bildirim birbiri ardına gösterilir. Tarayıcı, bildirimleri hiçbir şekilde daraltmaz.
  • Platform, bir ses çalabilir veya kullanıcının cihazını titretebilir (platforma bağlı olarak).
  • Bazı platformlarda bildirim kısa bir süre sonra kaybolurken diğerlerinde kullanıcı etkileşime geçene kadar gösterilir. (Örneğin, Android ve masaüstündeki bildirimlerinizi karşılaştırın.)

Bu bölümde, yalnızca seçenekleri kullanarak bu varsayılan davranışları nasıl değiştirebileceğimizi inceleyeceğiz. Bunları uygulamak ve bunlardan yararlanmak nispeten kolaydır.

Bildirim tıklama etkinliği

Kullanıcı bir bildirimi tıkladığında varsayılan davranış hiçbir şey olmamasıdır. Bildirimi kapatmaz veya kaldırmaz.

Bildirim tıklandığında genellikle bildirim kapatılır ve başka bir işlem gerçekleştirilir (ör. bir pencere açılır veya uygulamaya API çağrısı yapılır).

Bunu yapmak için hizmet çalışanımıza bir 'notificationclick' etkinlik işleyici eklemeniz gerekir. Bu, 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şlemler yaparsınız.

İşlemler

İşlemler, kullanıcılarınızın bildirimi tıklamanın ötesinde bir etkileşim düzeyine ulaşmasını sağlar.

Düğmeler

Önceki bölümde, showNotification() yöntemini çağırı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ı öğrenmek 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 olabilir: 'coffee-action', 'doughnut-action', 'gramophone-action' veya 'atom-action'.

Bu sayede, bildirim tıklamalarını veya işlem tıklamalarını şu şekilde tespit edebiliriz:

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çi yanıtlar

Ayrıca, önceki bölümde bildirime satır içi yanıt eklemeyi de öğrendiniz:

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, kullanıcının giriş alanına yazdığı 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, bildirimleri "gruplandıran" bir dize kimliğidir. Bu sayede, birden fazla bildirimin kullanıcıya nasıl gösterileceğini kolayca belirleyebilirsiniz. Bunu bir örnekle açıklamak en kolay yöntemdir.

Bir bildirim gösterelim ve bu bildirime 'message-group-1' etiketini verelim. Bildirimi şu kodla gösteririz:

const title = 'Notification 1 of 3';

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

registration.showNotification(title, options);

Bu işlem, ilk bildirimimizi gösterir.

1. mesaj grubunun etiketini içeren ilk bildirim.

'message-group-2' etiketli ikinci bir bildirim gösterelim:

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.

İki bildirim. İkinci bildirim, 2. mesaj grubunun ikinci etiketidir.

Şimdi üçüncü bir bildirim gösterelim ancak 'message-group-1' olan ilk etiketi yeniden kullanalım. Bunu yaptığınızda ilk bildirim kapatılır ve yeni bildirimimiz gösterilir.

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 çağrılmasına rağmen artık iki bildirimimiz var.

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

tag seçeneği, mesajları gruplandırmanın bir yoludur. Bu seçenek kullanıldığında, yeni bir bildirimle aynı etikete sahip olan ve şu anda gösterilen eski bildirimler kapatılır.

tag kullanmanın inceliklerinden biri, bir bildirimin yerini aldığında bunu ses veya titreşim olmadan yapmasıdır.

renotify seçeneği bu noktada devreye girer.

Yeniden bildir

Bu, bu makalenin yazıldığı sırada büyük ölçüde mobil cihazlar için geçerlidir. Bu seçeneği ayarladığınızda yeni bildirimler titreşir ve sistem sesi çalar.

Bazı durumlarda, sessizce güncelleme yapmak yerine kullanıcıyı bilgilendirmek için yeni bir bildirim göndermek 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ı açma davranışını engeller.

Bildirimleriniz kullanıcının hemen ilgilenmesini gerektirmiyorsa bu seçenek idealdir.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Etkileşim gerektirir

Masaüstünde Chrome, bildirimleri gizlemeden önce belirli bir süre boyunca gösterir. Android'de Chrome'un böyle bir davranışı yoktur. Bildirimler, kullanıcı etkileşime geçene kadar gösterilir.

Bir bildirimin, kullanıcı etkileşimde bulunana kadar görünür kalmasını zorunlu kılmak için requireInteraction seçeneğini ekleyin. Bu işlem, kullanıcı bildiriminizi kapatana veya tıklayana kadar bildirimi gösterir.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Bu seçeneği dikkatli kullanın. Bildirim göstermek ve kullanıcıyı bildiriminizi kapatmak için yaptığı işi bırakmaya zorlamak can sıkıcı olabilir.

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

Sonraki adımlar

Kod laboratuvarları