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