تحسينات على إشعارات الويب في الإصدار 50 من Chrome: الرموز وإغلاق الأحداث وإعادة إرسال الإشعارات المفضّلة والطوابع الزمنية

تتيح لك إشعارات PPush توفير تجربة رائعة شبيهة بالتطبيق للمستخدمين من خلال تنبيههم بالتحديثات المهمة في الوقت المناسب مثل رسائل المحادثة الواردة. ومنصة الإشعارات جديدة نسبيًا في المتصفحات، ومع توضيح المزيد من حالات ومتطلبات الاستخدام، نلاحظ المزيد من الإضافات إلى واجهات برمجة التطبيقات الخاصة بالإشعارات. ولا يُعد Chrome 50 (الإصدار التجريبي من آذار/مارس 2016) استثناءً، إذ يحتوى على ما لا يقل عن أربع ميزات جديدة تمنح المطورين مزيدًا من التحكم في الإشعارات. يمكنك القيام بما يلي:

  • وإضافة أيقونات إلى أزرار الإشعارات،
  • وتعديل الطابع الزمني للمساعدة في توفير تجربة متّسقة
  • وتتبع أحداث إغلاق الإشعارات للمساعدة في مزامنة الإشعارات وتقديم الإحصاءات
  • إدارة تجربة إعادة الإشعار عندما يحلّ إشعار محلّ الإشعار المعروض حاليًا

وأضاف Chrome 50 أيضًا حمولات البيانات للإشعارات الفورية. للاطّلاع على آخر المعلومات عن واجهة برمجة التطبيقات notifications API عند تنفيذها في Chrome، يُرجى اتّباع spec وأداة تتبُّع المشاكل في المواصفات.

إنشاء أزرار إجراءات جذابة باستخدام رموز مخصصة

في مشاركة حديثة حول أزرار الإجراءات الخاصة بالإشعارات في 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'}]
});
إشعار على سطح المكتب

يختلف مظهر رمز الإجراء حسب النظام الأساسي. على سبيل المثال، على نظام التشغيل Android، سيتضمن الرمز فلترًا باللون الرمادي الداكن يتم تطبيقه في الإصدار Lollipop والإصدارات الأحدث، وفلتر أبيض قبل إصدار Lollipop، بينما سيكون لونه كاملاً على سطح المكتب. (ملاحظة: هناك مناقشة حول إمكانية هذه الميزة على أجهزة الكمبيوتر المكتبي). قد لا تتمكّن بعض المنصّات من عرض رموز الإجراءات، لذا عليك التأكّد من استخدام الرموز لتوفير سياق للإجراء وليس كمؤشّر وحيد للهدف.

وأخيرًا، نظرًا لأنه يجب تنزيل الموارد، يفضَّل إبقاء الرموز صغيرة قدر الإمكان وتخزينها مؤقتًا في حدث التثبيت. (في وقت كتابة هذا التقرير، لم يتم بعد توجيه عمليات جلب موارد الإشعارات في Chrome من خلال مشغّل الخدمات).

أحداث إغلاق الإشعارات

تتمثل إحدى ميزات الإشعارات المطلوبة بشكل متكرر في القدرة على معرفة وقت رفض المستخدم للإشعار. ولم يكن بإمكاننا إجراء ذلك إلا بعد إضافة مجموعة من التغييرات مؤخرًا على مواصفات الإشعارات وحدث إغلاق الإشعار.

ومن خلال النقر على الإشعار وحدث إغلاق الإشعار، يمكنك فهم كيفية تفاعل المستخدمين مع الإشعارات. هل يتركونها مفتوحة لوقت طويل ثم يرفضونها بشكل نشط أم أنهم يتصرفون بناءً عليها على الفور.

تتمثل إحدى حالات الاستخدام الشائعة في القدرة على مزامنة الإشعارات بين الأجهزة. إذا أغلق المستخدم إشعارًا على جهاز كمبيوتر مكتبي، يجب أيضًا تجاهل الإشعار نفسه على جهازه الجوّال. لا يمكننا بعد القيام بذلك بدون تنبيه صوتي (تذكر أنه يجب أن تتضمن كل رسالة دفع إشعارًا معروضًا)، ولكن من خلال استخدام إشعار الإغلاق، فإنه يتيح إمكانية التعامل مع هذا الأمر من خلال السماح لك بتتبع حالة الإشعار للمستخدم على خادمك ومزامنتها مع الأجهزة الأخرى أثناء استخدامها من قِبل المستخدم.

لاستخدام حدث إغلاق الإشعار، يجب تسجيله داخل مشغّل الخدمات ولن يتم تنشيطه إلا عندما يرفض المستخدم إشعارًا بشكل نشط. كأن يرفض المستخدم إشعارًا معيّنًا أو يرفض جميع الإشعارات في التطبيق (على Android) مثلاً.

في حال كانت علامة requestInteraction غير صحيحة أو لم يتم ضبطها، إذا لم يرفض المستخدم الإشعار يدويًا، ولكن من قِبل النظام تلقائيًا، لن يتم بدء حدث إغلاق الإشعار.

في ما يلي عملية تنفيذ بسيطة. عندما يرفض المستخدم الإشعار، يمكنك الوصول إلى كائن الإشعار الذي يمكنك من خلاله تنفيذ منطق مخصص.

self.addEventListener('notificationclose', e => console.log(e.notification));

يمكنك اختبار ذلك في منشئ الإشعارات، وستتلقّى تنبيهًا عند إغلاق الإشعار.

عدم إزعاج المستخدمين عند استبدال إشعار حالي

أنا على يقين من أنّ العم بن كان يتحدث عن نظام الإشعارات وليس عن سلطات "بيتر باركر" عندما قال: "مع القوة الكبيرة تأتي مسؤولية كبيرة". يُعد نظام الإشعارات وسيطًا قويًا للتفاعل مع المستخدمين. إذا أسأت استخدام ثقته، سيتم إيقاف جميع الإشعارات وقد تفقدها تمامًا.

عند إنشاء إشعار، يمكنك ضبطه لإنشاء تنبيه مسموع أو اهتزاز للفت انتباه المستخدم. بالإضافة إلى ذلك، يمكنك استبدال إشعار حالي عن طريق إعادة استخدام سمة العلامة على عنصر إشعار جديد.

قبل استخدام Chrome 50، كان يتم في كل مرة تنشئ فيها إشعارًا أو استبدلت أحد الإشعارات الحالية، نمط اهتزاز أو تشغيل تنبيه مسموع، وهو ما قد يسبب إزعاجًا للمستخدمين. في Chrome 50، يمكنك الآن التحكم في ما يحدث أثناء إعادة الإشعار عبر علامة منطقية بسيطة تسمى "إعادة الإشعار". إنّ السلوك التلقائي الجديد عند استخدام "العلامة" نفسها للإشعارات اللاحقة هو الصمت، ويجب على المطوّر تفعيل "إعادة إرسال إشعارات" إلى المستخدم من خلال ضبط العلامة على "صحيح".

self.registration.showNotification('Oi!', {
  'renotify': true,
  'tag': 'tag-id-1'
});

يمكنك تجربة هذه الميزة في منشئ الإشعارات.

إدارة الطابع الزمني المعروض للمستخدم

في نظام Android، تعرض إشعارات Chrome أوقات الإنشاء تلقائيًا في أعلى الجانب الأيسر. للأسف، قد لا يكون هذا هو الوقت الذي أنشئ فيه نظامك الإشعار فعليًا. على سبيل المثال، ربما بدأ الحدث عندما كان الجهاز غير متصل بالإنترنت، أو قد يظهر إشعار لاجتماع قادم. بدءًا من الإصدار 50 من Chrome، أضاف Chrome سمة طابع زمني جديدة تتيح للمطوّرين توفير الوقت الذي يجب عرضه في الإشعار.

self.registration.showNotification('Best day evar!', {
  'timestamp': 360370800000
});

لا يظهر الطابع الزمني حاليًا إلا على Chrome لنظام Android. بالرغم من عدم ظهوره على أجهزة الكمبيوتر المكتبي، إلّا أنّه سيؤثر في ترتيب الإشعارات على كلّ من الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.

.