Bildirim davranışı

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

Ş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, showNotification() işlevini yalnızca görsel seçeneklerle çağırdığınızda aşağıdaki davranışlar gerçekleşir:

  • Bildirimi tıkladığınızda hiçbir şey olmuyor.
  • Her yeni bildirim art arda gösterilir. Tarayıcı, bildirimleri hiçbir şekilde daraltmaz.
  • Platform, ses çalabilir veya kullanıcının cihazını titretebilir (platforma bağlı olarak).
  • Bazı platformlarda bildirim kısa bir süre sonra kaybolur. Diğer platformlarda ise kullanıcı bildirimle etkileşime geçmediği sürece bildirim 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ın uygulanması ve kullanılması nispeten kolaydır.

Bildirim Tıklama Etkinliği

Kullanıcı bir bildirimi tıkladığında varsayılan davranış hiçbir şeyin olmamasıdır. Bildirimi kapatmıyor veya kaldırmıyor.

Bildirim tıklandığında genellikle bildirimin kapatılması ve başka bir mantıksal işlemin (ör. bir pencerenin açılması veya uygulamaya API çağrısı yapılması) gerçekleştirilmesi gerekir.

Bunu yapmak için hizmet işleyicimize bir 'notificationclick' etkinlik dinleyicisi eklemeniz gerekir. Bu, her 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örüldüğü 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 çalışma yaparsınız.

İşlemler

İşlemler, kullanıcılarınızla yalnızca bildirimi tıklayarak 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örmüştü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 şu değerlerden biri olacaktır: 'coffee-action', 'doughnut-action', 'gramophone-action' veya 'atom-action'.

Bu sayede bildirim tıklamalarını veya işlem tıklamalarını aşağıdaki gibi algılarız:

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 nasıl satır içi yanıt ekleyeceğinizi 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, 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, temelde bildirimleri bir "gruplandıran" ve birden fazla bildirimin kullanıcıya nasıl görüntüleneceğini belirlemenin kolay bir yolunu sağlayan bir dize kimliğidir. Bunu en iyi şekilde açıklamak için bir örnek verelim.

Bir bildirim gösterelim ve 'message-group-1' öğesine etiket ekleyelim. 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);

İlk bildirimimizi gösterir.

1. mesaj grubunun etiketini içeren ilk bildirim.

Yeni 'message-group-2' etiketiyle 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 bulunduğu iki bildirim.

Şimdi üçüncü bir bildirim gösterelim ancak ilk 'message-group-1' etiketini tekrar kullanalım. Bunu yaptığınızda 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 ç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 sayede, yeni bir bildirimle aynı etikete sahip olan o anda görüntülenen tüm eski bildirimler kapatılır.

tag, bir bildirimin yerini aldığında ses veya titreşim olmadan bunu yapar.

Bu noktada renotify seçeneği devreye girer.

Yeniden bildir

Bu, çoğunlukla yazının mobil cihazları için geçerlidir. Bu ayarı yaptığınızda yeni bildirimler titreşir ve bir sistem sesi çalar.

Sessizce güncelleme yapmak yerine kullanıcıyı bilgilendirmek için değiştirme bildirimi göndermek isteyebileceğiniz senaryolar vardır. Chat uygulamaları buna iyi bir örnektir. Bu durumda, tag ve renotify öğelerini 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 davranışını, sesi ve cihaz ekranının açılmasını engeller.

Bildirimleriniz kullanıcının hemen ilgilenmesini gerektirmiyorsa bu yöntem idealdir.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Etkileşim gerektirir

Masaüstünde Chrome, bildirimleri belirli bir süre boyunca göstermeden önce gizler. Android'deki Chrome'da bu davranış yoktur. Bildirimler, kullanıcı onlarla etkileşime geçene kadar gösterilir.

Bir bildirimin, kullanıcı onunla etkileşime geçene kadar görünür kalmasını zorunlu kılmak için requireInteraction seçeneğini ekleyin. Bu durumda, kullanıcı bildiriminizi kapatana veya tıklayana kadar bildirim gösterilir.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

Sonraki bölümde, bildirimleri yönetmek ve bir bildirim tıklandığında sayfa açmak gibi işlemleri gerçekleştirmek için web'de kullanılan bazı yaygın kalıplara göz atacağız.

Sonraki adımlar

Codelab uygulamaları