Bildirim seçenekleri, birinin görsel yönleriyle (bu bölüm) ilgili, diğeri ise bildirimlerin davranışsal yönlerini açıklayan (sonraki bölüm) iki bölüme ayrılmıştır.
Peter Beverloo'nun Bildirim Oluşturucu özelliğini kullanarak, çeşitli platformlardaki farklı tarayıcılarda çeşitli bildirim seçenekleriyle denemeler yapabilirsiniz.
Görsel Seçenekler
Bildirim gösterme API'si basittir:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Hem title
hem de options
bağımsız değişkenleri isteğe bağlıdır.
Başlık bir dizedir ve seçenekler aşağıdakilerden herhangi biri olabilir:
{
"//": "Visual Options",
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
"timestamp": "<Long>"
"//": "Both visual & behavioral options",
"actions": "<Array of Strings>",
"data": "<Anything>",
"//": "Behavioral Options",
"tag": "<String>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"silent": "<Boolean>",
}
Görsel seçeneklere göz atalım:
Başlık ve gövde seçenekleri
Başlık ve seçenekler olmadan Windows'da Chrome'daki bildirimler şöyle görünür:
Gördüğünüz gibi tarayıcı adı başlık olarak, "Yeni bildirim" yer tutucusu ise bildirim gövdesi olarak kullanılıyor.
Cihazda progresif web uygulaması yüklüyse tarayıcı adı yerine web uygulaması adı kullanılır:
Aşağıdaki kodu çalıştırdıysak:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
Linux'ta Chrome'da şu bildirimi alırız:
Linux'taki Firefox'ta bu görünüm aşağıdaki gibi olacaktır:
Başlığında ve gövdesinde çok fazla metin bulunan bildirim, Linux'taki Chrome'da aşağıdaki gibi görünür:
Linux'taki Firefox, siz bildirimin üzerine gelinceye dek gövde metnini daraltır ve bildirimin genişlemesine neden olur:
Windows'daki Firefox'ta da aynı bildirimler aşağıdaki gibi görünür:
Gördüğünüz gibi, aynı bildirim farklı tarayıcılarda farklı görünebilir. Ayrıca, aynı tarayıcıda, farklı platformlarda farklı görünebilir.
Chrome ve Firefox, bu özelliklerin kullanılabildiği platformlarda sistem bildirimlerini ve bildirim merkezini kullanır.
Örneğin, macOS'teki sistem bildirimleri resimleri ve işlemleri (düğmeler ve satır içi yanıtlar) desteklemez.
Chrome ayrıca tüm masaüstü platformları için özel bildirimler sunar. chrome://flags/#enable-system-notifications
işaretini Disabled
durumuna ayarlayarak bu özelliği etkinleştirebilirsiniz.
Simge
icon
seçeneği, başlık ve gövde metninin yanında gösterebileceğiniz küçük bir resimdir.
Kodunuzda, yüklemek istediğiniz resmin URL'sini sağlamanız gerekir:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Linux'taki Chrome'da şu bildirimi alırsınız:
ve Linux'taki Firefox'ta:
Maalesef bir simge için hangi boyutta resmin kullanılacağı konusunda somut bir kural yok.
Android, 64 dp'lik bir resim istiyor (cihazın piksel oranının 64 piksel katı).
Bir cihazın en yüksek piksel oranının 3 olduğunu varsayarsak simge boyutunun 192 piksel veya daha büyük olması güvenli bir seçimdir.
Rozet
badge
, kullanıcıya bildirimin nereden geldiği hakkında biraz daha fazla bilgi sunmak için kullanılan küçük, tek renkli bir simgedir:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
Rozet, yazıldığı sırada yalnızca Android'deki Chrome'da kullanılır.
Diğer tarayıcılarda (veya rozeti olmayan Chrome'da) tarayıcının simgesini görürsünüz.
icon
seçeneğinde olduğu gibi, kullanılacak boyutla ilgili somut bir kural yoktur.
Android yönergelerini incelerken, önerilen boyutun 24 piksel ile cihazın piksel oranı çarpımı sonucunda elde edilen sonuçtur.
Yani 72 piksel veya daha büyük bir resim iyi olmalıdır (maksimum cihaz piksel oranının 3 olduğu varsayılır).
Resim
image
seçeneği, kullanıcıya daha büyük bir resim göstermek için kullanılabilir. Bu, özellikle kullanıcıya bir önizleme resmi göstermek açısından kullanışlıdır.
const title = 'Image Notification';
const options = {
image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};
registration.showNotification(title, options);
Linux'taki Chrome'da bildirim şu şekilde görünür:
Android'deki Chrome'da kırpma ve oran değerleri farklıdır:
Masaüstü ve mobil arasındaki oran farklılıkları dikkate alındığında, kural önermek son derece zordur.
Masaüstündeki Chrome mevcut alanı doldurmadığından ve 4:3 oranına sahip olduğundan, belki de en iyi yaklaşım bu orana sahip bir resim sunmak ve Android'in resmi kırpmasına izin vermektir. Bununla birlikte, image
seçeneği yine de değişebilir.
Android'de tek yönerge 450 dp genişliktir.
Bu kurala göre en az 1350 piksel genişliğinde bir resim iyi bir tercihtir.
İşlemler (Düğmeler)
Düğmeleri bir bildirimle göstermek için actions
öğesini tanımlayabilirsiniz:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
type: 'button',
title: 'Coffee',
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);
Her işlem için bir title
, action
(temelde kimliktir), bir icon
ve type
tanımlayabilirsiniz. Başlığı ve simgeyi bildirimde görebilirsiniz. Kimlik, işlem düğmesinin tıklandığı algılanırken kullanılır (bir sonraki bölümde bu konuda daha fazla bilgi verilmiştir). 'button'
varsayılan değer olduğundan tür atlanabilir.
Şu anda yalnızca Android için Chrome ve Opera desteği işlemleri destekleniyordu.
Yukarıdaki örnekte, görüntülenecekten daha fazla işlem tanımlayabileceğinizi göstermek için tanımlanmış dört eylem bulunmaktadır. Tarayıcı tarafından görüntülenecek işlem sayısını öğrenmek istiyorsanız window.Notification?.maxActions
adresini kontrol edebilirsiniz:
const maxVisibleActions = window.Notification?.maxActions;
if (maxVisibleActions) {
options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
options.body = 'Notification actions are not supported.';
}
Masaüstünde, işlem düğmesi simgelerinin renklerini gösterir (pembe halkaya bakın):
Android 6 ve önceki sürümlerde simgeler sistem renk şemasına uyacak şekilde renklendirilir:
Android 7 ve sonraki sürümlerde işlem simgeleri hiç gösterilmez.
Chrome, masaüstündeki davranışını Android'e uyacak şekilde değiştirecektir (örneğin, simgelerin
sistemin görünüm ve tarzına uygun olmasını sağlamak için uygun renk şemasını uygulayabilir). Bu arada, simgelerinizin rengini #333333
yaparak Chrome'un metin rengini eşleştirebilirsiniz.
Simgelerin masaüstünde değil, Android'de net göründüğünü belirtmek gerekir.
Masaüstü Chrome'da çalışabileceğim en iyi boyut 24 piksel x 24 pikseldi. Ne yazık ki bu Android'de farklı görünüyor.
Bu farklardan yararlanabileceğimiz en iyi uygulama:
- En azından tüm simgelerinizin kullanıcılara tutarlı bir şekilde gösterilmesi için simgeleriniz için tutarlı bir renk şemasına bağlı kalın.
- Bazı platformlarda tek renkli olarak gösterildiğinden emin olun.
- Boyutu test edin ve sizin için neyin uygun olduğunu görün. 128 piksel × 128 piksel kalitesi benim için Android'de iyi sonuç veriyor ama masaüstünde düşük kalitedeydi.
- İşlem simgeleriniz hiç gösterilmez.
Bildirim spesifikasyonu, simgelerin birden çok boyutunu tanımlamanın bir yolunu geliştirmenin yollarını arıyor. Ancak, herhangi bir konuda anlaşmaya varılmadan önce biraz zaman geçmesi gerekiyor.
İşlemler (Satır İçi Yanıtlar)
'text'
türünde bir işlem tanımlayarak bildirime satır içi yanıt ekleyebilirsiniz:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
image: '/images/demos/avatar-512x512.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
}
],
};
registration.showNotification(title, options);
Bu, Android'de şöyle görünecektir:
İşlem düğmesini tıkladığınızda bir metin giriş alanı açılır:
Metin giriş alanı için yer tutucuyu özelleştirebilirsiniz:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
icon: '/images/demos/avatar-512x512.jpg',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
placeholder: 'Type text here',
}
],
};
registration.showNotification(title, options);
Windows'daki Chrome'da metin giriş alanı, işlem düğmesini tıklamak zorunda kalmadan her zaman görünür:
Birden fazla satır içi yanıt ekleyebilir veya düğmeleri ve satır içi yanıtları birleştirebilirsiniz:
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);
Yön
dir
parametresi, metnin hangi yönde (sağdan sola veya soldan sağa) görüntüleneceğini tanımlamanıza olanak tanır.
Testlerde, yönün büyük ölçüde bu parametre yerine metin tarafından belirlendiği görülüyor. Teknik özelliklere göre bu, tarayıcıya eylemler gibi seçeneklerin nasıl düzenleneceğini önermek için tasarlanmıştır, ancak herhangi bir fark görmedim.
Büyük olasılıkla en iyisi bunu tanımlayıp yapamayacağınızı belirlemektir, aksi takdirde tarayıcı, sağlanan metne göre doğru olanı yapmalıdır.
Parametre auto
, ltr
veya rtl
olarak ayarlanmalıdır.
Linux'taki Chrome'da kullanılan sağdan sola yazılan bir dil şöyle görünür:
Firefox'ta (fareyle üzerine geldiğinizde) şu iletiyi görürsünüz:
Titreştir
Titreşim seçeneği, kullanıcının geçerli ayarlarının titreşimlere izin verdiği (yani cihazın sessiz modda olmadığı) varsayılarak bir bildirim görüntülendiğinde çalışacak bir titreşim deseni tanımlamanıza olanak tanır.
Titreşim seçeneğinin biçimi, cihazın titreşmesi gereken milisaniye sayısını ve ardından cihazın titreşmesi gerekmemesi gereken milisaniye sayısını tanımlayan bir sayı dizisi olmalıdır.
const title = 'Vibrate Notification';
const options = {
// Star Wars shamelessly taken from the awesome Peter Beverloo
// https://tests.peter.sh/notification-generator/
vibrate: [
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
40, 500,
],
};
registration.showNotification(title, options);
Bu durum yalnızca titreşimi destekleyen cihazları etkiler.
Ses
Ses parametresi, bildirim alındığında çalınacak bir ses tanımlamanızı sağlar.
Bu makalenin yazıldığı sırada hiçbir tarayıcıda bu seçenek desteklenmemektedir.
const title = 'Sound Notification';
const options = {
sound: '/demos/notification-examples/audio/notification-sound.mp3',
};
registration.showNotification(title, options);
Zaman damgası
Zaman damgası, push bildiriminin gönderilmesiyle sonuçlanan bir etkinliğin gerçekleştiği zamanı platforma bildirmenizi sağlar.
timestamp
, 1 Ocak 1970 (UNIX dönemini ifade eder) olan 00:00:00 UTC'den sonraki milisaniye sayısı olmalıdır.
const title = 'Timestamp Notification';
const options = {
body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
timestamp: Date.parse('01 Jan 2000 00:00:00'),
};
registration.showNotification(title, options);
Kullanıcı Deneyimiyle İlgili En İyi Uygulamalar
Bildirimlerde gördüğüm en büyük kullanıcı deneyimi hatası, bir bildirim tarafından görüntülenen bilgilerin yeterince belirgin olmamasıydı.
Öncelikle push mesajı neden gönderdiğinizi düşünmeli ve kullanıcıların bu bildirimi neden okuduklarını anlamalarına yardımcı olmak için tüm bildirim seçeneklerinin kullanıldığından emin olmalısınız.
Dürüst olmak gerekirse, örnekleri görmek ve "Asla yapmayacağım" diye düşünmek kolaydır. Ancak bu tuzağa düşmek düşündüğünüzden çok daha kolaydır.
Kaçınılması gereken bazı yaygın tuzaklar:
- Web sitenizi başlığa veya gövdesine eklemeyin. Tarayıcılar bildirime alanınızı dahil eder, bu nedenle de bilgiyi kopyalamayın.
- Elinizdeki tüm bilgileri kullanın. Push mesajını birileri "Yeni Mesaj" başlığını ve "Okumak için burayı tıklayın" gövdesini kullanmak yerine bir kullanıcıya ileti gönderdiği için gönderdiyseniz "Okumak için burayı tıklayın" başlığını kullanın ve bildirim gövdesini iletinin bir bölümü olarak ayarlayın.
Tarayıcılar ve özellik algılama
Bu yazının yazıldığı sırada, bildirimlere yönelik özellik desteği konusunda Chrome ile Firefox arasında oldukça büyük bir fark vardı.
Neyse ki, window.Notification
prototipine bakarak bildirim özellikleri desteğini tespit edebilirsiniz.
Bir bildirimin işlem düğmelerini destekleyip desteklemediğini öğrenmek için aşağıdakileri yapmamız gerektiğini varsayalım:
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
Bu sayede, kullanıcılarımıza gösterdiğimiz bildirimi değiştirebildik.
Diğer seçeneklerde, 'actions'
'yi istediğiniz parametre adıyla değiştirerek yukarıdaki işlemi yapmanız yeterlidir.
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