تحسينات

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

اختصارات التطبيقات

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

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

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

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

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

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

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

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

iOS وiPadOS

عند نشر التطبيقات المتوافقة مع الأجهزة الجوّالة، هناك بعض التحسينات التي يمكن أن تُحسِّن تجربة المستخدمين على 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.

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

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

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

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

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

على متصفّح 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 لعرض المحتوى في المنطقة الآمنة، كما هو موضّح في فصل تصميم التطبيق.

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

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

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

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

الموارد