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. Her biri 100'den az gösterim alan seçenekleri de görebilirsiniz.

Varsayılan olarak, yalnızca görsel seçeneklerle showNotification() çağrısı yapmak için: :

  • Bildirim tıklandığında herhangi bir işlem yapılmaz.
  • Her yeni bildirim art arda gösterilir. Tarayıcı, hiçbir şekilde bildirim göndermez.
  • Platform, kullanıcının cihazını ses çalabilir veya titreşebilir (platforma bağlı olarak).
  • Bazı platformlarda bildirim kısa bir süre sonra kaybolurken bazı platformlarda bildirim kaldırılır Kullanıcı etkileşimde bulunmadığı sürece bildirimi göstermez. (Örneğin, son 30 güne ait daha fazla bilgi edindiniz.)

Bu bölümde, seçenekleri kullanarak bu varsayılan davranışları nasıl değiştirebileceğimize bakacağız yaşayabilirsiniz. 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. Gelmiyor Hatta bildirimi kapatabilir veya kaldırabilirsiniz.

Bildirim tıklamasına ilişkin genel uygulama, bildirimin kapatılıp başka bir mantık (ör. bir pencere açın veya uygulamaya API çağrısı yapın).

Bunu sağlamak için hizmet çalışanımıza bir 'notificationclick' etkinlik işleyicisi 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 Buradan, bildirimin özelliklerine ve yöntemlerine erişebilirsiniz. Burada bu işlemin close() yöntemini çağırıp ek çalışma yaparsınız.

İşlemler

İşlemler, kullanıcılarınızla tek bir tıklama yerine başka bir etkileşim seviyesi bildirimi görürsünüz.

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 noticationclick içindeki event.action değerini kontrol edin. etkinliğini kullanın.

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 durumda, şuna benzer bildirim tıklamalarını veya işlem tıklamalarını 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 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ı tarafından giriş alanına girilen 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 "grupların" ve sık sık kontrol etmenizi iki farklı yöntemden yararlanır. Açıklamaları en kolay bir örnekle devam edelim.

Bir bildirim gösterelim ve 'message-group-1' öğesine etiket ekleyelim. Her bir reklam grubu için şu kodu içeren bir bildirim alırsınız:

const title = 'Notification 1 of 3';

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

registration.showNotification(title, options);

Bunu yaptığınızda ilk bildirimimiz görüntülenir.

1. mesaj grubu 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);

Bunu yaptığınızda, kullanıcıya ikinci bir bildirim gösterilir.

2. mesaj grubunun ikinci etiketinin yer aldığı iki bildirim.

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

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 arandığı halde şu anda iki bildirim aldık.

İlk bildirimin yerine üçüncü bir bildirimin geldiği iki bildirim.

tag seçeneği iletileri, gruplanmış olan tüm eski bildirimleri şu anda görüntülenenler, yeni bir bildirimle aynı etikete sahiplerse kapatılır.

tag, bir bildirimin yerini aldığında ses duymadan bunu yapmanın incelikli bir yanıdır. veya titreşim.

renotify seçeneği burada devreye girer.

Yeniden bildir

Bu, çoğunlukla yazının mobil cihazlar için geçerli olduğu bir durumdur. Bu seçeneğin ayarlanması, ve bildirimler titreşir ve bir sistem sesi çalar.

Kullanıcıyı bilgilendirmek yerine, başka bir bildirimle sessizce güncellemektir. Chat uygulamaları buna iyi bir örnektir. Bu durumda, tag ve renotify - true.

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ı engeller. sesten sonra cihazın ekranını açın.

Bildirimlerinizle kullanıcının hemen ilgilenmesi gerekmiyorsa bu ideal bir uygulamadır.

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. Chrome açık Android'de böyle bir 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 belirleyin. Bu seçenek, 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 kullanırken dikkatli olun. Bir bildirim gösterme ve kullanıcıyı durdurmaya zorlama bildirimlerini kapatmak sinir bozucu olabilir.

Bir sonraki bölümde, proje yaşam döngüsünde web'de yaygın olarak kullanılan bildirimleri yönetme ve bildirim tıklandığında sayfaları açmak gibi işlemler gerçekleştirme.

Yakında gidilecek yerler

Kod laboratuvarları