نمایش اعلان

Alexey Rodionov

Matt Gaunt

گزینه‌های اعلان به دو بخش تقسیم می‌شوند، یکی که به جنبه‌های بصری می‌پردازد (این بخش) و دیگری که جنبه‌های رفتاری اعلان‌ها را توضیح می‌دهد (بخش بعدی).

می‌توانید با گزینه‌های مختلف اعلان در مرورگرهای مختلف در پلاتفرم‌های مختلف بااستفاده از تولیدکننده اعلان پیتر بورلو بازی کنید.

گزینه‌های دیداری

میانای برنامه‌سازی کاربردی برای نمایش اعلان ساده است:

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

هر دو متغیر مستقل، title و options اختیاری هستند.

عنوان یک رشته است و گزینه‌ها می‌توانند هریک از موارد زیر باشند:

{
  "//": "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>",
}

بیایید گزینه‌های تصویری را بررسی کنیم:

گزینه‌های عنوان و متن

اعلان بدون عنوان و گزینه‌ها در Chrome در Windows به این شکل است:

همان‌طور که می‌بینید، نام مرورگر به‌عنوان عنوان و جای‌بان «اعلان جدید» به‌عنوان متن اعلان استفاده می‌شود.

اگر برنامه وب پیش‌رونده‌ای در دستگاه نصب شده باشد، به‌جای نام مرورگر از نام برنامه وب استفاده خواهد شد:

اگر کد زیر را اجرا کنیم:

const title = 'Simple Title';

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

registration.showNotification(title, options);

این اعلان را در Chrome در Linux دریافت می‌کنیم:

در Firefox در Linux به این شکل خواهد بود:

اعلان با نوشتار زیاد در عنوان و بدنه در Chrome در Linux به این شکل است:

Firefox در Linux متن اصلی را جمع می‌کند تا زمانی که نشانگر را روی اعلان نگه دارید، که باعث می‌شود اعلان ازهم باز شود:

همین اعلان‌ها در Firefox در Windows به این شکل است:

همان‌طور که می‌بینید، ممکن است یک اعلان در مرورگرهای مختلف متفاوت به‌نظر برسد. همچنین ممکن است در یک مرورگر در پلاتفرم‌های مختلف متفاوت به‌نظر برسد.

‫Chrome و Firefox از اعلان‌های سیستم و مرکز اعلان‌ها در پلاتفرم‌هایی که این موارد دردسترس هستند استفاده می‌کنند.

برای مثال، اعلان‌های سیستم در macOS از تصاویر و کنش‌ها (دکمه‌ها و پاسخ‌های درون‌خطی) پشتیبانی نمی‌کنند.

Chrome همچنین اعلان‌های سفارشی برای همه پلاتفرم‌های رایانه دارد. می‌توانید آن را با تنظیم پرچم chrome://flags/#enable-system-notifications روی حالت Disabled فعال کنید.

نماد

گزینه icon اساساً تصویر کوچکی است که می‌توانید در کنار عنوان و متن اصلی نشان دهید.

در کدتان باید نشانی وب تصویری را که می‌خواهید بار شود ارائه دهید:

const title = 'Icon Notification';

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

registration.showNotification(title, options);

این اعلان را در Chrome در Linux دریافت می‌کنید:

و در Firefox در Linux:

متأسفانه هیچ دستورالعمل مشخصی برای اندازه تصویر مورداستفاده برای نماد وجود ندارد.

به‌نظر می‌رسد Android تصویری با اندازه ۶۴dp می‌خواهد (که ۶۴px ضرب در نسبت پیکسل دستگاه است).

با فرض اینکه بالاترین نسبت پیکسل برای دستگاه ۳ باشد، اندازه نماد ۱۹۲ پیکسل یا بیشتر انتخاب مطمئنی است.

توجه: برخی‌از مرورگرها ممکن است نیاز داشته باشند که تصویر ازطریق HTTPS ارائه شود. اگر قصد دارید از تصویر شخص ثالث استفاده کنید، به این نکته توجه داشته باشید.

نشان

badge نماد تک‌رنگ کوچکی است که برای ارائه اطلاعات بیشتر به کاربر درباره منبع اعلان استفاده می‌شود:

const title = 'Badge Notification';

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

registration.showNotification(title, options);

درحال‌حاضر، این نشان فقط در Chrome در Android استفاده می‌شود.

در مرورگرهای دیگر (یا Chrome بدون نشان)، نماد مرورگر را خواهید دید.

همانند گزینه icon، هیچ دستورالعمل واقعی درباره اندازه مورداستفاده وجود ندارد.

با بررسی دستورالعمل‌های Android اندازه توصیه‌شده ۲۴ پیکسل ضرب در نسبت پیکسل دستگاه است.

یعنی تصویری با اندازه ۷۲ پیکسل یا بیشتر مناسب است (با فرض اینکه حداکثر نسبت پیکسل دستگاه ۳ باشد).

تصویر

از گزینه image می‌توان برای نمایش تصویر بزرگ‌تر به کاربر استفاده کرد. این روش به‌ویژه برای نمایش تصویر پیش‌نمایش به کاربر مفید است.

const title = 'Image Notification';

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

registration.showNotification(title, options);

در Chrome در Linux، اعلان به این شکل خواهد بود:

در Chrome در Android، برش و نسبت متفاوت است:

با توجه به تفاوت‌های نسبت بین رایانه و تلفن همراه، پیشنهاد دادن دستورالعمل بسیار دشوار است.

ازآنجایی‌که Chrome در رایانه فضای دردسترس را پر نمی‌کند و نسبت ۴:۳ دارد، شاید بهترین رویکرد ارائه تصویری با این نسبت و اجازه دادن به Android برای برش تصویر باشد. بااین‌حال، ممکن است گزینه image همچنان تغییر کند.

در Android، تنها رهنمود عرض ۴۵۰dp است.

بااستفاده از این دستورالعمل، تصویری با عرض ۱۳۵۰ پیکسل یا بیشتر گزینه خوبی خواهد بود.

کنش‌ها (دکمه‌ها)

می‌توانید actions را برای نمایش دکمه‌ها با اعلان تعریف کنید:

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

برای هر کنش می‌توانید title، action (که درواقع شناسه است)، icon، و type تعریف کنید. عنوان و نماد چیزی است که می‌توانید در اعلان ببینید. این شناسه هنگام تشخیص اینکه روی دکمه کنش کلیک شده است استفاده می‌شود (اطلاعات بیشتر درباره این موضوع در بخش بعدی). نوع می‌تواند حذف شود زیرا 'button' مقدار پیش‌فرض است.

درحال‌حاضر، فقط Chrome و Opera برای Android از کنش‌ها پشتیبانی می‌کنند.

در مثال بالا، چهار کنش تعریف شده است تا نشان دهد که می‌توانید کنش‌های بیشتری نسبت به آنچه نمایش داده می‌شود تعریف کنید. اگر می‌خواهید تعداد کنش‌هایی را که مرورگر نمایش خواهد داد بدانید، می‌توانید window.Notification?.maxActions را بررسی کنید:

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.';
}

در رایانه، نمادهای دکمه کنش رنگ‌هایشان را نمایش می‌دهند (دونات صورتی را ببینید):

در Android 6 و نسخه‌های قدیمی‌تر، نمادها با آرایش رنگ‌های سیستم مطابقت دارند:

در Android 7 و نسخه‌های جدیدتر، نمادهای کنش اصلاً نشان داده نمی‌شوند.

Chrome will hopefully change it's behavior on desktop to match Android (i.e. apply the appropriate color scheme to make the icons match the system look and feel). در این مدت، می‌توانید با انتخاب رنگ #333333 برای نمادهایتان، آن‌ها را با رنگ نوشتار Chrome مطابقت دهید.

همچنین شایان ذکر است که نمادها در Android واضح به‌نظر می‌رسند اما در رایانه نه.

بهترین اندازه‌ای که توانستم برای Chrome رایانه استفاده کنم ۲۴ پیکسل در ۲۴ پیکسل بود. متأسفانه این مورد در Android نامناسب به‌نظر می‌رسد.

روال مطلوبی که می‌توانیم از این تفاوت‌ها استخراج کنیم:

• از آرایش رنگ‌های ثابت برای نمادهایتان استفاده کنید تا حداقل همه نمادهایتان به‌طور ثابت به کاربر نشان داده شود.
• مطمئن شوید که در حالت تک‌رنگ کار می‌کنند، زیرا برخی پلاتفرم‌ها ممکن است آن‌ها را به این شکل نمایش دهند.
• اندازه را آزمایش کنید و ببینید چه چیزی برای شما مناسب است. ‫۱۲۸ پیکسل × ۱۲۸ پیکسل در Android برای من خوب کار می‌کند اما در رایانه کیفیت پایینی داشت.
• انتظار داشته باشید که نمادهای کنش شما اصلاً نمایش داده نشوند.

مشخصات اعلان درحال بررسی روشی برای تعریف چندین اندازه نماد است، اما به‌نظر می‌رسد مدتی طول می‌کشد تا در این مورد توافق شود.

کنش‌ها (پاسخ‌های به‌خط)

می‌توانید با تعریف کنشی با نوع 'text'، پاسخ درون‌خطی به اعلان اضافه کنید:

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 به این شکل خواهد بود:

با کلیک کردن روی دکمه کنش، فیلد ورودی نوشتار باز می‌شود:

می‌توانید جای‌بان را برای فیلد ورودی نوشتار سفارشی‌سازی کنید:

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

در Chrome در Windows، فیلد ورودی نوشتار همیشه بدون نیاز به کلیک کردن روی دکمه کنش قابل‌مشاهده است:

می‌توانید بیش‌از یک پاسخ به‌خط اضافه کنید یا دکمه‌ها و پاسخ‌های به‌خط را ترکیب کنید:

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

جهت

پارامتر dir به شما امکان می‌دهد مشخص کنید نوشتار در کدام جهت نمایش داده شود، راست به چپ یا چپ به راست.

در آزمایش، به‌نظر می‌رسید که جهت تا حد زیادی توسط نوشتار تعیین می‌شود تا این پارامتر. طبق مشخصات، این ویژگی برای پیشنهاد دادن به مرورگر درباره نحوه چیدمان گزینه‌هایی مثل کنش‌ها درنظر گرفته شده است، اما من تفاوتی ندیدم.

Probably best to define if you can, otherwise the browser should do the right thing according to the text supplied.

پارامتر باید روی auto، ltr، یا rtl تنظیم شود.

زبان راست به چپ مورداستفاده در Chrome در Linux به این شکل است:

در Firefox (وقتی نشانگر را روی آن نگه می‌دارید) این را دریافت خواهید کرد:

لرزیدن

احتیاط: پشتیبانی از vibrate در Android 8 و نسخه‌های جدیدتر منسوخ شده است.

گزینه لرزش به شما امکان می‌دهد الگوی لرزشی را تعریف کنید که هنگام نمایش اعلان اجرا می‌شود، با فرض اینکه تنظیمات فعلی کاربر اجازه لرزش را می‌دهد (یعنی دستگاه در حالت بی‌صدا نیست).

قالب گزینه لرزش باید آرایه‌ای از اعداد باشد که تعداد میلی‌ثانیه‌هایی را که دستگاه باید بلرزد، و به‌دنبال آن تعداد میلی‌ثانیه‌هایی را که دستگاه باید نلرزد توصیف کند.

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

این تنظیم فقط بر دستگاه‌هایی تأثیر می‌گذارد که از لرزش پشتیبانی می‌کنند.

صدا

پارامتر صدا به شما امکان می‌دهد صدایی را برای پخش هنگام دریافت اعلان تعریف کنید.

درحال‌حاضر هیچ مرورگری از این گزینه پشتیبانی نمی‌کند.

const title = 'Sound Notification';

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

registration.showNotification(title, options);

مُهر زمان

مُهر زمان به شما امکان می‌دهد زمان وقوع رویدادی را که منجر به ارسال اعلان لحظه‌ای شده است به پلاتفرم اطلاع دهید.

‫timestamp باید تعداد میلی‌ثانیه‌ها از ساعت ۰۰:۰۰:۰۰ UTC (ساعت هماهنگ جهانی) باشد که ۱ ژانویه ۱۹۷۰ است (که مبدأ یونیکس است).

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

روال‌های مطلوب تجربه کاربری

بزرگ‌ترین شکست UX که در اعلان‌ها دیده‌ام، عدم‌وضوح در اطلاعات نمایش‌داده‌شده توسط اعلان است.

باید درنظر بگیرید که چرا در وهله اول پیام لحظه‌ای را ارسال کرده‌اید و مطمئن شوید که از همه گزینه‌های اعلان استفاده شده است تا به کاربران کمک کند متوجه شوند چرا آن اعلان را می‌خوانند.

راستش را بخواهید، دیدن نمونه‌ها و فکر کردن به اینکه «من هرگز چنین اشتباهی نمی‌کنم» آسان است. اما افتادن در این تله آسان‌تر از آن است که فکر می‌کنید.

برخی‌از تله‌های رایج که باید از آن‌ها اجتناب کنید:

• وب‌سایتتان را در عنوان یا متن قرار ندهید. مرورگرها دامنه شما را در اعلان لحاظ می‌کنند، بنابراین آن را تکرار نکنید.
• از همه اطلاعاتی که دردسترس دارید استفاده کنید. اگر پیام لحظه‌ای ارسال می‌کنید چون فردی به کاربری پیام ارسال کرده است، به‌جای استفاده از عنوان «پیام جدید» و متن «برای خواندن آن، اینجا کلیک کنید»، از عنوان «جان پیام جدیدی ارسال کرد» استفاده کنید و متن اعلان را روی بخشی از پیام تنظیم کنید.

مرورگرها و تشخیص ویژگی

در زمان نوشتن این مقاله، تفاوت نسبتاً بزرگی بین Chrome و Firefox ازنظر پشتیبانی از ویژگی‌های اعلان‌ها وجود دارد.

خوشبختانه، می‌توانید با نگاه کردن به نمونه اولیه window.Notification، پشتیبانی از ویژگی‌های اعلان را تشخیص دهید.

فرض کنید می‌خواهیم بدانیم آیا اعلانی از دکمه‌های کنش پشتیبانی می‌کند یا نه، دراین‌صورت کارهای زیر را انجام می‌دهیم:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

با این کار، می‌توانیم اعلانی را که به کاربرانمان نشان می‌دهیم تغییر دهیم.

برای گزینه‌های دیگر، همان مراحل بالا را انجام دهید و 'actions' را با نام پارامتر موردنظر جایگزین کنید.

مقصد بعدی کجاست

• نمای کلی اعلان لحظه‌ای وب
• نحوه عملکرد Push
• مشترک کردن کاربر
• تجربه کاربری اجازه
• ارسال پیام با کتابخانه‌های Web Push
• پروتکل فشاری وب
• مدیریت رویدادهای Push
• نمایش اعلان
• رفتار اعلان
• الگوهای اعلان رایج
• پرسشگان اعلان‌های لحظه‌ای
• مشکلات رایج و گزارش کردن اشکال‌ها

Code labs

• ساختن کارخواه اعلان لحظه‌ای
• ساختن سرور اعلان لحظه‌ای