شرح ملف Manifest.json وكيف يمكنك الإستفادة منه في موقعك ؟

المقدمة

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

واليوم نحن بصدد التعرف على ملف يتجاهله الكثير لكنه ذو اهمية كبيرة ويقدم ميزات مفيدة ايضاً، الا وهو ملف Manifest.json وهو عبارة عن ملف يتم إضافته في المجلد الرئيسي لموقعك مع كتابة بعض السطور البرمجية في داخله (والتي هي ستكون جزء من موضوع مقالتنا هذه) والتي تساعد المتصفحات على فهم موقعك ومعرفة اهم الملعومات اللازمة لتشغيله، بالإضافة إلى بعض الخواص الإضافية التي سنشرحها في هذه المقالة.

ما هي فائدة ملف Manifest.json ؟

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

ويساعدك ايضاً في السماح لزوارك بإضافة موقعك من ضمن تطبيقاتهم على الصفحة الرئيسية الخاصة بأجهزتهم (هواتف وحواسيب).

كيف يمكنني تركيب ملف Manifest.json في موقعي ؟

في البداية نحتاج لتهيئة ميزة الـ Service Worker ثم نقوم بإكمال الخطوات ادناه، يمكنك مراجعهة هذه المقالة التي شرحنا فيها هذه الخطوة بالتفصيل وما يمكن ان تضيفه من مميزات لموقعك.

أولاً نقوم بإنشاء ملف إسمه manifest.json في المجلد الرئيسي الخاص بالموقع الإلكتروني الذي تريد تركيب الملف عليه ثم نضع الكود التالي بداخله:

{
  "short_name": "GRE",
  "name": "GRE Development",
  "description": "يتم هنا كتابة وصف للموقع",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#d13737",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "#d13737",
  "screenshots": [
    {
    "src": "screenshot1.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  },
  {
    "src": "screenshot2.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  }
  ],
  "lang": "ar-AR",
  "dir": "rtl"
}

دعنا نشرح محتويات هذا الملف وما يجب عليك تعديله.

في البداية، هذا الكود هو عبارة عن كود مكتوب بطريقة الـ JSON والتي هي عبارة عن طريقة متفق عليها من قبل لغات البرمجة من اجل تعبئة البيانات وإستدعائها وقت الحاجة، حيث هذه الاخيرة هي ليست لغة برمجية انما طريقة لكتابة البيانات التي تحتاج استدعائها من اي لغة برمجية. وفي مثالنا هذا نحن نقوم بكتابة بعض المعلومات من خلال صيغة الكتابة هذه من اجل السماح للمتصفح بقرائتها وفهم بعض الأمور التي يحتاجها.

دعنا نتفق على انه لكل سطر شيئان وهما المفتاح والقيمة مثلاً في السطر الأول المفتاح هو short_name والقيمة هي GRE Development. الأن نأتي الى شرح وضيفة كل مفتاح من هذه المفاتيح وتقوم انت بتعديل قيمتها على حسب احتياجك.

1. short_name: سيتم إستخدام هذا الإسم من قبل المتصفح في الأماكن المحدودة المساحة، حيث يجب ان تكون قيمته عبارة عن إسم مختصر او إسم صغير لموقعك.
   
2. name: يستخدم المتصفح هذا المفتاح كعنوان رئيسي لموقعك (إسم الموقع الكامل).
3. icons: عندما يقوم زائر موقعك بإضافة الموقع إلى القائمة الرئيسية الخاصة بهاتفه ليكون من ضمن التطبيقات سوف يقوم المتصفح تلقائياً بإستدعاء صورة موقعك من خلال هذا المفتاح والذي يحوي على قيمة من نوع Array او مصفوفة، كل ما عليك فعله هو كتابة مسار الصورة بالأحجام 192x192 و 512x512.
   
4. start_url: تكون قيمة هذا المفتاح هو مسار الصفحة الرئيسية (او الصفحة التي تريد ضبط اعدادات ملف الـ manifest.json الخاص بها).
5. background_color: وهو لون خلفية الموقع حيث سيتم إستخدامه في الصفحة الأولى التي يتم إضهارها من قبل المتصفح والتي تحوي على خلفية بهذا اللون مع شعار موقعك الذي وضعته في مفتاح icon، ويتم عرض هذه الصفحة اثناء عملية تحميل الموقع عند الدخول اليه (بمعنى آخر، يقوم المتصفح بإنشاء صفحة إنتظار تكون بهذا الشكل الذي شرحناه ويعرضها في الوقت الذي يكون فيه الموقع قيد التحميل) وتسمى هذه الصفحة بـ Splash Screen.
   
6. display: هذا المفتاح يقوم بإعلام المتصفح بطريقة عرض موقعك على جهاز الزائر الذي يقوم بتنصيب تطبيقه حيث يقبل هذا المفتاح قيم محددة والتي هي:
   - fullscreen: عرض بكامل حجم الشاشة، ويتميز هذا العرض بإخفاء جميع خواص المتصفح ليبدو كما لو انه تطبيقاً وليس إختصاراً.
   - standalone: عرض بشكل منفصل، ويتميز هذا بنفس خواص طريقة العرض السابقة لكن يتم فتح موقعك على شكل تطبيق منفصل لا علاقة له بالمتصفح.
   - minimal-ui: هذا العرض مشابه لطريقة العرض الأولى لكنه يتميز بإضافة بعض الأزرار الى الموقع مثل زر الرجوع الى الصفحة السابقة وزر التقدم..الخ.
   - browser: هذه هي القيمة الإفتراضية التي يستخدمها المتصفح والتي تجعل الضغط على التطبيق عبارة عن عملية تحويل الى المتصفح ويفتح موقعك.
   
7. orientation: هذا المفتاح خاص بإتجاه الصفحة ويحوي على عدة قيم من ضمنها landscape و portrait، حيث يمكنك استخدام landscape لإجبار المتصفح على تشغيل موقعك بالشكل العرضي.
   
   
8. theme_color: هذا المفتاح يساعدك على تحديد لون الخاصية الشريط العلوي لموقعك عند إضافته كتطبيق على سطح المكتب الخاص بأجهزة الحاسوب.
   
   
9. screenshots: وهو مفتاح تكون قيمته عبارة عن لقطات لموقعك يتم استخدامها من قبل المتصفح لأغراض تخص السرعة.
   
   
10. lang: هذا المفتاح يخص اللغة، حيث يتم من خلاله تحديد لغة موقعك الرئيسية وتكون قيمته en-US للغة الإنجليزية و ar-AR للغة العربية.
    
    
11. dir: يحدد هذا المفتاح إتجاه النص في موقعك، حيث تكون قيمته rtl في حال اذا كان اتجاه النص من اليمين الى اليسار او ltr إذا كان اتجاه الموقع من اليسار الى اليمين او auto لترك المتصفح يرتب النص بأفضل شكل.
    

بعد إكمال كتابة وتعديل جميع تعليمات الملف الداخلية نقوم بإضافة الكود التالي الى جميع صفحات الموقع وفي داخل وسم <head> الخاص بكل صفحة من الموقع:

<link rel="manifest" href="/manifest.json">

كيفية فحص وتصحيح ملف Manifest.json ؟

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

أولاً: ندخل الى الصفحة الرئيسية الخاصة بموقعها.

ثانياً: نقوم بالدخول الى ادوات المطورين المقدمة من كوكل من الضغط على علامة النقاط الثلاثة الموجودة على احد جوانب المتصفح ثم الضغط على More tools ثم نضغط على Developer tools او من خلال الضغط على Ctrl+Shift+i من لوحة المفاتيح من اجل الوصول السريع لها.

ثالثاً: نقوم بالضغط على تبويب Application من اعلى القائمة وكما موضح في الصورة ادناه.

رابعاً: نضعط على تبويب Manifest من القائمة الجانبية، لتظهر كافة التفاصيل التي كتبناه، وفي حال وجود اي مشكلة سوف يتم اخبارنا في هذا الجزء مع شرح المشكلة.

الخلاصة

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