في وقت مبكر من عام 2015، قدمنا المراسلة الفورية والإشعار في Chrome لنظام التشغيل Android وسطح المكتب. لقد كانت خطوة رائعة إلى الأمام على الويب. يمكن للمستخدمين البدء في التفاعل بشكل أكبر مع التجارب على الويب حتى عندما يكون المتصفح مغلقًا.
رغم أنّه من الرائع أن تتمكن من إرسال هذه الرسائل، لم يكن بإمكانك سوى النقر عليها وفتح صفحةٍ ما أو إغلاقها بالكامل.
عند النظر إلى الإشعارات المقدمة في الأصل للتطبيقات على الأنظمة الأساسية للأجهزة الجوّالة، مثل iOS وAndroid، فإنّ كل إشعار يسمح لمطوِّر البرامج بتحديد الإجراءات السياقية التي يمكن للمستخدم استدعاءها والتفاعل معها. في Chrome 48، أضفنا الآن إمكانية مشابهة لـ إشعارات الويب عبر سطح المكتب وChrome لنظام Android.
إنّ عملية إضافة واجهة برمجة التطبيقات بسيطة للغاية. ما عليك سوى إنشاء مصفوفة من
الإجراءات وإضافتها إلى كائن 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'}]
});
سيؤدي هذا إلى إنشاء إشعار بسيط باستخدام زرّين. تجدر الإشارة إلى عدم إمكانية إضافة رموز إلى الإجراء مباشرةً (حتى الآن)، ولكن يمكنك استخدام الرموز التعبيرية ومجموعة أحرف Unicode الموسّعة لإضافة المزيد من السياق إلى أزرار الإشعارات.
مثال:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
بعد أن أنشأت إشعارًا وجعلته يبدو 😻، قد يتفاعل المستخدم
مع الإشعار في وقت ما في المستقبل. وتأتي جميع التفاعلات مع الإشعار حاليًا (اعتبارًا من الإصدار 48 من Chrome) من خلال حدث
notificationclick المسجّل في مشغّل الخدمات، ويمكن أن تكون إما
نقرة عامة على الإشعار أو نقرة محدّدة على أحد أزرار
الإجراءات. ملاحظة جانبية: في المستقبل، يمكنك أيضًا الرد علىحدث إغلاقالإشعار.
لفهم الإجراء الذي اتّخذه المستخدم، عليك فحص السمة 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);
الشيء المثير للاهتمام هو أن الإجراءات لا يجب أن تفتح نافذة جديدة، بل يمكنها إجراء تفاعلات عامة مع التطبيق بدون إنشاء واجهة مستخدم. على سبيل المثال، يمكن للمستخدم "إبداء الإعجاب" أو "حذف" مشاركة على وسائل التواصل الاجتماعي من شأنها تنفيذ الإجراء على البيانات المحلية للمستخدم ثم مزامنتها مع السحابة بدون فتح واجهة مستخدم (على الرغم من أنه من الممارسات الجيدة إرسال رسالة تغيير البيانات إلى أي نوافذ مفتوحة حتى يمكن تحديث واجهة المستخدم). بالنسبة إلى إجراء يتطلب تفاعل المستخدم، ستفتح نافذة للمستخدم للرد.
بما أنّ الأنظمة الأساسية لن تتيح عدد الإجراءات نفسه، أو لن تتمكن في بعض الحالات من إتاحة أزرار إجراءات الإشعارات على الإطلاق، عليك التأكّد من أنك توفّر دائمًا إجراءً احتياطيًا معقولاً للمهمة التي تتوقّع أن يفعلها المستخدم إذا نقر على الإشعار فحسب.
إذا كنت تريد الاطّلاع على هذه المبادئ في الوقت الفعلي، يمكنك مراجعة Peter Beverloo's Notification Test Harne وقراءة مواصفات الإشعارات أو متابعة المواصفات أثناء تحديثها.