Web App Manifest
تعريف بيانات PWA الوصفية باستخدام ملف manifest.json
Web App Manifest درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما الذي يحدده ملف Manifest
ملف بيان تطبيق الويب هو ملف JSON يخبر المتصفح بكيفية تثبيت الصفحة كتطبيق: الاسم الذي يجب استخدامه، والأيقونة التي يجب عرضها، وعنوان URL الذي يجب تشغيله، ونظام الألوان الذي يجب تطبيقه، ووضع العرض الذي يجب استخدامه، مثل standalone أو fullscreen أو browser.
ربط ملف Manifest
أشِر إلى ملف البيان من كل صفحة ينبغي أن تكون قابلة للتثبيت، وذلك بإضافة <link rel="manifest" href="/manifest.webmanifest"> داخل head. يجلبه المتصفح مرة واحدة ويخزّنه مؤقتًا، ثم يلتقط تحديثات ملف البيان عند عمليات التحميل اللاحقة.
<link rel="manifest" href="/manifest.webmanifest">الحقول المطلوبة بالحد الأدنى
لكي يعرض المتصفح خيار "Install app"، يجب أن يحتوي ملف البيان على الأقل على: name (الاسم الكامل)، وshort_name (التسمية على الشاشة الرئيسية، نحو 12 محرفًا)، وstart_url، وdisplay (عادةً "standalone")، ومصفوفة icons تتضمن ملفي PNG بأبعاد 192x192 و512x512 على الأقل.
{
"name": "Coddy Learn",
"short_name": "Coddy",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1f2937",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}start_url
هو عنوان URL الذي يُفتح عند النقر على أيقونة التطبيق المثبت. غالبًا ما يكون / للصفحة الرئيسية، ويمكن أن يتضمن معاملات استعلام لأغراض التحليلات، مثل "start_url": "/?source=pwa"، لتمييز الجلسات التي بدأت من التطبيق المثبت عن جلسات المتصفح.
أوضاع display
يمكن أن تكون قيمة display هي "browser" لعرض عناصر المتصفح المعتادة، أو "minimal-ui" لعرض بعض هذه العناصر، أو "standalone" لإخفائها ليبدو التطبيق كتطبيق مستقل، أو "fullscreen" لإخفاء شريط الحالة. ويُعد standalone الخيار المعتاد لتطبيقات PWA.
الأيقونات وMaskable
أدرج أيقونة ذات غرض "maskable" حتى يتمكن Android من قص الأيقونة لتتوافق مع بقية أيقونات الشاشة الرئيسية: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. تتضمن الأيقونات القابلة للقناع منطقة آمنة ليقص النظام منها.
theme_color وbackground_color
تحدد theme_color لون شريط العنوان عند تشغيل التطبيق داخل المتصفح. ويُعرض background_color كلون لخلفية شاشة البداية قبل تحميل الصفحة. طابقهما مع الألوان الأساسية لنظام التصميم لديك للحصول على تجربة تشغيل متقنة.
orientation
تؤدي القيمة "orientation": "portrait" إلى قفل التطبيق على الوضع العمودي عند تثبيته. وتشمل البدائل "any" و"landscape" و"portrait-primary". تترك معظم تطبيقات PWA العامة هذه القيمة دون تحديد، وتدع الجهاز يقرر الاتجاه.
أهلية التثبيت
لكي يعرض المتصفح خيار "Install"، يجب تقديم الصفحة عبر HTTPS، وتسجيل Service Worker يتعامل مع أحداث fetch، وربط ملف Manifest صالح يحتوي على الحقول الدنيا، واستيفاء مؤشرات التفاعل، مثل تفاعل المستخدم مع الصفحة.
تحديث ملف Manifest
تخزّن المتصفحات ملف البيان مؤقتًا. ولإجبارها على تحديثه بعد إجراء تعديلات، غيّر عناوين URL للأيقونات، إذ يمكن استخدام معامل استعلام لكسر التخزين المؤقت، أو انتظر؛ فأغلب المتصفحات تعيد التحقق دوريًا. لا توجد واجهة API لفرض التحديث، لذا صمّم التطبيق على افتراض أن المستخدمين قد يشغّلون ملف بيان قديمًا قليلًا لبعض الوقت.
اختبار ملف Manifest
تعرض علامة التبويب Application في Chrome DevTools ملف البيان بعد تحليله، والقيم المحسوبة، وأخطاء التحقق. ويفحص تدقيق PWA في Lighthouse كل متطلبات التثبيت ويبلغك بما ينقص. استخدم الأداتين أثناء التطوير للتأكد من أهلية التثبيت.
اختبار المعرفة
ماذا تفعل قيمة display: "standalone" في ملف بيان تطبيق الويب؟
ملخص
يخبر ملف بيان تطبيق الويب (manifest.webmanifest) المتصفح بكيفية تثبيت صفحتك كتطبيق: name وshort_name وstart_url وdisplay وtheme_color وأيقونات icons، بما فيها أيقونتا 192 و512 وأيقونة maskable لنظام Android. اربطه باستخدام <link rel="manifest">، وتأكد من استخدام HTTPS وService Worker لإتاحة التثبيت، ثم اختبر التطبيق في Chrome DevTools ومن خلال تدقيق PWA في Lighthouse.
الأسئلة الشائعة
هل درس «Web App Manifest» مجاني؟
نعم — نص درس «Web App Manifest» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «Web App Manifest»؟
تعريف بيانات PWA الوصفية باستخدام ملف manifest.json تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «Web App Manifest»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.