عرض إشعار

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

يمكنك تجربة العديد من خيارات الإشعارات في متصفحات مختلفة على أنظمة أساسية مختلفة باستخدام منشئ الإشعارات من 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 بكسل أو أكثر يعد رهانًا آمنًا.

الشارة

إنّ 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 ولكن ليس على أجهزة سطح المكتب.

كان أفضل حجم يمكنني العمل عليه على Chrome لأجهزة سطح المكتب هو 24 بكسل × 24 بكسل. يبدو هذا محزنًا في غير محله على 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 على النحو التالي:

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

اهتزاز

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

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

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 بالتوقيت العالمي المنسق (UTC)، أي 1 كانون الثاني (يناير) 1970 (وهي حقبة UNIX).

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' باسم المعلَمة المطلوب.

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

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

الدروس التطبيقية حول الترميز

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