كل تطبيق يستحق شارة
إنه نمط واجهة مستخدم شائع جدًا تراه كل يوم للتطبيقات المحلية على جهازك: شارة إشعار. إنه مفهوم رائع يُعلم المستخدمين ببعض المعلومات المفقودة عبر مؤشر بسيط وصغير. غالبًا ما يكون عدادًا ، وبالنسبة لبعض التطبيقات الخاصة ، يتم استخدام شارة مخصصة أو تعديل مرئي للرمز ، على سبيل المثال في تطبيق Keychain في macOS ، حيث تشير عملة برتقالية إلى أن سلسلة المفاتيح غير مقفلة ويمكن الوصول إليها.
لكن العودة إلى الشارات الافتراضية. بفضل Google التي تدفع الويب بثبات إلى الأمام ، يمكن لتطبيق الويب التقدمي المثبت لديك عرض عداد كشارة أيضًا.
المتطلبات الأساسية
لكي يتمكن تطبيق الويب الخاص بك من إظهار شارة ، يجب أن يفي "بمعايير قابلية التثبيت" من Google ، والمرتبطة أدناه في الملحق. وهذا منطقي تمامًا: يجب تثبيت PWA على جهاز حتى يكون لديك مكان ثابت في نظامك. على نظام التشغيل Windows ، تكون تطبيقاتك موجودة في شريط المهام وفي نظام التشغيل macOS توجد في Dock.
إذا كنت لا تعرف حتى الآن ، يمكن تحسين تطبيق الويب الخاص بك بشكل تدريجي ليتطور إلى فئة جديدة من التطبيقات تسمى "تطبيقات الويب التقدمية" ، أو PWA للاختصار. تدعم PWAs مجموعة متنوعة من الميزات الجديدة التي كانت متوفرة في السابق فقط للتطبيقات الأصلية. يمكنك التحقق من العديد من المقالات حول PWAs على تطبيق الويب هذا ، وهو PWA نفسه يمكن تثبيته.
لاحظ أن دعم App Badging API يقتصر حاليًا على متصفحات Chromium وهو مدعوم فقط على أجهزة سطح المكتب بالإضافة إلى Android. الحالة العامة لواجهة برمجة التطبيقات مستقرة بالنسبة إلى Chromium ، ولكنها غير مدعومة بأي وسيلة بواسطة المتصفحات الأخرى. لذلك لا ينبغي أن يكون الاستخدام مطلبًا إلزاميًا لاستخدام التطبيق ، بل يجب أن يعزز بشكل تدريجي تجربة المستخدم الحالية.
كيف تعمل
التنفيذ الفعلي واضح جدًا ولا يتطلب سوى بضعة أسطر من التعليمات البرمجية لتغطية جميع حالات الاستخدام.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
أحد الجوانب الرائعة لواجهة برمجة التطبيقات الجديدة هذه هو أنه يمكن استخدامها داخل عامل الخدمة أيضًا ، مما يعني أنه في حالة تنفيذها ، يمكن لـ PWA المثبت جلب البيانات في الخلفية وتلقي إشعارات الدفع ، والتي بدورها يمكنها تحديث شارة التطبيق الخاص بك !
استنتاج
كما رأيت ، يعد استخدام App Badging API أمرًا بسيطًا حقًا. كل ما هو مطلوب منك للاختبار هو متصفح يستند إلى Chromium بالإضافة إلى PWA بسيط يمكن تثبيته. ليس من المتوقع أن تكون واجهة برمجة التطبيقات هذه متاحة على Safari أو Firefox في أي وقت قريب ، لأن هذا يعني أيضًا التزامًا أكثر بـ PWAs بشكل عام من قبل تلك الفرق. ولكن للحصول على تجربة مستخدم محسّنة لتطبيق الويب الخاص بك حيثما أمكن ، يعد هذا فوزًا رائعًا ويجب استخدامه بالتأكيد!
