Bildirim Görüntüleme

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:

Bir bildirimin kullanıcı arayüzünün diseksiyonu.

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:

Windows&#39;da Chrome&#39;da başlık ve seçenekler içermeyen bildirim.

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:

Bildirimde tarayıcı adı yerine web uygulaması adı gösteriliyor.

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&#39;taki Chrome&#39;da başlık ve gövde metni içeren bildirim.

Linux'taki Firefox'ta bu görünüm aşağıdaki gibi olacaktır:

Linux&#39;taki Firefox&#39;ta başlık ve gövde metni içeren bildirim.

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

Linux&#39;taki Chrome&#39;da, uzun başlık ve gövde metni içeren bildirim.

Linux'taki Firefox, siz bildirimin üzerine gelinceye dek gövde metnini daraltır ve bildirimin genişlemesine neden olur:

Linux&#39;taki Firefox&#39;ta uzun başlık ve gövde metni içeren bildirim.

Linux&#39;ta Firefox’ta fare imleçle bildirimin üzerine gelindiğinde, uzun başlık ve gövde metni içeren bildirim.

Windows'daki Firefox'ta da aynı bildirimler aşağıdaki gibi görünür:

Windows&#39;daki Firefox&#39;ta başlık ve gövde metni içeren bildirim.

Windows&#39;daki Firefox&#39;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, 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:

Linux&#39;taki Chrome&#39;da simgeli bildirim.

ve Linux'taki Firefox'ta:

Linux&#39;taki Firefox&#39;ta simgeli bildirim.

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.

Android&#39;deki Chrome&#39;da rozetli bildirim.

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

Android&#39;deki Firefox&#39;ta rozetli bildirim.

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:

Linux&#39;taki Chrome&#39;da resimli bildirim.

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

Android&#39;deki Chrome&#39;da resimli bildirim.

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

Linux&#39;taki Chrome&#39;da işlem düğmeleriyle bildirim.

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

Android için Chrome&#39;da işlem düğmeleriyle bildirim.

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:

Android&#39;de yanıtla işlem düğmesi olan bildirim.

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

Android&#39;de, metin giriş alanı açık bildirim.

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

Android&#39;de, metin giriş alanı için özelleştirilmiş yer tutucu içeren bildirim.

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

Windows&#39;da metin giriş alanı ve yanıtla işlem düğmesi bulunan bildirim.

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

Windows&#39;da metin giriş alanı ve iki işlem düğmesi bulunan bildirim.

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:

Linux&#39;taki Chrome&#39;da, sağdan sola yazılan dilde bildirim.

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

Linux&#39;taki Firefox&#39;ta sağdan sola yazılan dilde bildirim.

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

Code Labs