الحلقة 8: الإشعارات الغنية ودعم الصور

في عالم مليء بالضجيج الرقمي المستمر، غالباً ما يفشل النص وحده في جذب انتباه المستخدم. تنجح تطبيقات مثل Instagram و Pinterest لأن إشعاراتها "غنية" — فهي توفر معاينة بصرية للمحتوى، مما يجعل من المستحيل تجاهلها.

سنستكشف في هذا الدرس:

• قوة النص الكبير (Big Text): إرسال إشعارات قابلة للتوسيع للرسائل الطويلة.
• حمولة البيانات للوسائط: هيكلة JSON لحمل روابط الصور.
• اختلافات المنصات: فهم كيف يتعامل Android و iOS مع الوسائط الغنية في إكسبو.
• معاينة الصور داخل التطبيق: تنفيذ انتقال سلس من الإشعار إلى المحتوى البصري.

1. ما وراء المقتطف: نمط النص الكبير (Big Text Style)

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

في إكسبو، ما عليك سوى تقديم سلسلة نصية أطول في حقل body. يتولى نظام التشغيل منطق "العرض المصغر مقابل العرض الموسع" تلقائياً.

index.tstypescript
نسخ
await Notifications.scheduleNotificationAsync({
  content: {
    title: "تم نشر مقال جديد! 📰",
    body: "لقد أصدرنا للتو دليلاً شاملاً حول i18n في Next.js. ويغطي الدليل البرمجيات الوسيطة، والتوجيه، وتحميل الرسائل الديناميكية باستخدام next-intl. انقر لقراءة التحليل الكامل والاطلاع على عينات الكود.",
    channelId: 'default',
  },
  trigger: null,
});

2. دمج الصور عبر حمولات البيانات (Data Payloads)

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

منطق المرسل:

index.tstypescript
نسخ
await Notifications.scheduleNotificationAsync({
  content: {
    title: "تعليق جديد على صورتك 💬",
    body: "علق شخص ما على صورة غروب الشمس الخاصة بك!",
    data: { 
      imageUrl: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
      type: 'PHOTO_PREVIEW' 
    },
    channelId: 'tasks',
  },
  trigger: { seconds: 1 },
});

3. تنفيذ تدفق "معاينة الصورة"

بمجرد أن ينقر المستخدم على الإشعار، يجب أن يستخرج تطبيقك imageUrlوينتقل فوراً إلى شاشة المعاينة. يوفر هذا للمستخدم التجربة "البصرية" التي توقعها عندما رأى التنبيه.

index.tstypescript
نسخ
// داخل مستمع الاستجابة للإشعارات:
const { imageUrl, type } = response.notification.request.content.data;

if (type === 'PHOTO_PREVIEW' && imageUrl) {
  // الانتقال إلى شاشة مخصصة تعرض الصورة بملء الشاشة
  navigation.navigate('MediaViewer', { uri: imageUrl });
}

ملاحظة تقنية: ملحقات خدمة iOS (Service Extensions)

بالنسبة للمطورين الذين يحتاجون إلى ظهور الصورة في درج تنبيهات iOS (بجانب النص)، يلزم اتخاذ خطوات أصلية (Native) إضافية. يتضمن ذلك إنشاء Notification Service Extension في Xcode.

“

[!NOTE] يتطلب هذا عادةً "الخروج" (Eject) من بيئة العمل العادية أو استخدام Development Builds مع إضافات تكوين مخصصة. بالنسبة لـ 95% من حالات الاستخدام، توفر طريقة "حمولة البيانات + الروابط العميقة" تجربة ممتازة وعابرة للمنصات.

أفضل ممارسات المحتوى الغني

1. روابط عالية الجودة: تأكد من أن روابط صورك محسنة وسريعة التحميل.
2. نص احتياطي: إذا فشل تحميل الصورة، تأكد من أن نص body لا يزال منطقياً بمفرده.
3. التنقل السياقي: لا تكتفِ بعرض الصورة؛ أظهر التعليقات أو زر "الإعجاب" مباشرة تحتها لتعزيز التفاعل.

التحدي الخاص بك

قم بإنشاء نموذج لـ "موجز أخبار" (News Feed) في مشروعك. أرسل إشعاراً يحتوي على عنوان ونص ورابط صورة لمقال إخباري. عندما ينقر المستخدم عليه، وجهه إلى شاشة تعرض العناصر الثلاثة بشكل جميل.