Bu sayfa, Cloud Translation API ile çevrilmiştir.

Bildirim Görüntüleme

Alexey Rodionov

Matt Gaunt

Bildirim seçenekleri, görsel yönleri ele alan (bu bölüm) ve bildirimlerin davranış yönlerini açıklayan (sonraki bölüm) iki bölüme ayrılmıştır.

Peter Beverloo'nun Bildirim Oluşturma Aracı'nı kullanarak, çeşitli tarayıcılarda farklı bildirim seçeneklerini farklı platformlarda deneyebilirsiniz.

Görsel Seçenekler

Bildirim gösterme API'si basittir:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

title ve options bağımsız değişkenleri isteğe bağlıdır.

Başlık bir dizedir ve seçenekler aşağıdakilerden 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:

Bir Bildirimin kullanıcı arayüzü diseksiyonu.

Başlık ve gövde seçenekleri

Windows'daki Chrome'da bir bildirim, başlık ve seçenekler olmadan şu şekilde görünür:

Windows'daki Chrome'da başlık ve seçenekler olmadan bildirim.

Gördüğünüz gibi, başlık olarak tarayıcı adı, bildirim gövdesi olarak da "Yeni bildirim" yer tutucusu kullanılıyor.

Cihazınızda bir aşamalı web uygulaması yüklüyse tarayıcı adı yerine web uygulaması adı kullanılır:

Tarayıcı adı yerine web uygulaması adını içeren bildirim.

Aşağıdaki kodu çalıştırırsak:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

Linux'taki Chrome'da şu bildirimi alırız:

Linux'te Chrome'da başlık ve gövde metni içeren bildirim.

Linux'daki Firefox'ta bu durum şöyle görünür:

Linux'ta Firefox'ta başlık ve gövde metni içeren bildirim.

Başlığında ve gövdesinde çok fazla metin bulunan bildirim, Linux'daki Chrome'da şu şekilde görünür:

Linux'te Chrome'da uzun başlık ve gövde metni içeren bildirim.

Linux'daki Firefox, fareyle bildirimin üzerine gelene kadar gövde metnini daraltır ve bildirimin genişlemesine neden olur:

Linux'daki Firefox'ta uzun başlık ve gövde metni içeren bildirim.

Fareyle imleci bildirimin üzerine getirdiğinizde Linux'ta Firefox'ta uzun başlığa ve gövde metnine sahip bildirim.

Windows'da Firefox'ta da aynı bildirimler şu şekilde görünür:

Windows'daki Firefox'ta başlık ve gövde metni içeren bildirim.

Windows'daki Firefox'ta uzun başlık ve gövde metni içeren bildirim.

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, bunların 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'da tüm masaüstü platformları için özel bildirimler de vardır. chrome://flags/#enable-system-notifications işaretini Disabled durumuna ayarlayarak 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'daki Chrome'da şu bildirimi alırsınız:

ve Linux'taki Firefox'ta:

Ne yazık ki simge için hangi boyutta resmin kullanılacağına dair somut bir kural yok.

Android'in 64 dp boyutunda bir resim istediği anlaşılıyor (bu, cihazın piksel oranına göre 64 piksel çarpanı anlamına gelir).

Bir cihaz için en yüksek piksel oranının 3 olduğu varsayıldığında, 192 piksel veya daha büyük bir simge boyutu güvenli bir seçimdir.

Rozet

badge, bildirimin kaynağıyla ilgili kullanıcıya biraz daha fazla bilgi vermek 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);

Bu makale yazıldığı sırada rozet yalnızca Android'de Chrome'da kullanılmaktadır.

Diğer tarayıcılarda (veya rozetsiz Chrome'da) tarayıcının simgesini görürsünüz.

icon seçeneğinde olduğu gibi, kullanılacak boyutla ilgili gerçek bir kılavuz yoktur.

Android yönergelerine göre önerilen boyut, cihaz piksel oranının 24 piksel ile çarpımıdır.

Yani 72 piksel veya daha büyük bir resim yeterli olacaktır (maksimum cihaz piksel oranı 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 için yararlı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:

Linux'taki Chrome uygulamasında resimli bildirim.

Android üzerinde Chrome'da kırpma ve oran farklıdır:

Android'de Chrome'da resim içeren bildirim.

Masaüstü ve mobil arasındaki oran farklılıkları göz önüne alındığında, yönergeler önermek son derece zordur.

Masaüstünde Chrome, mevcut alanı doldurmadığı ve 4:3 oranına sahip olduğu için en iyi yaklaşım, bu orana sahip bir resim yayınlamak ve Android'in resmi kırpmasına izin vermektir. Bununla birlikte, image seçeneği yine de değişebilir.

Android'de tek kural 450 dp'dir.

Bu kurala göre, 1.350 piksel veya daha büyük bir resim kullanmak iyi bir fikirdir.

İşlemler (Düğmeler)

actions öğesini, bildirim içeren düğmeler görüntülemek için 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, bir action (temel olarak bir kimlik), bir icon ve bir type tanımlayabilirsiniz. Başlık ve simge, bildirimde görebileceğiniz öğelerdir. Bu kimlik, işlem düğmesinin tıklandığını algılarken kullanılır (bu konu hakkında daha fazla bilgiyi sonraki bölümde bulabilirsiniz). 'button' varsayılan değer olduğundan tür atlanabilir.

Bu makalenin yazıldığı sırada yalnızca Chrome ve Android için Opera işlemleri desteklenmektedir.

Yukarıdaki örnekte, görüntülenecekten daha fazla işlem tanımlayabileceğinizi göstermek için dört işlem tanımlanmıştır. Tarayıcı tarafından görüntülenecek işlemlerin sayısını öğrenmek istiyorsanız window.Notification?.maxActions'yi 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 simgeleri renklerini gösterir (pembe çörek örneğine bakın):

Linux'te Chrome'da işlem düğmelerine sahip bildirim.

Android 6 ve önceki sürümlerde simgeler, sistem renk şemasına uyacak şekilde renklendirilir:

Android için Chrome'da işlem düğmelerine sahip bildirim.

Android 7 ve sonraki sürümlerde işlem simgeleri hiç gösterilmez.

Chrome'un masaüstündeki davranışını Android'e uyacak şekilde değiştirmesi (ör. simgelerin sistem görünümüne ve tarzına uyacak şekilde uygun renk şemasını uygulama) umulmaktadır. Bu süre zarfında, simgelerinizi #333333 renginde yaparak Chrome'un metin rengiyle eşleştirebilirsiniz.

Simgelerin Android'de net göründüğünü ancak masaüstünde görünmediğini de belirtmek isteriz.

Masaüstü Chrome'da çalışabileceğim en iyi boyut 24 x 24 pikseldi. Maalesef bu, Android'de uygunsuz görünüyor.

Bu farklılıklardan yararlanabileceğimiz en iyi uygulama:

En azından tüm simgelerinizin kullanıcıya tutarlı bir şekilde gösterilmesi için simgelerinizde tutarlı bir renk şemasına bağlı kalın.
Bazı platformlar bunları tek renkli olarak gösterebileceğinden, tek renkli olarak çalıştıklarından emin olun.
Boyutu test ederek size en uygun olanı bulun. 128 piksel × 128 piksel, Android'de benim için iyi çalışıyor ancak masaüstünde kalitesi düşüktü.
İşlem simgelerinizin hiç gösterilmemesi olasıdır.

Bildirim spesifikasyonunda, birden fazla simge boyutu tanımlamanın bir yolu araştırılıyor ancak bir konuda anlaşmaya varılması biraz zaman alacak gibi görünüyor.

İşlemler (Satır İçi Yanıtlar)

'text' türüne sahip 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);

Android'de bu şekilde görünür:

Android'de yanıtlama işlemi düğmesi içeren bildirim.

İşlem düğmesini tıkladığınızda bir metin giriş alanı açılır:

Android'de açık bir metin giriş alanı içeren bildirim.

Metin giriş alanının yer tutucusunu ö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);

Android'de, metin giriş alanı için özelleştirilmiş yer tutucu içeren bildirim.

Windows'daki Chrome'da, işlem düğmesini tıklamanız gerekmeden metin giriş alanı her zaman görünür:

Windows'ta metin giriş alanı ve yanıtlama işlemi düğmesi içeren bildirim.

Birden fazla satır içi yanıt ekleyebilir veya düğmeleri satır içi yanıtlarla 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);

Windows'da metin giriş alanı ve iki işlem düğmesi içeren bildirim.

Yön

dir parametresi, metnin hangi yönde (sağdan sola veya soldan sağa) gösterileceğini tanımlamanızı sağlar.

Testlerde, yönün büyük ölçüde bu parametreden ziyade metin tarafından belirlendiği anlaşılıyor. Spesifikasyona göre, bu özelliğin amacı tarayıcıya işlemler gibi seçeneklerin nasıl düzenleneceğini önermektir ancak herhangi bir fark görmedim.

Mümkünse tanımlamanız en iyisidir. Aksi takdirde tarayıcı, sağlanan metne göre doğru işlemi yapmalıdır.

Parametre auto, ltr veya rtl olarak ayarlanmalıdır.

Linux'taki Chrome'da sağdan sola yazılan bir dil şöyle görünür:

Linux'ta Chrome'da sağdan sola dil kullanan bildirim.

Firefox'ta (fareyle üzerine geldiğinizde) şunu görürsünüz:

Linux'daki Firefox'ta sağdan sola dil kullanan bildirim.

Titreşim

Titreşim seçeneği, kullanıcının mevcut ayarlarının titreşimlere izin verdiği (ör. cihaz sessiz modda değilse) varsayılarak, bildirim görüntülendiğinde çalışacak bir titreşim ritmi tanımlamanıza olanak tanır.

Titreşim seçeneğinin biçimi, cihazın titremesi gereken milisaniye sayısını ve ardından cihazın titrememesi gereken milisaniye sayısını açıklayan 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ıza olanak tanır.

Bu makalenin yazıldığı sırada hiçbir tarayıcı bu seçeneği desteklemiyor.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Zaman damgası

Zaman damgası, platforma push bildiriminin gönderilmesine neden olan bir etkinliğin gerçekleştiği zamanı bildirmenize olanak tanır.

timestamp, 00:00:00 UTC'den sonraki milisaniye sayısı olmalıdır. Bu, 1 Ocak 1970'tir (UNIX dönemidir).

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ı deneyimi en iyi uygulamaları

Bildirimlerde gördüğüm en büyük kullanıcı deneyimi hatası, bildirimin gösterdiği bilgilerin belirsiz olması.

İlk olarak push mesajını neden gönderdiğinizi düşünmeli ve kullanıcıların bu bildirimi neden okuduğunu anlamalarına yardımcı olmak için tüm bildirim seçeneklerinin kullanılmasını sağlamalısınız.

Dürüst olmak gerekirse, örnekleri görüp "Ben bu hatayı asla yapmam" demek kolaydır. Ancak bu tuzağa düşmek düşündüğünüzden daha kolaydır.

Kaçınılması gereken bazı yaygın hatalar şunlardır:

Web sitenizi başlığa veya gövdeye eklemeyin. Tarayıcılar, bildirime alanınızı dahil eder. Bu nedenle alanınızı kopyalamayın.
Elinizdeki tüm bilgileri kullanın. Bir push mesajı, "Yeni Mesaj" başlığını ve "Mesajı okumak için burayı tıklayın" metnini kullanmak yerine kullanıcıya mesaj gönderdiği için bir push mesajı gönderirseniz "Can az önce yeni bir mesaj gönderdi" başlığını kullanın ve bildirimin gövdesini, iletinin bir kısmına ayarlayın.

Tarayıcılar ve özellik algılama

Bu yazının yazıldığı sırada Chrome ile Firefox arasında bildirimlere yönelik özellik desteği açısından oldukça büyük bir fark var.

Neyse ki window.Notification prototipine bakarak bildirim özelliklerinin desteklenip desteklenmediğini tespit edebilirsiniz.

Bir bildirimin işlem düğmelerini destekleyip desteklemediğini öğrenmek istediğimizi varsayalım. Bunun için aşağıdakileri yaparız:

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ştirebiliriz.

Diğer seçeneklerde, 'actions''yi istediğiniz parametre adıyla değiştirerek yukarıdaki işlemi uygulayın.