شارات لرموز التطبيقات

تسمح واجهة App Badging API لتطبيقات الويب المثبَّتة بوضع شارة على مستوى التطبيق على رمز التطبيق.

Pete LePage

ما هي واجهة App Badging API؟

مثال على Twitter يتضمّن ثمانية إشعارات وتطبيق آخر يعرض شارة نوع الإبلاغ
مثال على Twitter مع ثمانية إشعارات وتطبيق آخر يعرض عملية إبلاغ شارة النوع.

تسمح واجهة برمجة التطبيقات لشارة التطبيق لتطبيقات الويب المثبَّتة بوضع شارة على مستوى التطبيق. يظهر في مكان خاص بنظام التشغيل ومرتبط بالتطبيق (مثل الرف أو الشاشة الرئيسية).

تسهِّل الشارات إبلاغ المستخدم بحدوث نشاط جديد. التي قد تستدعي انتباههم، أو للإشارة إلى قدر صغير من معلومات، مثل عدد الرسائل غير المقروءة.

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

حالات الاستخدام المحتملة

في ما يلي أمثلة على التطبيقات التي قد تستخدم واجهة برمجة التطبيقات هذه:

  • تطبيقات الدردشة والبريد الإلكتروني وتطبيقات التواصل الاجتماعي للإشارة إلى وصول رسائل جديدة، أو إظهار عدد العناصر غير المقروءة.
  • تطبيقات الإنتاجية، للإشارة إلى أن هناك مهمة طويلة الأمد في الخلفية (مثل من عرض الصورة أو الفيديو).
  • الألعاب، للإشارة إلى أن هناك إجراء مطلوب من اللاعب (على سبيل المثال، في لعبة الشطرنج، عندما هو دور اللاعب).

الدعم

تعمل واجهة App Badging API على نظامَي التشغيل Windows وmacOS في الإصدارَين Chrome 81 وEdge 81 أو الإصدارات الأحدث. لا يزال نظام التشغيل ChromeOS قيد التطوير وسيصبح متاحًا في المستقبل. . لا يمكن استخدام Badging API على أجهزة Android. بدلاً من ذلك، يعرض Android تلقائيًا شارة على رمز التطبيق الخاص بتطبيق الويب المثبَّت. عندما يكون هناك إشعار غير مقروء، تمامًا كما في تطبيقات Android.

التجربة الآن

  1. افتح عرض توضيحي لواجهة برمجة التطبيقات لشارات التطبيق
  2. انقر على تثبيت لتثبيت التطبيق أو استخدِم Chrome عندما يُطلب منك ذلك. القائمة لتثبيته.
  3. افتحه كتطبيق ويب تقدّمي (PWA) مثبَّت. ملاحظة: يجب أن يعمل التطبيق كتطبيق ويب تقدّمي (PWA) مثبَّت. (في شريط المهام أو شريط الإرساء).
  4. انقر على الزرّ ضبط أو محو لضبط الشارة أو محوها من التطبيق. . ويمكنك أيضًا توفير رقم لقيمة الشارة.

كيفية استخدام واجهة App Badging API

لاستخدام واجهة App Badging API، يجب أن يستوفي تطبيق الويب المتطلبات. معايير قابلية التثبيت في Chrome ويجب على المستخدمين إضافته إلى شاشاتهم الرئيسية.

تتألّف واجهة برمجة التطبيقات Badge API من طريقتَين في navigator:

  • setAppBadge(number): لضبط شارة التطبيق. إذا تم توفير قيمة، اضبط بشارة إلى القيمة المقدمة بخلاف ذلك، ويعرض نقطة بيضاء عادية (أو وضع علامة عليه بالشكل المناسب للنظام الأساسي). لا يتطابق إعداد number على 0 مع جارٍ الاتصال بـ clearAppBadge().
  • clearAppBadge(): لإزالة شارة التطبيق.

يعرض كلاهما وعودًا فارغة يمكنك استخدامها عند معالجة الأخطاء.

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

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

في بعض الحالات، قد لا يسمح نظام التشغيل بعرض الشارة بدقة. وفي هذه الحالات، سيحاول المتصفح تقديم أفضل تمثيل ذلك الجهاز. على سبيل المثال، بسبب عدم توافق Badging API على نظام Android. يُظهر Android نقطة فقط بدلاً من قيمة رقمية دائمًا.

لا تفترض أي شيء حول كيفية عرض وكيل المستخدم للشارة. قد يتخذ بعض برامج وكيل المستخدم رقمًا مثل "4000". وإعادة كتابته "+99". في حال تشبُّع ألوان الشارة بنفسك (مثلاً من خلال ضبطها على "99") ثم رمز "+" لن الخاص بك. بغض النظر عن الرقم الفعلي، ما عليك سوى الاتصال setAppBadge(unreadCount) والسماح لوكيل المستخدم بالتعامل مع وعرضه وفقًا لذلك.

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

إعداد الشارة في الخلفية ومحوها من مشغّل الخدمات

ويمكنك أيضًا ضبط شارة التطبيق في الخلفية باستخدام مشغّل الخدمات. إجراء ذلك أيضًا من خلال المزامنة الدورية في الخلفية أو Push API أو كليهما

المزامنة الدورية في الخلفية

تسمح المزامنة الدورية في الخلفية لمشغّل الخدمات. لفحص الخادم بشكل دوري، والذي يمكن استخدامه للحصول على حالة محدَّثة، واتصل بـ navigator.setAppBadge().

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

واجهة برمجة التطبيقات Web Push

تسمح Push API للخوادم بإرسال رسائل إلى مشغّلي الخدمات، التي يمكنها تشغيل رمز JavaScript حتى في حال عدم تشغيل أي صفحة في المقدّمة. وبالتالي، يمكن أن تؤدي الإشعارات الفورية من الخادم إلى تعديل الشارة من خلال طلب الرقم navigator.setAppBadge().

ومع ذلك، تتطلب معظم المتصفّحات، بما في ذلك Chrome، إرسال إشعار يتم عرضه كلما تم تلقي رسالة فورية. هذا مناسب لبعض الاستخدامات الحالات (على سبيل المثال، عرض إشعار عند تحديث الشارة) ولكنه يجعل من المستحيل تحديث الشارة بمهارة بدون عرض إشعار.

بالإضافة إلى ذلك، يجب أن يمنح المستخدمون إذن إرسال الإشعارات في موقعك الإلكتروني لكي استلام رسائل فورية

يمكنك الجمع بين الاثنين

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

ملاحظات

يود فريق Chrome معرفة رأيك بشأن تجاربك في استخدام واجهة App Badging API.

أخبِرنا عن تصميم واجهة برمجة التطبيقات

هل هناك ما لا يعمل على النحو المتوقّع في واجهة برمجة التطبيقات؟ أم هناك طرق أو خصائص مفقودة تحتاجها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق بشأن نموذج الأمان؟

الإبلاغ عن مشكلة في التنفيذ

هل واجهت مشكلة في التنفيذ في Chrome؟ أم أن التنفيذ عن المواصفات؟

  • يمكنك الإبلاغ عن الخطأ على https://new.crbug.com. تأكد من تضمين أكبر قدر ممكن من التفاصيل يمكنك، وإرشادات بسيطة لإعادة إنتاجها، وتعيين المكونات على UI>Browser>WebAppInstalls يعمل الخطأ بشكل رائع مشاركة نُسخ سريعة وسهلة

إظهار الدعم لواجهة برمجة التطبيقات

هل تخطّط لاستخدام واجهة App Badging API على موقعك الإلكتروني؟ يساعد دعمك العام فريق Chrome لتحديد الأولوية للميزات، وتوضيح لموردي المتصفحات الآخرين مدى أهمية في دعمهم.

  • إرسال تغريدة إلى @ChromiumDev باستخدام علامة التصنيف #BadgingAPI عليك إعلامنا بمكان تطبيقك وطريقة استخدامه

روابط مفيدة

صورة رئيسية من تصميم Prateek Katyal على إزالة البداية