اعلان‌های PPush به شما این امکان را می‌دهند که تجربه‌ای عالی مانند برنامه را برای کاربران خود فراهم کنید و به‌روزرسانی‌های مهم و به موقع مانند پیام‌های چت دریافتی را به آنها هشدار دهید. پلتفرم اعلان در مرورگرها نسبتاً جدید است و با افزایش موارد استفاده و الزامات بیشتر، شاهد افزودن‌های زیادی به APIها برای اعلان‌ها هستیم. کروم 50 (بتا در مارس 2016) نیز از این قاعده مستثنی نیست، با کمتر از چهار ویژگی جدید که به توسعه دهندگان کنترل بیشتری بر اعلان ها می دهد. شما این توانایی را به دست می آورید که:
- اضافه کردن آیکون به دکمه های اعلان،
- برای کمک به ایجاد یک تجربه ثابت، مهر زمانی را تغییر دهید،
- ردیابی رویدادهای بستن اعلان برای کمک به همگام سازی اعلان ها و ارائه تجزیه و تحلیل،
- هنگامی که یک اعلان جایگزین اعلان نمایش داده شده فعلی می شود، تجربه renotify را مدیریت کنید.
Chrome 50 همچنین Payloads را برای Push Notifications اضافه کرده است. برای به‌روز ماندن با Notifications API همانطور که در Chrome پیاده‌سازی می‌شود، مشخصات و ردیاب مشکل مشخصات را دنبال کنید.
با آیکون های سفارشی دکمه های عمل قانع کننده ایجاد کنید
در یک پست اخیر در مورد دکمه‌های اعلان در Chrome 49 ، اشاره کردم که نمی‌توانید تصاویر را به دکمه‌های اعلان پیوست کنید تا جذاب و جذاب شوند، اما می‌توانید از کاراکترهای یونیکد برای درون‌سازی ایموجی‌ها و غیره استفاده کنید. حالا دیگر لازم نیست نگرانی: با این افزوده اخیر، اکنون می توانید یک تصویر را در دکمه عمل مشخص کنید:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
ظاهر نماد عمل بر اساس پلتفرم متفاوت است. به عنوان مثال، در اندروید آیکون دارای یک فیلتر خاکستری تیره در Lollipop و بالاتر و یک فیلتر سفید قبل از Lollipop خواهد بود، در حالی که در دسکتاپ تمام رنگی خواهد بود. (توجه: در مورد آینده این مورد در دسکتاپ بحث وجود دارد.) برخی از پلتفرم ها ممکن است حتی نتوانند نمادهای کنش را نمایش دهند، بنابراین مطمئن شوید که از نمادها برای ارائه زمینه به عمل استفاده می کنید و نه به عنوان تنها نشانگر هدف. .
و در نهایت، به دلیل اینکه منابع باید دانلود شوند، تمرین خوبی است که آیکون ها را تا حد امکان کوچک نگه دارید و آنها را در رویداد نصب خود پیش کش کنید. (در زمان نگارش این مقاله، واکشی منابع اعلان در کروم هنوز از طریق سرویس‌کار هدایت نشده است.)
رویدادهای بستن اعلان
یکی از ویژگی‌های درخواستی مکرر اعلان‌ها این است که بدانیم چه زمانی کاربر یک اعلان را رد کرده است. ما هیچ راهی برای انجام این کار نداشتیم تا اینکه مجموعه ای از تغییرات اخیر در مشخصات اعلان یک رویداد notificationclose اضافه کرد.
با استفاده از notificationclick و رویداد notificationclose می توانید نحوه تعامل کاربران خود با اعلان های شما را درک کنید. آیا آنها آنها را برای مدت طولانی باز می گذارند و سپس فعالانه آنها را کنار می گذارند یا بلافاصله به آنها عمل می کنند.
یکی از موارد استفاده محبوب این است که بتوانید اعلان ها را بین دستگاه ها همگام کنید. اگر کاربر اعلانی را در دستگاه دسکتاپ خود رد کند، همان اعلان در دستگاه تلفن همراه او نیز باید رد شود. ما هنوز توانایی انجام این کار را به صورت بی صدا نداریم (به یاد داشته باشید که هر پیام فشاری باید یک اعلان نمایش داده شود)، اما با استفاده از notificationclose، این امکان را برای شما باز می کند تا وضعیت اعلان را برای کاربر در سرور خود ردیابی کنید. و آن را با دستگاه های دیگر که کاربر از آنها استفاده می کند، همگام سازی کنید.
برای استفاده از رویداد notificationclose، آن را در سرویس‌کار خود ثبت کنید و فقط زمانی فعال می‌شود که کاربر به طور فعال یک اعلان را رد کرده باشد، به عنوان مثال، اگر کاربر یک اعلان خاص را رد کند یا تمام اعلان‌ها را در سینی خود (در اندروید) رد کند.
اگر پرچم requireInteraction نادرست باشد یا تنظیم نشده باشد، اگر اعلان به صورت دستی توسط کاربر رد نشود، بلکه به طور خودکار توسط سیستم انجام شود، رویداد notificationclose فعال نخواهد شد.
یک پیاده سازی ساده در زیر نشان داده شده است. هنگامی که کاربر اعلان را رد می کند، به شی اعلان دسترسی پیدا می کنید که از آن می توانید منطق سفارشی را انجام دهید.
self.addEventListener('notificationclose', e => console.log(e.notification));
می توانید این را در Notification Generator تست کنید. وقتی اعلان را ببندید یک هشدار دریافت خواهید کرد.
وقتی یک اعلان موجود را جایگزین می کنید، کاربران خود را آزار ندهید
من کاملا مطمئن هستم که عمو بن در مورد سیستم اطلاع رسانی صحبت می کرد و نه از قدرت های پیتر پارکر که گفت: "با قدرت زیاد مسئولیت بزرگی به همراه دارد". سیستم اطلاع رسانی یک رسانه قدرتمند برای تعامل با کاربران است. اگر از اعتماد آنها سوء استفاده کنید، آنها همه اعلان ها را خاموش می کنند و ممکن است آنها را به طور کامل از دست بدهید.
هنگامی که یک اعلان ایجاد می کنید، می توانید آن را به گونه ای تنظیم کنید که یک هشدار صوتی ایجاد کند یا برای جلب توجه کاربر لرزش داشته باشد. علاوه بر این، می‌توانید یک اعلان موجود را با استفاده مجدد از ویژگی «برچسب» آن در یک شی اعلان جدید جایگزین کنید.
قبل از Chrome 50، هر بار که یک اعلان ایجاد می‌کردید یا یک اعلان موجود را جایگزین می‌کردید، یک الگوی لرزشی اجرا می‌کرد یا یک هشدار صوتی پخش می‌کرد و این می‌تواند باعث ناامیدی کاربران شما شود. اکنون در کروم 50، از طریق یک پرچم ساده بولی به نام 'renotify' ، کنترل روی آنچه در حین اعلان مجدد اتفاق می افتد دارید . رفتار پیش‌فرض جدید هنگام استفاده از همان «برچسب» برای اعلان‌های بعدی، بی‌صدا بودن است و به‌عنوان توسعه‌دهنده باید با تنظیم پرچم روی «درست»، «اعلان مجدد» به کاربر را انتخاب کنید.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
می توانید این را در Generator Notification امتحان کنید.
مُهر زمانی نمایش داده شده به کاربر را مدیریت کنید
در اندروید، اعلان‌های کروم زمان ایجاد خود را در گوشه سمت راست بالا به طور پیش‌فرض نشان می‌دهند. متأسفانه، ممکن است این زمانی نباشد که اعلان واقعاً توسط سیستم شما ایجاد شده باشد. برای مثال، ممکن است این رویداد زمانی فعال شده باشد که دستگاه آفلاین بوده است، یا ممکن است اعلان برای جلسه آینده نشان داده شود. از کروم 50، کروم یک ویژگی جدید " timestamp " اضافه کرده است که به توسعه دهندگان امکان می دهد زمانی را که باید در اعلان نمایش داده شود، ارائه دهند.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
مهر زمانی در حال حاضر فقط در Chrome برای Android قابل مشاهده است. اگرچه در دسکتاپ قابل مشاهده نیست، اما بر ترتیب اعلان ها در موبایل و دسکتاپ تأثیر می گذارد.