رفتار اعلان

Alexey Rodionov

Matt Gaunt

تا اینجا، گزینه‌هایی را بررسی کردیم که ظاهر دیداری اعلان را تغییر می‌دهند. همچنین گزینه‌هایی وجود دارد که رفتار اعلان‌ها را تغییر می‌دهد.

به‌طور پیش‌فرض، تماس با showNotification() فقط با گزینه‌های دیداری رفتارهای زیر را خواهد داشت:

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

در این بخش، می‌خواهیم ببینیم چگونه می‌توانیم این رفتارهای پیش‌فرض را فقط بااستفاده از گزینه‌ها تغییر دهیم. پیاده‌سازی و بهره‌برداری از این موارد نسبتاً آسان است.

رویداد کلیک اعلان

وقتی کاربر روی اعلانی کلیک می‌کند، رفتار پیش‌فرض این است که اتفاقی نیفتد. حتی اعلان را نمی‌بندد یا برنمی‌دارد.

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

برای دستیابی به این هدف، باید یک شنونده رویداد 'notificationclick' به سرویس‌کار ما اضافه کنید. هرگاه روی اعلانی کلیک شود، این فراخوانده می‌شود.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

همان‌طور که در این مثال می‌بینید، اعلانی که روی آن کلیک شده است می‌تواند به‌صورت event.notification دردسترس باشد. از این طریق می‌توانید به ویژگی‌ها و روش‌های اعلان دسترسی پیدا کنید. در این مورد، روش close() آن را فراخوانی می‌کنید و کار بیشتری انجام می‌دهید.

هشدار: برای اینکه وقتی کدتان مشغول است سرویس‌کار همچنان اجرا شود، باید از event.waitUntil() استفاده کنید.

کنش‌ها

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

دکمه‌ها

در بخش قبلی، نحوه تعریف دکمه‌های کنش را هنگام فراخوانی showNotification() دیدید:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      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);

اگر کاربر روی دکمه کنش کلیک کند، مقدار event.action را در رویداد noticationclick بررسی کنید تا متوجه شوید روی کدام دکمه کنش کلیک شده است.

event.action حاوی مقدار action تنظیم‌شده در گزینه‌ها خواهد بود. در مثال بالا، مقادیر event.action یکی از موارد زیر خواهد بود: 'coffee-action'، 'doughnut-action'، 'gramophone-action' یا 'atom-action'.

با این کار، کلیک‌های اعلان یا کلیک‌های کنش را به‌این‌صورت شناسایی می‌کنیم:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

پاسخ‌های به‌خط

همچنین، در بخش قبلی، نحوه افزودن پاسخ درون‌خطی به اعلان را دیدید:

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

event.reply حاوی مقداری خواهد بود که کاربر در فیلد ورودی تایپ کرده است:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

برچسب

گزینه tag اساساً یک شناسه رشته‌ای است که اعلان‌ها را باهم «گروه‌بندی» می‌کند و روشی آسان برای تعیین نحوه نمایش چندین اعلان به کاربر ارائه می‌دهد. توضیح این موضوع با یک مثال بسیار آسان‌تر است.

بیایید اعلانی را نمایش دهیم و برچسب 'message-group-1' را به آن اختصاص دهیم. اعلان را با این کد نمایش می‌دهیم:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

که اولین اعلان ما را نشان می‌دهد.

بیایید اعلان دومی را با برچسب جدید 'message-group-2' نمایش دهیم، مانند این:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

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

اکنون بیایید اعلان سومی را نشان دهیم اما از اولین برچسب 'message-group-1' دوباره استفاده کنیم. با این کار، اعلان اول بسته می‌شود و اعلان جدید ما جایگزین آن می‌شود.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

اکنون دو اعلان داریم، هرچند showNotification() سه بار فراخوانی شده است.

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

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

اینجا است که گزینه renotify وارد می‌شود.

اعلان مجدد

این موضوع در زمان نوشتن این مطلب عمدتاً برای دستگاه‌های همراه صدق می‌کند. با تنظیم این گزینه، اعلان‌های جدید می‌لرزند و صدای سیستم را پخش می‌کنند.

در برخی سناریوها ممکن است بخواهید اعلان جایگزین به‌جای به‌روزرسانی بی‌صدا، به کاربر اطلاع دهد. برنامه‌های گپ نمونه خوبی هستند. دراین‌صورت، باید tag و renotify را روی true تنظیم کنید.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

هشدار: اگر renotify را روی true در اعلانی بدون tag تنظیم کنید، خطای زیر را دریافت خواهید کرد: TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

بی‌صدا

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

اگر اعلان‌هایتان به توجه فوری کاربر نیاز ندارد، این گزینه ایده‌آل است.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

توجه: اگر هم silent و هم renotify را تعریف کنید، silent اولویت خواهد داشت.

به تعامل نیاز دارد

‫Chrome در رایانه اعلان‌ها را برای مدت زمان مشخصی نشان می‌دهد و سپس آن‌ها را پنهان می‌کند. ‫Chrome در Android این رفتار را ندارد. اعلان‌ها تا زمانی‌که کاربر با آن‌ها تعامل برقرار کند نمایش داده می‌شوند.

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

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

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

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

Code labs

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