تتيح لك الإشعارات الفورية تقديم تجربة رائعة تشبه تجربة استخدام التطبيق لمستخدميك، من خلال تنبيههم إلى آخر الأخبار المهمة في الوقت المناسب، مثل رسائل المحادثة الواردة. منصة الإشعارات جديدة نسبيًا في المتصفّحات، ومع مزيد من تفصيل حالات الاستخدام والمتطلبات، نلاحظ العديد من الإضافات إلى واجهات برمجة التطبيقات للإشعارات. ولا يُستثنى من ذلك الإصدار 50 من Chrome (الإصدار التجريبي في آذار/مارس 2016)، الذي يتضمّن أربع ميزات جديدة على الأقل تمنح المطوّرين مزيدًا من التحكّم في الإشعارات. يمكنك تنفيذ ما يلي:
- إضافة رموز إلى أزرار الإشعارات
- تعديل الطابع الزمني للمساعدة في توفير تجربة متّسقة
- تتبُّع أحداث إغلاق الإشعارات للمساعدة في مزامنة الإشعارات وتقديم تحليلات
- إدارة تجربة إعادة الإشعار عندما يحلّ إشعار محل الإشعار المعروض حاليًا
أضاف الإصدار 50 من Chrome أيضًا حمولات للإشعارات الفورية. للاطّلاع على آخر المعلومات المتعلّقة بدورة Notifications API أثناء تنفيذها في Chrome، اتّبِع المواصفات وأداة تتبُّع المشاكل في المواصفات.
إنشاء أزرار إجراءات جذابة باستخدام رموز مخصّصة
في المشاركة الأخيرة حول أزرار الإجراءات في الإشعارات في الإصدار 49 من Chrome، أشرت إلى أنّه لا يمكنك إرفاق صور بأزرار الإشعارات لجعلها أنيقة وجذابة، ولكن يمكنك استخدام أحرف Unicode لتضمين الرموز التعبيرية وغيرها. لا داعي للقلق الآن، فيمكنك من خلال هذه الإضافة الأخيرة تحديد صورة على زر الإجراء:
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 بعد من خلال مشغّل الخدمات).
أحداث إغلاق الإشعارات
من الميزات التي يطلبها المستخدمون بشكل متكرّر في الإشعارات هي معرفة متى تجاهل العميل أحد الإشعارات. لم يكن لدينا طريقة لإجراء ذلك إلى أن تمّت إضافة حدث notificationclose في مجموعة من التغييرات الأخيرة على مواصفات الإشعارات.
باستخدام حدثَي notificationclick وnotificationclose، يمكنك معرفة كيفية تفاعل المستخدمين مع إشعاراتك. هل يتركون الرسائل مفتوحة لفترة طويلة ثم يغلِقونها بشكل نشط أم يتعاملون معها على الفور؟
ومن حالات الاستخدام الشائعة إمكانية مزامنة الإشعارات بين الأجهزة. إذا أغلق المستخدم إشعارًا على جهاز الكمبيوتر المكتبي، يجب أيضًا إغلاق الإشعار نفسه على جهازه الجوّال. لا تتوفّر لدينا بعد إمكانية إجراء ذلك بصمت (تذكَّر أنّه يجب أن يتم عرض إشعار لكل رسالة دفع)، ولكن باستخدام notificationclose، تتوفّر إمكانية التعامل مع ذلك من خلال السماح لك بتتبُّع حالة الإشعار للمستخدم على الخادم ومزامنته مع الأجهزة الأخرى أثناء استخدام المستخدم لها.
لاستخدام حدث notificationclose، سجِّله داخل الخدمة العاملة ولن يتم تشغيله إلا عندما يتجاهل المستخدم إشعارًا بشكل نشط، على سبيل المثال، إذا تجاهل المستخدم إشعارًا معيّنًا أو تجاهل كل الإشعارات في علبة الإشعارات (على Android).
إذا كانت علامة requireInteraction خطأ أو لم يتم ضبطها، لن يتم بدء حدث notificationclose إذا لم يغلق المستخدم الإشعار يدويًا بل أغلقه النظام تلقائيًا.
في ما يلي مثال بسيط على التنفيذ. عندما يرفض المستخدم الإشعار، يمكنك الوصول إلى عنصر الإشعار الذي يمكنك من خلاله تنفيذ منطق مخصّص.
self.addEventListener('notificationclose', e => console.log(e.notification));
يمكنك اختبار ذلك في أداة إنشاء الإشعارات، وستتلقّى تنبيهًا عند إغلاق الإشعار.
عدم إزعاج المستخدمين عند استبدال إشعار حالي
أعتقد أنّ العم بن كان يتحدث عن نظام الإشعارات وليس عن قدرات بيتر باركر عندما قال: "مع زيادة القدرات تزداد المسؤولية". نظام الإشعارات هو أحد الوسائط الفعّالة للتفاعل مع المستخدمين. وإذا أسأت استخدام ثقتهم، سيقومون بإيقاف جميع الإشعارات وقد تفقد متابعتهم بالكامل.
عند إنشاء إشعار، يمكنك ضبطه لإنشاء تنبيه صوتي أو الاهتزاز لجذب انتباه المستخدم. بالإضافة إلى ذلك، يمكنك استبدال إشعار حالي من خلال إعادة استخدام سمة "العلامة" في عنصر إشعار جديد.
قبل الإصدار 50 من Chrome، في كل مرة تنشئ فيها إشعارًا أو تستبدل إشعارًا حاليًا، كان يتم تشغيل نمط اهتزاز أو تشغيل تنبيه صوتي، وقد يؤدي ذلك إلى إزعاج المستخدمين. في الإصدار 50 من Chrome، أصبح بإمكانك التحكّم في ما يحدث أثناء إعادة الإشعار من خلال علامة منطقية بسيطة تُسمى "إعادة الإشعار". السلوك التلقائي الجديد عند استخدام "العلامة" نفسها للإشعارات اللاحقة هو عدم إرسال إشعارات، ويجب أن يوافق المطوّر على "إعادة إرسال إشعار" إلى المستخدم من خلال ضبط العلامة على "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
يمكنك تجربة ذلك في أداة إنشاء الإشعارات.
إدارة الطابع الزمني المعروض للمستخدم
على أجهزة Android، تعرض إشعارات Chrome أوقات إنشائها تلقائيًا في أعلى يمين الشاشة. قد لا يكون هذا هو الوقت الذي أنشأ فيه النظام الإشعار فعليًا. على سبيل المثال، قد يكون الحدث قد تم تشغيله عندما كان الجهاز غير متصل بالإنترنت، أو يمكن أن يتم عرض الإشعار لاجتماع قادم. اعتبارًا من الإصدار 50 من Chrome، تم إضافة سمة 'الطابع الزمني' جديدة تتيح للمطوّرين تقديم الوقت الذي يجب عرضه في الإشعار.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
لا يظهر الطابع الزمني حاليًا إلا على متصفّح Chrome لأجهزة Android. على الرغم من أنّه لا يظهر على أجهزة الكمبيوتر المكتبي، سيؤثّر ذلك في ترتيب الإشعارات على كلّ من الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.
.