تحسينات

هناك العديد من التحسينات التي يمكن أن تُحسِّن من الإحالات الناجحة واستخدام تطبيقك المتوافق مع الأجهزة الجوّالة.

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

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

اختصارات التطبيقات في Android وmacOS

للوصول إلى هذه القائمة، على المستخدمين النقر بزر الماوس الأيمن أو الضغط مع الاستمرار على رمز تطبيق الويب التقدّمي.

يتم تحديد الاختصارات في عنصر shortcuts من البيان. يأخذ هذا الإجراء صفيفًا من العناصر التي تتضمّن السمات التالية:

name
النص الذي سيتم عرضه للمستخدم، عادةً في قائمة سياق
url
عنوان URL الذي يجب أن يحمِّله تطبيق الويب المتوافق مع الأجهزة الجوّالة عندما يشغّله المستخدم من هذا الاختصار. ويجب أن يكون عنوان URL ضمن نطاق تطبيق الويب التقدّمي (PWA) وأن يرتبط بصفحة معيّنة في الميزة التي يصفها name أو short_name.
short_name
(اختياري) اسم أقصر يُستخدَم عندما لا تتوفّر مساحة كافية لعرض القيمة الكاملة للحقل name.
description
(اختياري) وصف لمهام هذا الاختصار
icons
(اختياري) صفيف من عناصر الرموز التي تحتوي على حقول src وtype وsizes وحقل purpose اختياري، يصف الصور التي يجب أن تمثّل الاختصار

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

يحدِّد نموذج الرمز البرمجي التالي اختصارات مختلفة للتطبيقات يمكنك تجربتها في حال تثبيت التطبيق على جهاز Android باستخدام Chrome أو على الكمبيوتر المكتبي باستخدام Edge أو Chrome.

iOS وiPadOS

عند نشر تطبيقات الويب التقدّمية (PWA)، هناك بعض التحسينات التي يمكنها تحسين تجربة المستخدمين على Safari على أجهزة iOS/iPadOS.

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

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

تُعرف هذه الصور باسم صور بدء التشغيل على أجهزة Apple، وتستخدم السمة rel بالقيمة apple-touch-startup-image كما في:

<link rel="apple-touch-startup-image" href="ios-startup.png">

يكمن التحدي في أنّ صورة بدء التشغيل يجب أن تكون بحجم النافذة نفسه الذي سيظهر لتطبيقك عند فتحه. وبالتالي، ستحتاج أجهزة iOS وiPadOS المختلفة إلى صور مختلفة. يجب تغطية المزيد من الحالات على جهاز iPad، مثل عمليات الفتح الأفقية/العمودية وعرض تطبيق الويب التقدّمي في وضع تعدد المهام (مثل 1/3 أو 1/2 أو 2/3 من الشاشة).

يمكنك الاطّلاع على قائمة معدَّلة بأحجام شاشات iOS وiPadOS في إرشادات واجهة المستخدم من Apple.

يمكن ضبط نُسخ مختلفة من صورة الإطلاق باستخدام طلب بحث عن الوسائط داخل السمة media:

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

أنماط تصميم صور بدء التشغيل في نظام التشغيل iOS

إنّ تحديد صور بدء التشغيل هو عمل شاق، لذلك لدينا أداتان لإنشاء الصور وضبطها تلقائيًا:

  • يتم دمج عملية الإنشاء الثابت مع نظام الإنشاء، وإنشاء جميع الصور الثابتة بتنسيق PNG، وتقديم رمز HTML مع عناصر <link> لإدراجها في المستند. وأداة إنشاء مواد عرض تطبيقات الويب التقدّمية هي مثال على هذه الأدوات.
  • أداة إنشاء من جهة العميل، وهي أداة JavaScript يمكنها تضمين نسخة واحدة أو أكثر من base64 لصورة بدء التشغيل في <link> العناصر المُحقَّقة استنادًا إلى نوع الجهاز الحالي وحجم الشاشة. يمكنك استخدام لوحة في الذاكرة وعرض الصورة وتحويلها إلى عنوان URL data: باستخدام ملف PNG. مكتبة PWA Compat هي مكتبة سهلة الاستخدام من جهة العميل تُجري ذلك عن طريق استنساخ شاشة الإطلاق النموذجية لنظام التشغيل Android.

رصد تطبيق الويب التقدّمي (PWA) على أنظمة Apple للأجهزة الجوّالة

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

لتجنّب قراءة سلسلة وكيل المستخدم، تحقَّق من السمة standalone للكائن navigator. هذه خاصية غير عادية، ولا تتوفّر إلا في محرّك WebKit على نظامَي التشغيل iOS وiPadOS.

  • إذا كان الرمز navigator.standalone هو undefined، يعني ذلك أنّ المستخدم ليس على جهاز iPadOS أو iOS.
  • إذا كان navigator.standalone هو false، يعني ذلك أنّ المستخدم فتح تطبيق الويب التقدّمي في المتصفّح ويستخدمه هناك.
  • إذا كانت قيمة navigator.standalone هي true، يعني ذلك أنّ المستخدم فتح تطبيق الويب التقدّمي (PWA) من الشاشة الرئيسية وسيحصل على تجربة تطبيق الويب التقدّمي المستقل (PWA).

إتاحة وضع ملء الشاشة

في متصفّح Safari على أجهزة iOS وأجهزة iPad، لا يتوفّر سوى display: standalone كوضع عرض لتطبيقك المتوافق مع الأجهزة الجوّالة (PWA).

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

سلوك تلقائي مستقل (على يمين الشاشة) وشاشة iOS بملء الشاشة (على يمين الشاشة)

في حال إضافة العلامة التالية في ملف HTML، سينتقل تطبيقك المتوافق مع الأجهزة الجوّالة على نظامَي التشغيل iOS وiPadOS إلى وضع ملء الشاشة، ولكنّه يختلف عن نظام التشغيل Android.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

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

عند استخدام هذا الوضع، يجب الانتباه إلى التصميم لأنّ نظام التشغيل سيعرض الأيقونات باللون الأبيض دائمًا، لذا يجب دائمًا استخدام خلفيات فاتحة في أعلى الشاشة مع محتوى فاتح. ومن المهم أيضًا استخدام متغيّرات بيئة CSS لعرض المحتوى في المنطقة الآمنة، كما هو موضّح في App Design Chapter.

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

موثوقية التثبيت

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

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

الموارد