عرض إشعار

Alexey Rodionov

Matt Gaunt

تنقسم خيارات الإشعارات إلى قسمَين، أحدهما يتناول الجوانب المرئية (هذا القسم) والآخر يشرح الجوانب السلوكية للإشعارات (القسم التالي).

يمكنك تجربة خيارات الإشعارات المختلفة في متصفحات مختلفة على منصات مختلفة باستخدام أداة إنشاء الإشعارات من Peter Beverloo.

الخيارات المرئية

واجهة برمجة التطبيقات لعرض إشعار بسيطة:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

كلتا الوسيطتَين title وoptions اختياريتان.

العنوان هو سلسلة ويمكن أن تكون الخيارات أيًا مما يلي:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

لنلقِ نظرة على الخيارات المرئية:

خيارات العنوان والنص الأساسي

في ما يلي شكل الإشعار بدون العنوان والخيارات في Chrome على نظام التشغيل Windows:

كما ترى، يتم استخدام اسم المتصفح كعنوان ويتم استخدام العنصر النائب "إشعار جديد" كنص الإشعار.

إذا كان تطبيق الويب التقدّمي مثبّتًا على الجهاز، سيتم استخدام اسم تطبيق الويب بدلاً من اسم المتصفّح:

إذا قمنا بتشغيل التعليمة البرمجية التالية:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

فسيظهر لنا هذا الإشعار في Chrome على نظام التشغيل Linux:

في Firefox على Linux، سيبدو الأمر على النحو التالي:

هذا هو شكل الإشعار الذي يحتوي على الكثير من النصوص في العنوان والنص في Chrome على Linux:

يصغّر متصفّح Firefox على نظام التشغيل Linux نص الإشعار إلى أن يتم تمرير مؤشر الماوس فوقه، ما يؤدي إلى توسيع الإشعار:

تظهر الإشعارات نفسها في Firefox على نظام التشغيل Windows على النحو التالي:

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

يستخدم Chrome وFirefox إشعارات النظام ومركز الإشعارات على الأنظمة الأساسية التي تتوفّر فيها هذه الميزات.

على سبيل المثال، لا تتيح إشعارات النظام على macOS الصور والإجراءات (الأزرار والردود المضمّنة).

يحتوي Chrome أيضًا على إشعارات مخصّصة لجميع الأنظمة الأساسية لأجهزة الكمبيوتر المكتبي. يمكنك تفعيلها من خلال ضبط علامة chrome://flags/#enable-system-notifications على الحالة Disabled.

رمز

الخيار icon هو في الأساس صورة صغيرة يمكنك عرضها بجانب العنوان والنص الأساسي.

في الرمز البرمجي، عليك تقديم عنوان URL للصورة التي تريد تحميلها:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

يظهر لك هذا الإشعار في Chrome على نظام التشغيل Linux:

وفي Firefox على Linux:

للأسف، لا توجد أي إرشادات صارمة بشأن حجم الصورة التي يجب استخدامها للرمز.

يبدو أنّ نظام Android يتطلّب صورة بدقة 64 بكسل مستقل الكثافة (أي 64 بكسل مضروبة في نسبة وحدات البكسل على الجهاز).

بافتراض أنّ أعلى نسبة بكسل للجهاز هي 3، فإنّ حجم الرمز الذي يبلغ 192 بكسل أو أكثر هو خيار آمن.

ملاحظة: قد تتطلّب بعض المتصفّحات عرض الصورة عبر بروتوكول HTTPS. يُرجى الانتباه إلى ذلك إذا كنت تنوي استخدام صورة تابعة لجهة خارجية.

الشارة

‫badge هو رمز صغير أحادي اللون يُستخدَم لعرض معلومات إضافية للمستخدم حول مصدر الإشعار:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

في وقت كتابة هذه المقالة، لا يتم استخدام الشارة إلا في Chrome على Android.

في المتصفّحات الأخرى (أو Chrome بدون الشارة)، سيظهر لك رمز المتصفّح.

كما هو الحال مع الخيار icon، لا توجد إرشادات حقيقية حول الحجم الذي يجب استخدامه.

بالبحث في إرشادات Android، نجد أنّ الحجم المقترَح هو 24 بكسل مضروبًا في نسبة وحدات البكسل على الجهاز.

وهذا يعني أنّ صورة بحجم 72 بكسل أو أكثر ستكون مناسبة (بافتراض أنّ الحد الأقصى لنسبة وحدات البكسل على الجهاز هو 3).

صورة

يمكن استخدام الخيار image لعرض صورة أكبر للمستخدم. وهذا مفيد بشكل خاص لعرض صورة معاينة للمستخدم.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

في Chrome على نظام التشغيل Linux، سيظهر الإشعار على النحو التالي:

في Chrome على Android، يختلف الاقتصاص والنسبة:

نظرًا للاختلافات في النسبة بين أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة، من الصعب جدًا اقتراح إرشادات.

بما أنّ متصفّح Chrome على أجهزة الكمبيوتر المكتبي لا يملأ المساحة المتاحة ويستخدم نسبة 4:3، قد يكون أفضل نهج هو عرض صورة بهذه النسبة والسماح لنظام Android باقتصاص الصورة. ومع ذلك، قد يتغيّر خيار "image".

على Android، الإرشادات الوحيدة هي عرض 450 بكسل مستقل الكثافة.

باستخدام هذه الإرشادات، ستكون الصورة التي يبلغ عرضها 1350 بكسل أو أكثر خيارًا جيدًا.

الإجراءات (الأزرار)

يمكنك تحديد actions لعرض الأزرار مع إشعار:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

لكل إجراء، يمكنك تحديد title وaction (وهو في الأساس رقم تعريف) وicon وtype. العنوان والرمز هما ما يمكنك رؤيته في الإشعار. يُستخدم رقم التعريف عند رصد النقر على زر الإجراء (مزيد من المعلومات حول هذا في القسم التالي). يمكن حذف النوع لأنّ 'button' هي القيمة التلقائية.

في وقت كتابة هذه المقالة، لا يتوافق سوى Chrome وOpera مع الإجراءات على Android.

في المثال أعلاه، هناك أربعة إجراءات محدّدة لتوضيح أنّه يمكنك تحديد إجراءات أكثر من تلك التي سيتم عرضها. إذا أردت معرفة عدد الإجراءات التي سيعرضها المتصفّح، يمكنك الاطّلاع على window.Notification?.maxActions:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

على أجهزة الكمبيوتر المكتبي، تعرض رموز أزرار الإجراءات ألوانها (انظر إلى الدونات الوردية):

على الإصدار Android 6 والإصدارات الأقدم، يتم تلوين الرموز لتتطابق مع الألوان في النظام:

على نظام التشغيل Android 7 والإصدارات الأحدث، لا تظهر رموز الإجراءات على الإطلاق.

نأمل أن يغيّر Chrome سلوكه على أجهزة الكمبيوتر المكتبي ليتطابق مع Android (أي تطبيق الألوان المناسبة لجعل الرموز تتطابق مع مظهر النظام وأسلوبه). في الوقت الحالي، يمكنك مطابقة لون نص Chrome من خلال جعل لون الرموز #333333.

تجدر الإشارة أيضًا إلى أنّ الرموز تبدو واضحة على أجهزة Android ولكن ليس على أجهزة الكمبيوتر المكتبي.

The best size I could get to work on desktop Chrome was 24px x 24px. يبدو هذا للأسف في غير محله على Android.

أفضل الممارسات التي يمكننا استخلاصها من هذه الاختلافات:

• التزم بنظام ألوان متّسق لرموزك بحيث يتم عرض جميع رموزك على الأقل بشكل متّسق للمستخدم.
• تأكَّد من أنّها تعمل باللون الأحادي لأنّ بعض المنصات قد تعرضها بهذه الطريقة.
• اختبِر الحجم لمعرفة ما يناسبك. تعمل الصورة بحجم 128 بكسل × 128 بكسل بشكل جيد على Android بالنسبة إليّ، ولكنّ جودتها كانت رديئة على الكمبيوتر المكتبي.
• من المتوقّع ألا يتم عرض رموز الإجراءات على الإطلاق.

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

الإجراءات (الردود المضمّنة)

يمكنك إضافة ردّ مضمّن إلى الإشعار من خلال تحديد إجراء باستخدام النوع 'text':

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

إليك كيف سيظهر على Android:

يؤدي النقر على زر الإجراء إلى فتح حقل لإدخال النص:

يمكنك تخصيص العنصر النائب لحقل إدخال النص:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

في Chrome على نظام التشغيل Windows، يكون حقل إدخال النص مرئيًا دائمًا بدون الحاجة إلى النقر على زر الإجراء:

يمكنك إضافة أكثر من ردّ مضمّن واحد أو الجمع بين الأزرار والردود المضمّنة:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

الاتجاه

تتيح لك المَعلمة dir تحديد الاتجاه الذي يجب عرض النص فيه، من اليمين إلى اليسار أو من اليسار إلى اليمين.

أثناء الاختبار، تبيّن أنّ الاتجاه يتم تحديده إلى حد كبير من خلال النص وليس من خلال هذه المَعلمة. وفقًا للمواصفات، يهدف هذا إلى اقتراح كيفية تخطيط الخيارات للمتصفح مثل الإجراءات، لكنني لم ألاحظ أي فرق.

من الأفضل تحديد ذلك إذا أمكن، وإلا سيتصرف المتصفح بشكل صحيح وفقًا للنص المقدَّم.

يجب ضبط المَعلمة على auto أو ltr أو rtl.

تبدو اللغة التي تُكتب من اليمين إلى اليسار والمستخدمة في Chrome على نظام التشغيل Linux على النحو التالي:

في Firefox (أثناء التمرير فوقه) ستحصل على هذا:

اهتزاز

تنبيه: تم إيقاف دعم vibrate نهائيًا على الإصدار Android 8 والإصدارات الأحدث.

يتيح لك خيار الاهتزاز تحديد نمط اهتزاز يتم تشغيله عند عرض إشعار، بافتراض أنّ إعدادات المستخدم الحالية تسمح بالاهتزاز (أي أنّ الجهاز ليس في الوضع الصامت).

يجب أن يكون تنسيق خيار الاهتزاز مصفوفة من الأرقام التي تصف عدد المللي ثانية التي يجب أن يهتز فيها الجهاز، متبوعة بعدد المللي ثانية التي يجب أن لا يهتز فيها الجهاز.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

يؤثر ذلك فقط في الأجهزة التي تتوافق مع ميزة الاهتزاز.

الصوت

تتيح لك مَعلمة الصوت تحديد صوت يتم تشغيله عند تلقّي الإشعار.

في وقت كتابة هذه المقالة، لا يتوفّر أي متصفّح يتيح هذا الخيار.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

الطابع الزمني

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

يجب أن تكون قيمة timestamp هي عدد الملّي ثانية منذ 00:00:00 بالتوقيت العالمي المنسق، أي 1 يناير 1970 (وهي حقبة يونكس).

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

أفضل الممارسات المتعلّقة بتجربة المستخدم

أكبر فشل في تجربة المستخدم رأيته في الإشعارات هو عدم وجود خصوصية في المعلومات التي يعرضها الإشعار.

يجب أن تفكّر في سبب إرسال الإشعار الفوري في المقام الأول والتأكّد من استخدام جميع خيارات الإشعارات لمساعدة المستخدمين في فهم سبب قراءة هذا الإشعار.

بصراحة، من السهل رؤية الأمثلة والتفكير في "لن أرتكب هذا الخطأ أبدًا". ولكن من السهل الوقوع في هذا الفخ أكثر مما تعتقد.

في ما يلي بعض الأخطاء الشائعة التي يجب تجنُّبها:

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

المتصفّحات ورصد الميزات

في وقت كتابة هذا المقال، هناك تفاوت كبير بين Chrome وFirefox من حيث دعم ميزات الإشعارات.

لحسن الحظ، يمكنك رصد مدى توفّر ميزات الإشعارات من خلال الاطّلاع على النموذج الأوّلي window.Notification.

لنفترض أنّنا أردنا معرفة ما إذا كان الإشعار يتيح استخدام أزرار الإجراءات، فسننفّذ ما يلي:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

وبذلك، يمكننا تغيير الإشعار الذي نعرضه للمستخدمين.

بالنسبة إلى الخيارات الأخرى، ما عليك سوى اتّباع الخطوات نفسها الموضّحة أعلاه، مع استبدال 'actions' باسم المَعلمة المطلوبة.

الخطوات التالية

• نظرة عامة على الإشعارات الفورية على الويب
• طريقة عمل الإشعارات الفورية
• الاشتراك في قناة مستخدم
• تجربة المستخدم في ما يتعلّق بالأذونات
• إرسال الرسائل باستخدام مكتبات Web Push
• بروتوكول Web Push
• التعامل مع أحداث الإشعارات الفورية
• عرض إشعار
• سلوك الإشعارات
• أنماط الإشعارات الشائعة
• الأسئلة الشائعة حول الإشعارات الفورية
• المشاكل الشائعة والإبلاغ عن الأخطاء

Code labs

• إنشاء برنامج عميل للإشعارات الفورية
• إنشاء خادم للإشعارات الفورية