اقدامات اعلان در Chrome 48

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

در حالی که بسیار خوب است که می‌توانید این پیام‌ها را ارسال کنید، تنها کاری که می‌توانستید با آن انجام دهید این بود که روی آن کلیک کنید و صفحه‌ای را باز کنید یا آن را به طور کامل رد کنید.

اگر به اعلان‌های ارائه‌شده به‌طور بومی برای برنامه‌های پلتفرم‌های تلفن همراه مانند iOS و Android نگاه کنید، هر کدام به توسعه‌دهنده اجازه می‌دهند تا اقدامات متنی را که کاربر می‌تواند فراخوانی کند و با آنها تعامل داشته باشد، تعریف کند. در Chrome 48 ما اکنون یک قابلیت مشابه را به Web Notifications در سراسر دسکتاپ و Chrome for Android اضافه کرده ایم.

اسکرین شات اعلان

افزودن به API بسیار ساده است. شما فقط باید یک آرایه از اقدامات ایجاد کنید و آنها را به شی NotificationOptions اضافه کنید زمانی که showNotification از یک ثبت نام ServiceWorker فرا می‌خوانید (مستقیماً در ServiceWorker یا در یک صفحه از طریق navigator.serviceWorker.ready ).

در حال حاضر Chrome فقط از دو عملکرد در هر اعلان پشتیبانی می‌کند. برخی از پلتفرم‌ها ممکن است قادر به پشتیبانی بیشتر باشند و برخی از پلتفرم‌ها ممکن است کمتر یا اصلاً پشتیبانی نکنند. می‌توانید با علامت زدن Notification.maxActions مشخص کنید که پلتفرم از چه چیزی پشتیبانی می‌کند. در مثال‌های زیر فرض می‌کنیم که پلتفرم از دو عمل پشتیبانی می‌کند.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

این یک اعلان ساده با دو دکمه ایجاد می کند. توجه داشته باشید، اضافه کردن آیکون‌ها به طور مستقیم به عمل امکان‌پذیر نیست ( هنوز )، اما می‌توانید از Emoji و مجموعه کاراکتر یونیکد توسعه‌یافته برای افزودن متن بیشتر به دکمه‌های اعلان‌های خود استفاده کنید.

به عنوان مثال:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

اکنون که یک اعلان ایجاد کرده اید و به نظر می رسد 😻، کاربر ممکن است در زمانی در آینده با اعلان تعامل داشته باشد. تعاملات با اعلان در حال حاضر (از Chrome 48) از طریق رویداد notificationclick ثبت شده در سرویس‌کار شما انجام می‌شود و می‌تواند یک کلیک کلی روی اعلان یا یک ضربه خاص روی یکی از دکمه‌های عملکرد باشد. نکته جانبی، در آینده نیز می‌توانید به رویداد notificationclose پاسخ دهید.

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

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

نکته جالب این است که اکشن ها نیازی به باز کردن یک پنجره جدید ندارند، آنها می توانند تعاملات کلی برنامه را بدون ایجاد رابط کاربری انجام دهند. به عنوان مثال، یک کاربر می‌تواند یک پست رسانه اجتماعی را «لایک» یا «حذف» کند که این عمل را روی داده‌های محلی کاربر انجام می‌دهد و سپس آن را بدون باز کردن رابط کاربری با ابر همگام‌سازی می‌کند (اگرچه تمرین خوبی است که تغییر داده‌ها را به پیام ارسال کنید. هر پنجره ای باز شود تا UI بتواند به روز شود). برای اقدامی که نیاز به تعامل کاربر دارد، پنجره ای را برای پاسخ کاربر باز می کنید.

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

اگر می‌خواهید امروز این مورد را در عمل ببینید، تست اعلان‌های پیتر بورلو را بررسی کنید و مشخصات Notifications را بخوانید یا با به‌روزرسانی مشخصات آن را دنبال کنید .