بيان تطبيق الويب

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

يجب أن يتضمّن كل تطبيق ويب تقدّمي (PWA) بيانًا واحدًا لكل تطبيق، ويكون عادةً مستضافًا في المجلد الجذر، ومرتبطًا بجميع صفحات HTML التي يمكن تثبيت تطبيق الويب التقدّمي (PWA) منها. إضافتك الرسمية هي .webmanifest، لذا يمكنك تسمية البيان باسم مثل app.webmanifest.

إضافة بيان تطبيق الويب إلى تطبيق الويب التقدّمي (PWA)

لإنشاء بيان تطبيق الويب، عليك أولاً إنشاء ملف نصي يحتوي على كائن JSON يحتوي على حقل name على الأقل مع قيمة سلسلة:

app.webmanifest:

{
   "name": "My First Application"
}

ولكن إنشاء الملف ليس كافيًا، فيحتاج المتصفح إلى معرفة وجوده أيضًا.

الربط بالبيان

لإعلام المتصفِّح ببيان تطبيق الويب، عليك ربطه بتطبيق الويب التقدّمي (PWA) باستخدام عنصر HTML <link> وضبط السمة rel على manifest في جميع صفحات HTML في تطبيق الويب التقدّمي (PWA). ويشبه هذا طريقة ربط ورقة أنماط CSS بمستند.

index.html:

<html lang="en">
  <title>This is my first PWA</title>
  <link rel="manifest" href="/app.webmanifest">

تصحيح أخطاء البيان

لضمان إعداد البيان بشكل صحيح، يمكنك استخدام "Inspector" (أداة الفحص) في Firefox و"أدوات مطوري البرامج" في كل متصفِّح مستنِد إلى Chromium.

لمتصفّحات Chromium

في "أدوات مطوري البرامج"

  1. في اللوحة اليمنى، ضمن التطبيق، اختَر ملف البيان.
  2. تحقَّق من حقول البيان التي تم تحليلها من خلال المتصفِّح.

لأجهزة Firefox

  1. افتح "Inspector" (أداة الفحص).
  2. انتقِل إلى علامة التبويب "التطبيق".
  3. حدد خيار البيان في اللوحة اليمنى.
  4. تحقَّق من حقول البيان التي تم تحليلها من خلال المتصفِّح.

تصميم تجربة تطبيق الويب التقدّمي (PWA)

بعد أن أصبح تطبيق الويب التقدّمي (PWA) مرتبطًا ببيانه، يحين وقت ملء بقية الحقول لتحديد تجربة المستخدمين.

الحقول الأساسية

تمثّل المجموعة الأولى من الحقول المعلومات الأساسية حول تطبيق الويب التقدّمي (PWA). وتُستخدَم لإنشاء رمز ونافذة تطبيق الويب التقدّمي (PWA) المثبَّتَين وتحديد كيفية بدء تشغيله. وهي:

name
الاسم الكامل لتطبيق الويب التقدّمي (PWA) سيظهر إلى جانب الرمز في الشاشة الرئيسية أو مشغّل التطبيقات أو قاعدة الإرساء أو القائمة في نظام التشغيل.
short_name
اختياري اسم أقصر لتطبيق الويب التقدّمي (PWA) يُستخدم عندما لا تتوفّر مساحة كافية لعرض القيمة الكاملة للحقل name. يجب ألا يزيد طول كلمة المرور عن 12 حرفًا للحدّ من احتمال اقتطاعها.
icons
مصفوفة من كائنات الرموز تحتوي على حقول src وtype وsizes وحقول purpose اختيارية تصف الصور التي يجب أن تمثّل تطبيق الويب التقدّمي (PWA).
start_url
عنوان URL الذي من المفترض أن يتم تحميله في تطبيق الويب التقدّمي (PWA) عندما يبدأ المستخدم تشغيله من الرمز المثبَّت ويُنصَح باستخدام مسار مطلق، فإذا كانت الصفحة الرئيسية لتطبيق الويب التقدّمي (PWA) هي جذر موقعك الإلكتروني، يمكنك ضبط هذه السياسة على "/" لفتحها عند بدء تشغيل تطبيقك. في حال عدم تقديم عنوان URL للبدء، يمكن للمتصفّح استخدام عنوان URL الذي تم تثبيت تطبيق الويب التقدّمي (PWA) منه كبداية. ويمكن أن يكون عبارة عن رابط لصفحة معيّنة، مثل تفاصيل منتج بدلاً من شاشتك الرئيسية.
display
واحد من fullscreen أو standalone أو minimal-ui أو browser، يصف كيف يجب أن يرسم نظام التشغيل نافذة تطبيق الويب التقدّمي (PWA). يمكنك قراءة المزيد حول أوضاع العرض المختلفة في فصل تصميم التطبيق. تنفذ معظم حالات الاستخدام standalone.
id
سلسلة تعرِّف تطبيق الويب التقدّمي هذا بشكل فريد مقارنةً بغيره من الملفات التي قد تكون مستضافة على المصدر نفسه. وفي حال ترك السياسة بدون ضبط، سيتم استخدام start_url كقيمة احتياطية. يُرجى العلم أنّ تغيير start_url في المستقبل (مثلاً عند تغيير قيمة سلسلة طلب البحث) قد يؤدي إلى إزالة قدرة المتصفِّح على اكتشاف أنّ تطبيق الويب التقدّمي (PWA) مثبّت على جهازك.

الرموز

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

إذا أردت اختيار حجم رمز واحد فقط، يجب أن يكون 512 × 512 بكسل. ومع ذلك، يُنصح بتوفير المزيد من الأحجام، بما في ذلك الصور بحجم 192 × 192 و384 × 384 و1024 × 1024 بكسل أيضًا.

"icons": [
   {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   }
]

وإذا لم تقدّم رمزًا أو لم تكن الرموز بالحجم المقترَح، لن تتمكّن من اجتياز معايير التثبيت في بعض الأنظمة الأساسية. على الأنظمة الأساسية الأخرى، سيتم إنشاء الرمز تلقائيًا، على سبيل المثال من لقطة شاشة لتطبيق الويب التقدّمي (PWA) أو باستخدام رمز عام.

الأيقونات القابلة للإخفاء

تعمل بعض أنظمة التشغيل، مثل Android، على ضبط الرموز لتناسب الأحجام والأشكال المختلفة. على سبيل المثال، في نظام التشغيل Android 12، يمكن لمختلف الشركات المصنّعة أو الإعدادات تغيير شكل الرموز من دوائر إلى مربّعات إلى مربّعات مستديرة الزاوية. لإتاحة هذه الأنواع من الرموز التكيُّفية، يمكنك توفير رمز قابل للإخفاء باستخدام الحقل purpose.

لإجراء ذلك، قدِّم ملف صورة مربّعًا يحتوي على رمزه الرئيسي ضمن "منطقة آمنة"، وهي عبارة عن دائرة في وسط الرمز يبلغ نصف قطرها 40 في المئة من عرض الرمز. (انظر الصورة أدناه). أما الأجهزة التي تتيح استخدام الرموز القابلة للإخفاء، فستعمل على إخفاء الرمز حسب الحاجة.

المنطقة الآمنة الموضوع عليها علامة كدائرة وسط نصف قطر يبلغ 40 في المئة داخل رمز المربع.

فيما يلي مثال لأيقونة قابلة للإخفاء يتم عرضها في عدد من الأشكال شائعة الاستخدام:

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

أيقونة غير مناسبة للأيقونة القابلة للإخفاء.

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

الأيقونة ذات المساحة المتروكة أكثر مناسبة للأقنعة.

يجب أن تكون الأيقونات القابلة للإخفاء بحجم 512 × 512 على الأقل. من خلال إنشاء مجموعة، يمكنك إضافتها إلى مجموعة "icons" لتحسين تجربة الأجهزة المتوافقة:

"icons": [
   {
      "src": "/icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "/icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   },
   {
      "src": "/icons/512-maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
   },
]

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

المجموعة التالية من الحقول التي يجب تضمينها هي الحقول التي ستحسن تجربة المستخدم، على الرغم من أنها غير مطلوبة للتثبيت.

theme_color
اللون التلقائي للتطبيق، ويؤثر أحيانًا في كيفية عرض نظام التشغيل للموقع الإلكتروني (على سبيل المثال، لون النافذة وشريط العنوان على الكمبيوتر المكتبي، أو لون شريط الحالة على الأجهزة الجوّالة). يمكن أن يلغي عنصر HTML theme-color <meta> هذا اللون.
background_color
لون العنصر النائب الذي سيتم عرضه في خلفية التطبيق قبل تحميل ورقة الأنماط ويتجاهل متصفّح Safari على نظامَي التشغيل iOS وiPadOS هذا الحقل حاليًا.
scope
يغيِّر نطاق التنقل في تطبيق الويب التقدّمي (PWA)، ما يسمح لك بتحديد المحتوى الذي يتم عرضه وما لا يتم عرضه في نافذة التطبيق المثبّت. على سبيل المثال، في حال الربط بصفحة خارج النطاق، سيتم عرضها في متصفّح داخل التطبيق بدلاً من نافذة PWA. ومع ذلك، لن يؤدي ذلك إلى تغيير نطاق مشغّل الخدمات.

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

تطبيق الويب التقدّمي نفسه المثبّت على الكمبيوتر المكتبي مع لون مظهر مختلف.

عند تحديد الألوان في البيان، مثلاً داخل theme_color وbackground_color، يجب استخدام ألوان CSS المُسماة، مثل salmon أو orange، أو ألوان RGB مثل #FF5500 أو دوال الألوان بدون شفافية مثل rgb() أو hsl(). يمكنك الاطّلاع على فصل تصميم التطبيق للحصول على مزيد من المعلومات.

تجربة الميزة

شاشات البداية

في بعض الأجهزة، يتم عرض صورة ثابتة أثناء تحميل تطبيق الويب التقدّمي (PWA) لتقديم ملاحظات فورية للمستخدم.

يستخدم Android القيم theme_color وbackground_color وicon لإنشاء شاشة البداية.

عند تثبيت تطبيق ويب تقدّمي (PWA) على نظام التشغيل Android، سينشئ الجهاز شاشة بداية تتضمّن المعلومات الواردة من بيان التطبيق كما هو موضّح في الرسم البياني التالي.

تطبيق ويب تقدّمي (PWA) على شاشة البداية في Android يأخذ قيمًا مختلفة من البيان

أمّا متصفّح Safari على نظامَي التشغيل iOS وiPadOS، فلا يستخدم بيان تطبيق الويب لإنشاء شاشات البداية. بدلاً من ذلك، يستخدمون صورة مرتبطة من عنصر <link> خاص بطريقة مشابهة لطريقة تعاملهم مع الرموز. يمكنك الاطّلاع على فصل التحسينات للحصول على مزيد من التفاصيل.

الحقول الموسّعة

تقدّم مجموعة الحقول التالية معلومات إضافية عن تطبيق الويب التقدّمي (PWA). وجميعها اختيارية.

lang
علامة لغة تحدّد اللغة الأساسية لقيم البيان، مثل en للإنجليزية أو pt-BR للبرتغالية البرازيلية أو in للهندية
dir
الاتجاه لعرض حقول البيان التي تستطيع الاتجاه (مثل name وshort_name وdescription). القيم الصالحة هي auto وltr (من اليسار إلى اليمين) وrtl (من اليمين إلى اليسار).
orientation
الاتجاه المطلوب للتطبيق بعد تثبيته. قد تعين اللعبة هذا الخيار لطلب الاتجاه الأفقي فقط. يتم قبول العديد من القيم، ولكن في حال تضمينها، تكون القيمة عادةً portrait أو landscape بشكل صريح.

الحقول الترويجية

تتيح لك المجموعة الرابعة من الحقول تقديم معلومات ترويجية حول تطبيق الويب التقدّمي (PWA)، على سبيل المثال، في مسارات التثبيت والبيانات ونتائج البحث.

description
شرح لمهام تطبيق الويب التقدّمي (PWA)
screenshots
مصفوفة من عناصر لقطات الشاشة باستخدام src وtype وsizes (على غرار العنصر icons) تهدف إلى عرض تطبيق الويب التقدّمي (PWA) ما مِن قيود مفروضة على الحجم.
categories
مصفوفة من الفئات التي يجب أن ينتمي إليها تطبيق الويب التقدّمي (PWA) كتلميحات للبيانات، اختياريًا من قائمة الفئات المعروفة. وتكون هذه القيم عادةً بأحرف صغيرة.
iarc_rating_id
رقم اعتماد الاتحاد الدولي لتقييم المحتوى حسب الفئات العمرية (PWA)، إذا كان متوفّرًا لديك والغرض منه استخدامه لتحديد الأعمار التي يناسبها تطبيق الويب التقدّمي (PWA) الخاص بك.

يمكنك الاطّلاع على هذه الحقول الترويجية قيد التنفيذ اليوم. على سبيل المثال، على نظام التشغيل Android، إذا كان تطبيق الويب التقدّمي (PWA) قابلاً للتثبيت وقدَّمت قيمًا للحقلَين description وscreenshots على الأقل، يتحوّل مربّع حوار التثبيت من شريط معلومات بسيط "إضافة إلى الشاشة الرئيسية" إلى مربّع حوار تثبيت أكثر تفصيلاً مشابهًا للمربّع الذي يتوفّر من متجر التطبيقات.

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

الاطّلاع على هذه الحقول الترويجية أثناء استخدامها:

حقول الإمكانات

وأخيرًا، هناك عدد من الحقول ذات الصلة بالإمكانات المختلفة التي يمكن أن يستخدمها تطبيق الويب التقدّمي (PWA) في المتصفّحات المتوافقة، مثل الحقول shortcuts وshare_target وdisplay_overrides كما نتناول في فصل الإمكانات. وهناك أيضًا حقول، مثل related_apps وprefer_related_apps (راجِع فصل الرصد للحصول على مزيد من المعلومات)، لربط تطبيق الويب التقدّمي (PWA) بالتطبيقات المثبّتة، وغالبًا ما تكون من أحد متاجر التطبيقات.

وقد تظهر العديد من الحقول الجديدة في المستقبل، فيما تضيف المتصفّحات المزيد من الإمكانيات إلى تطبيقات الويب التقدّمية.

المراجِع