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

Bildirim Görüntüleme

Alexey Rodionov

Matt Gaunt

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

Çeşitli tarayıcılarda, çeşitli platformlarda çeşitli bildirim seçeneklerini kullanarak denemeler yapabilirsiniz. Peter Beverloo'nun Bildirim Oluşturma Aracı.

Görsel Seçenekler

Bildirim gösterme API'si basittir:

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

Her iki bağımsız değişken de (title ve options) 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ü diseksiyonu.

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

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

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

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

Cihazda bir progresif web uygulaması yüklüyse bunun yerine web uygulaması adı kullanılır yazın:

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

Linux'ta Firefox'ta şu şekilde görünür:

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

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

Linux'taki Chrome'da uzun başlık ve gövde metniyle bildirim.

Linux'ta Firefox, siz bildirimin üzerine gelinceye kadar gövde metnini daraltır. Bu da bildirimi genişletin:

Linux'ta Firefox'ta uzun başlık ve gövde metniyle bildirim.

Linux'ta Firefox'ta fare imleciyle bildirimin üzerine geldiğinizde uzun başlık ve gövde metniyle bildirim.

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

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

Windows'da Firefox'ta uzun başlık ve gövde metniyle bildirim.

Görebileceğiniz gibi, aynı bildirim farklı tarayıcılarda farklı görünebilir. Bunun için farklı platformlarda aynı tarayıcıda farklı şekilde çalışır.

Chrome ve Firefox, bu platformların gerçekleştirildiği platformlarda sistem bildirimlerini ve bildirim merkezini kullanır. kullanılabilir.

Örneğin, macOS'teki sistem bildirimleri resimleri ve işlemleri (düğmeler ve satır içi yanıt).

Chrome'un tüm masaüstü platformları için özel bildirimleri de vardır. Bu özelliği Disabled durumuna chrome://flags/#enable-system-notifications işareti.

Simge

icon seçeneği, aslında başlığın 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:

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

Android 64 dp resim istiyor (cihazın piksel oranının 64 piksel katı).

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

Rozet

badge, kullanıcılara biraz daha fazla bilgi göstermek için kullanılan, tek renkli küçük bir simgedir. bildirimin nereden geldiği hakkında kullanıcı:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

Rozetin yazıldığı sırada yalnızca Android cihazlardaki Chrome uygulamasında kullanılmaktadır.

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

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

Android yönergelerini inceleme önerilen boyut, cihazın piksel oranının 24 pikselle çarpımıdır.

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

Resim

Kullanıcıya daha büyük bir resim göstermek için image seçeneği kullanılabilir. Bu, özellikle kullanıcıya bir önizleme resmi göstermek kullanışlı olabilir.

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'deki Chrome uygulamasında resimli bildirim.

Masaüstü ve mobil cihazlar arasındaki oran farkları düşünüldüğünde, bunu önermek son derece zordur. aykırıdır.

Masaüstündeki Chrome, mevcut alanı doldurmadığından ve 4:3 oranına sahip olduğundan belki de en iyisi yaklaşımı bu oranda 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önergeler 450 dp genişliğinde olmalıdır.

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

İşlemler (Düğmeler)

Bildirim içeren düğmeleri görüntülemek 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, bir action (aslında bir kimliktir), bir icon ve type. Bildirimde görebileceğiniz simge, başlık ve simgedir. Kimlik, şu durumlarda kullanılır: (bununla ilgili daha fazla bilgiyi bir sonraki bölümde bulabilirsiniz). Tür 'button' varsayılan değer olduğundan atlanabilir.

Yazıldığı sırada yalnızca Chrome ve Android için Opera destek işlemleri.

Yukarıdaki örnekte, aşağıdakilerden daha fazla işlem tanımlayabileceğinizi göstermek için tanımlanan dört işlem vardır: bir metin görüntülenir. Tarayıcının görüntüleyeceği işlem sayısını bilmek isterseniz 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 renkleri görüntülenir (pembe halkaya bakın):

Linux'taki Chrome'da işlem düğmeleri bulunan bildirim.

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

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

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

Chrome, masaüstündeki davranışını Android'le eşleşecek şekilde değiştireceğini (ör. uygun renk şeması seçin). Bu arada simgelerinizi #333333 renkte yaparak Chrome'un metin rengiyle eşleşebilir.

Ayrıca, simgelerin Android'de net göründüğü ancak masaüstünde kaydedilmediği unutulmamalıdır.

Masaüstü Chrome'da çalışmaya başlayabileceğim en iyi boyut 24 x 24 pikseldi. Maalesef yanlış görünüyor elde etti.

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

En azından tüm simgelerinizin tutarlı olması için simgelerinizde tutarlı bir renk şemasına bağlı kalın kullanıcıya gösterilir.
Bazı platformlarda bu şekilde görüntülenebileceği için bu reklamların tek renkli olarak çalıştığından emin olun.
Boyutu test edin ve hangisinin size uygun olduğunu görün. 128 piksel × 128 piksel Android'de iyi performans gösteriyor ancak kötüydü ve masaüstünde kaliteli bir deneyim sunar.
İşlem simgeleriniz hiç gösterilmez.

Bildirim spesifikasyonunda, simgelerin birden çok boyutunu tanımlamanın bir yolu üzerinde çalışılıyor. Ancak görünüşe göre belirli bir süre geçmesi gerekir.

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

'text' türüyle 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 aşağıdaki gibi görünür:

Android'de, yanıtlama işlem düğmesi bulunan bildirim.

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

Android'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'de, metin giriş alanı için özelleştirilmiş yer tutucu içeren bildirim.

Windows işletim sistemi Chrome'da, metin giriş alanı işlemi tıklamak zorunda kalmadan her zaman görünür durumdadır. düğme:

Windows'da metin giriş alanı ve yanıtla işlem düğmesi içeren 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'da bir metin giriş alanı ve iki işlem düğmesi bulunan bildirim.

Yön

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

Test sırasında, yön büyük oranda bu metinden ziyade metinle belirlendiği anlaşıldı. parametresinden sonra bir değer girin. Spesifikasyona göre bu, tarayıcıya düzen seçeneklerinin nasıl kullanılacağını önermek için tasarlanmıştır. gibi görünüyor ama ben hiçbir fark görmedim.

Mümkünse bunu tanımlamak en iyisidir. Aksi takdirde tarayıcı, metin olarak görünür.

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

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

Linux'taki Chrome'da sağdan sola yazılan bir dilde bildirim.

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

Linux'taki Firefox'ta sağdan sola dilde bildirim.

Titreşim

Titreşim seçeneği, bir bildirim alındığında çalışacak bir titreşim deseni tanımlamanıza olanak sağlar. olduğu varsayılırsa (kullanıcının mevcut ayarlarının titreşime izin verdiğini) sessiz moda göre kullanılabilir).

Titreşim seçeneğinin biçimi, cihazın numarasını tanımlayan bir sayı dizisi olmalıdır cihazın titreşmesi gereken milisaniye ve ardından cihazın kaç milisaniye titremesi gerektiğini titreşmez.

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 yazının 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ı, aktarıma yol açan bir etkinliğin ne zaman gerçekleştiğini platforma bildirmenize olanak tanır. bildirim gönderiliyor.

timestamp, 00:00:00 UTC'den (1 Ocak 1970) sonraki milisaniye sayısı olmalıdır. (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ı Deneyimiyle İlgili En İyi Uygulamalar

Bildirimlerde gördüğüm en büyük kullanıcı deneyimi hatası, bilgilerin net olmamasıydı bir bildirimle görüntülenir.

En başta neden push mesajını gönderdiğinizi düşünmeli ve tüm bilgilerin bildirim seçenekleri, kullanıcıların bu bildirimi neden okuduklarını anlamalarına yardımcı olmak için kullanılır.

Dürüst olmak gerekirse, insanların kolayca bazı örnekler görüp "Bu hatayı yapmayacağım" düşünülebilir. Ancak daha kolay sandığınızdan daha çok zorlanırlar.

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

Web sitenizi başlığa veya gövdeye koymayın. Tarayıcılar, Bu bildirimi kopyalamayın.
Elinizdeki tüm bilgileri kullanın. Bir kullanıcı aslında , 'Yeni Mesaj' başlığını kullanmak yerine bir kullanıcıya ileti gönderdi 'Şunun için burayı tıklayın: oku." 'Can az önce yeni bir ileti gönderdi' başlığını kullan ve bildirimin gövdesini bir kısmı olabilir.

Tarayıcılar ve özellik algılama

Bu yazının yazıldığı zaman, Chrome ile Firefox arasında güvenlik açısından bakıldığında oldukça büyük bir fark var. Bildirimler için özellik desteği.

Neyse ki window.Notification oluşturacaksınız.

Bir bildirimin işlem düğmelerini destekleyip desteklemediğini öğrenmek istediğimizi varsayalım. Örneğin:

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ıdakiyle aynı işlemi yapın ve 'actions' değerini istediğiniz değerle değiştirin parametre adı.