Ş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.
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.
Ş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.
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
- Web Push Bildirimine Genel Bakış
- Push'un İşleyişi
- Kullanıcıya Abone Olma
- İzin Kullanıcı Deneyimi
- Web Push Kitaplıklarıyla Mesaj Gönderme
- Web Push Protokolü
- Push Etkinliklerini Yönetme
- Bildirim Görüntüleme
- Bildirim Davranışı
- Yaygın Bildirim Kalıpları
- Push Bildirimleriyle İlgili SSS
- Sık Karşılaşılan Sorunlar ve Hata Bildirme