عرض إشعار

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 بكسل مستقل الكثافة (dp) (وهي مضاعفات 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 بكسل مستقل الكثافة (dp).

باستخدام هذه الإرشادات، سيكون عرض الصورة 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 كما يلي:

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

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

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

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

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