Push bildirimleri, kullanıcılarınıza gelen sohbet mesajları gibi önemli ve güncel bilgiler hakkında uyarı göndererek uygulama benzeri mükemmel bir deneyim sunmanıza olanak tanır. Bildirim platformu, tarayıcılarda nispeten yenidir ve daha fazla kullanım alanı ve şart ortaya çıktıkça bildirimler için API'lere birçok ekleme yapıldığını görüyoruz. Chrome 50 (Mart 2016'da beta sürümünde) de bu kapsamdadır. Geliştiricilere bildirimler üzerinde daha fazla kontrol sağlayan en az dört yeni özellik bu sürümde kullanıma sunulmuştur. Aşağıdakileri yapabilirsiniz:
- Bildirim düğmelerine simge ekleme,
- Tutarlı bir deneyim oluşturmak için zaman damgasını değiştirebilir,
- Bildirimleri senkronize etmeye ve analizler sunmaya yardımcı olmak için bildirim kapatma etkinliklerini izleme
- Bir bildirim, şu anda gösterilen bildirimin yerini aldığında yeniden bildirim deneyimini yönetme
Chrome 50'e Push bildirimleri için yükü de eklendi. Chrome'da uygulanan Notifications API ile ilgili gelişmelerden haberdar olmak için özelliği ve özellik sorun takipçisini takip edin.
Özel simgelerle ilgi çekici işlem düğmeleri oluşturma
Yakın zamanda yayınladığımız Chrome 49'daki bildirim işlem düğmeleriyle ilgili gönderide, bildirim düğmelerini şık ve ilgi çekici hale getirmek için bunlara resim ekleyemediğinizden ancak Unicode karakterlerini kullanarak emojiler gibi öğeleri satır içi olarak ekleyebileceğinizden bahsetmiştik. Artık endişelenmenize gerek yok: Bu yeni özellik sayesinde artık işlem düğmesinde bir resim belirtebilirsiniz:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
İşlem simgesinin görünümü platforma göre değişir. Örneğin, Android'de simge, Lollipop ve sonraki sürümlerde koyu gri filtreye, Lollipop öncesi sürümlerde ise beyaz filtreye sahip olur. Masaüstünde ise tam renkli olur. (Not: Masaüstünde bu özelliğin geleceği hakkında tartışmalar var.) Bazı platformlar işlem simgelerini bile görüntüleyemeyebilir. Bu nedenle, simgelerin amacın tek göstergesi olarak değil, işleme bağlam sağlamak için kullanıldığından emin olun.
Son olarak, kaynakların indirilmesi gerektiğinden simgelerin mümkün olduğunca küçük tutulması ve yükleme etkinliğinizde önceden önbelleğe alınması iyi bir uygulamadır. (Bu makalenin yazıldığı sırada Chrome'daki bildirim kaynaklarının getirilmesi henüz hizmet çalışanı üzerinden yönlendirilmiyor.)
Bildirim kapatma etkinlikleri
Bildirimlerle ilgili sıklıkla istenen bir özellik, kullanıcının bir bildirimi ne zaman kapattığını bilme imkanı sunmaktır. Bildirim spesifikasyonunda yapılan son değişiklikler bildirimkapatma etkinliği ekleyene kadar bunu yapmamız mümkün değildi.
notificationclick ve notificationclose etkinliklerini kullanarak kullanıcılarınızın bildirimlerinizle nasıl etkileşimde bulunduğunu anlayabilirsiniz. E-postaları uzun süre açık bırakıp etkin bir şekilde siliyor mu yoksa hemen işlem yapıyor mu?
Bu işlevin popüler kullanım alanlarından biri, bildirimleri cihazlar arasında senkronize edebilmektir. Kullanıcı masaüstü cihazında bir bildirimi kapatırsa mobil cihazındaki aynı bildirim de kapatılmalıdır. Bunu sessizce yapma olanağı henüz sunmuyoruz (her push mesajında bildirim gösterilmesi gerektiğini unutmayın). Ancak notificationclose yöntemini kullanarak, kullanıcının bildirim durumunu sunucunuzda izlemenize ve kullanıcı bunları kullanırken diğer cihazlarla senkronize etmenize olanak tanıyarak bu sorunu çözebilirsiniz.
notificationclose etkinliğini kullanmak için service worker'ınıza kaydedin. Bu etkinlik yalnızca kullanıcı bir bildirimi etkin bir şekilde kapattığı zaman tetiklenir. Örneğin, kullanıcı belirli bir bildirimi veya Android'de gelen kutusundaki tüm bildirimleri kapatırsa.
requireInteraction işareti yanlışsa veya ayarlanmazsa bildirim kullanıcı tarafından manuel olarak değil, sistem tarafından otomatik olarak kapatılırsa notificationclose etkinliği tetiklenmez.
Aşağıda basit bir uygulama gösterilmektedir. Kullanıcı bildirimi kapattığında özel mantık yürütebileceğiniz bildirim nesnesine erişebilirsiniz.
self.addEventListener('notificationclose', e => console.log(e.notification));
Bunu Bildirim Oluşturucu'da test edebilirsiniz. Bildirimi kapattığınızda bir uyarı alırsınız.
Mevcut bir bildirimi değiştirirken kullanıcılarınızı rahatsız etmeyin
Ben Amca, "Güçlü olmakla birlikte büyük sorumluluk da gelir" derken Peter Parker'ın güçlerinden değil, bildirim sisteminden bahsediyordu. Bildirim sistemi, kullanıcılarla etkileşim kurmak için güçlü bir araçtır. Güvenlerini kötüye kullanırsanız tüm bildirimleri kapatırlar ve onları tamamen kaybedebilirsiniz.
Oluşturduğunuz bildirimleri, kullanıcının dikkatini çekmek için sesli uyarı oluşturacak veya titreyecek şekilde ayarlayabilirsiniz. Ayrıca, yeni bir bildirim nesnesinde "etiket" özelliğini yeniden kullanarak mevcut bir bildirimi değiştirebilirsiniz.
Chrome 50'den önce, her bildirim oluşturduğunuzda veya mevcut bir bildirimi değiştirdiğinizde titreşim kalıbı çalıştırılır ya da sesli uyarı çalınır. Bu durum, kullanıcılarınızın canını sıkabilir. Chrome 50'de, "renotify" adlı basit bir boole işaretçisi aracılığıyla yeniden bildirim sırasında ne olacağı üzerinde kontrol sahibisiniz. Sonraki bildirimler için aynı "etiketi" kullanırken yeni varsayılan davranış sessizdir ve geliştirici olarak işaretçiyi "true" olarak ayarlayarak kullanıcıyı "yeniden bilgilendirmeyi" etkinleştirmeniz gerekir.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Bunu Bildirim Oluşturucu'da deneyebilirsiniz.
Kullanıcıya gösterilen zaman damgasını yönetme
Android'de Chrome bildirimlerinin oluşturulma zamanları varsayılan olarak sağ üst köşede gösterilir. Maalesef bu, bildirimin sisteminiz tarafından oluşturulduğu gerçek zaman olmayabilir. Örneğin, etkinlik cihaz çevrimdışıyken tetiklenmiş olabilir veya bildirim yaklaşan bir toplantı için gösteriliyor olabilir. Chrome 50'den itibaren Chrome, geliştiricilerin bildirimde gösterilmesi gereken zamanı sağlamasına olanak tanıyan yeni bir zaman damgası mülkü ekledi.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Zaman damgası şu anda yalnızca Android için Chrome'da gösterilmektedir. Bu ayar masaüstünde görünmese de hem mobil hem de masaüstündeki bildirim sırasını etkiler.