Bildirim gösterme

Alexey Rodionov

Matt Gaunt

Bildirim seçenekleri iki bölüme ayrılmıştır. Bir bölümde görsel özellikler (bu bölüm), diğer bölümde ise bildirimlerin davranışsal özellikleri (sonraki bölüm) açıklanmaktadır.

Peter Beverloo'nun Notification Generator aracını kullanarak çeşitli platformlardaki çeşitli tarayıcılarda çeşitli bildirim seçeneklerini deneyebilirsiniz.

Görsel seçenekler

Bildirim göstermek için kullanılan API basittir:

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

title ve options bağımsız değişkenlerinin ikisi de 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

Windows'da Chrome'da başlık ve seçenekler olmadan bir bildirim şu şekilde 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ığımızı varsayalım:

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'ta Firefox'ta şu şekilde görünür:

Başlık ve gövde kısmında çok fazla metin bulunan bildirim, Linux'ta Chrome'da şu şekilde görünür:

Linux'ta Firefox, siz bildirimin üzerine gelene kadar gövde metnini daraltır. Bu durumda bildirim genişler:

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

Gördüğünüz gibi, aynı bildirim farklı tarayıcılarda farklı görünebilir. Ayrıca, farklı platformlarda aynı tarayıcıda farklı görünebilir.

Chrome ve Firefox, sistem bildirimlerini ve bildirim merkezini, bunların kullanılabildiği platformlarda 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 belirtmeniz gerekir:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Linux'ta Chrome'da şu bildirimi alırsınız:

Linux'ta Firefox'ta:

Maalesef simge için kullanılacak resim boyutuyla ilgili kesin kurallar yoktur.

Android, 64 dp'lik bir resim istiyor gibi görünüyor (bu, cihaz piksel oranıyla çarpılan 64 pikseldir).

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

Not: Bazı tarayıcılar, resmin HTTPS üzerinden sunulmasını gerektirebilir. Üçüncü taraf bir resim kullanmayı planlıyorsanız bu durumu göz önünde bulundurun.

Rozet

badge, kullanıcıya bildirimin nereden geldiği hakkında 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 makalenin yazıldığı sırada rozet yalnızca Android'deki Chrome'da kullanılmaktadır.

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

icon seçeneğinde olduğu gibi, hangi boyutun kullanılacağına dair gerçek bir kural yoktur.

Android yönergelerini incelediğimizde önerilen boyutun 24 piksel ile cihaz piksel oranının çarpımı olduğunu görüyoruz.

Yani 72 piksel veya daha büyük bir resim yeterli olacaktır (maksimum cihaz piksel oranının 3 olduğu varsayılırsa).

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 önizleme resmi göstermek için kullanışlıdır.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Linux'ta Chrome'da bildirim şu şekilde görünür:

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

Masaüstü ve mobil arasındaki oran farklılıkları nedeniyle yönergeler önermek son derece zordur.

Masaüstünde Chrome, mevcut alanı doldurmadığından ve 4:3 oranına sahip olduğundan, belki de 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 genişliktir.

Bu kurala göre, genişliği 1.350 piksel veya daha fazla olan bir resim iyi bir seçim olacaktır.

İşlemler (düğmeler)

Bildirimle birlikte düğme göstermek için actions 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 (aslında bir kimliktir), bir icon ve bir type tanımlayabilirsiniz. Bildirimde başlığı ve simgeyi görebilirsiniz. Kimlik, işlem düğmesinin tıklandığını algılamak için kullanılır (bu konuda 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 Android için Chrome ve Opera, işlemleri desteklemektedir.

Yukarıdaki örnekte, gösterilecek olandan daha fazla işlem tanımlayabileceğinizi göstermek için dört işlem tanımlanmıştır. Tarayıcı tarafından gösterilecek işlem sayısını öğrenmek istiyorsanız window.Notification?.maxActions değerini 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 simit simgesine 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'un masaüstündeki davranışını Android'e uyacak şekilde değiştirmesini umuyoruz (ör. simgelerin sistemin görünümüne ve tarzına uyması için uygun renk şemasını uygulama). Bu süre zarfında, simgelerinizin rengini #333333 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 gerekir.

Masaüstü Chrome'da çalıştırabildiğim en iyi boyut 24 piksel x 24 pikseldi. Bu, Android'de maalesef uygunsuz görünüyor.

Bu farklılıklardan çıkarabileceğimiz en iyi uygulama şudur:

• Simgeleriniz için tutarlı bir renk şeması kullanın. Böylece en azından tüm simgeleriniz kullanıcıya tutarlı bir şekilde gösterilir.
• Bazı platformlar simgeleri tek renkli olarak gösterebileceğinden, simgelerin tek renkli olarak da düzgün göründüğünden emin olun.
• Boyutu test edin ve sizin için en uygun olanı bulun. 128 piksel × 128 piksel, Android'de iyi sonuç veriyor ancak masaüstünde kalite düşük.
• İşlem simgeleriniz hiç gösterilmeyebilir.

Bildirim spesifikasyonu, birden fazla boyutta simge tanımlamanın bir yolunu araştırıyor ancak bu konuda bir karara varılması biraz zaman alacak gibi görünüyor.

İşlemler (satır iç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);

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

İşlem düğmesi tıklandığında bir metin giriş alanı açılır:

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);

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

Birden fazla satır içi yanıt ekleyebilir veya düğmelerle 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österileceğini tanımlamanıza olanak tanır.

Testlerde, yönün bu parametreden ziyade büyük ölçüde metin tarafından belirlendiği görüldü. Spesifikasyona göre bu, tarayıcıya işlemler gibi seçeneklerin nasıl düzenleneceğini önermek için tasarlanmıştır 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 olanı yapmalıdır.

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

Linux'ta Chrome'da kullanılan sağdan sola yazılan bir dil şu şekilde görünür:

Firefox'ta (fareyle üzerine gelindiğinde) şu görünür:

Titreşim

Dikkat: vibrate desteği Android 8 ve sonraki sürümlerde kullanımdan kaldırılmıştır.

Titreşim seçeneği, kullanıcının mevcut ayarlarının titreşime izin vermesi (ör. cihazın sessiz modda olmaması) durumunda bildirim gösterildiğinde çalışacak bir titreşim deseni tanımlamanıza olanak tanır.

Titreşim seçeneğinin biçimi, cihazın kaç milisaniye titreşmesi gerektiğini ve ardından kaç milisaniye titreşmemesi gerektiğini 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 ayar 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ığı tarih itibarıyla hiçbir tarayıcı bu seçeneği desteklememektedir.

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önderilmesine neden olan etkinliğin gerçekleştiği zamanı platforma bildirmenize olanak tanır.

timestamp, 1 Ocak 1970 00:00:00 UTC'den (UNIX epoch) bu yana geçen 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 ilgili en iyi uygulamalar

Bildirimlerle ilgili gördüğüm en büyük kullanıcı deneyimi hatası, bildirimde gösterilen bilgilerin yeterince spesifik olmaması.

Öncelikle push mesajını neden gönderdiğinizi düşünmeli ve kullanıcıların 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örüp "Ben asla böyle bir hata yapmam" diye düşünmek kolaydır. Ancak bu tuzağa düşmek sandığınızdan daha kolaydır.

Kaçınılması gereken yaygın hatalar:

• Başlığa veya gövdeye web sitenizi eklemeyin. Tarayıcılar, alan adınızı bildirime ekler. Bu nedenle alan adınızı tekrarlamayın.
• Elinizdeki tüm bilgileri kullanın. Bir kullanıcıya mesaj gönderildiği için push mesajı gönderiyorsanız "Yeni Mesaj" başlığını ve "Okumak için burayı tıklayın" gövdesini kullanmak yerine "Can yeni bir mesaj gönderdi" başlığını kullanın ve bildirimin gövdesini mesajın bir bölümü olarak ayarlayın.

Tarayıcılar ve özellik algılama

Bu makalenin yazıldığı sırada, bildirimler için özellik desteği açısından Chrome ile Firefox arasında oldukça büyük bir fark vardır.

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

Bir bildirimin işlem düğmelerini destekleyip desteklemediğini öğrenmek istediğimizi varsayalım. Bu durumda 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, yukarıdaki adımları uygulayın ve 'actions' yerine istediğiniz parametre adını yazın.

Sonraki adımlar

• Web Push Bildirimlerine Genel Bakış
• Push'un İşleyiş Şekli
• Kullanıcı abone etme
• İzin kullanıcı deneyimi
• Web Push kitaplıklarıyla mesaj gönderme
• Web Push Protokolü
• Push etkinliklerini işleme
• Bildirim gösterme
• Bildirim Davranışı
• Yaygın Bildirim Kalıpları
• Push bildirimleri ile ilgili SSS
• Sık Karşılaşılan Sorunlar ve Hata Bildirme

Kod laboratuvarları

• Push bildirimi istemcisi oluşturma
• Push bildirimi sunucusu oluşturma