هناك العديد من التحسينات التي يمكنها تحسين الإحالة الناجحة واستخدام تطبيق الويب التقدّمي (PWA).
اختصارات التطبيقات
اختصارات التطبيقات هي قائمة ثابتة من الروابط المؤدية إلى صفحات في تطبيق الويب التقدّمي (PWA)، وهي مكتوبة في بيان التطبيق. مواصفات بيان تطبيق الويب: ويتيح لك تحديد قائمة بالاختصارات لأجزاء أو ميزات مختلفة في تطبيق الويب التقدّمي (PWA)، وتسريع عملية الانتقال إلى الأقسام التي يتم الوصول إليها بشكل متكرر.
تتوفّر اختصارات التطبيقات على معظم أنظمة التشغيل المتوافقة مع أجهزة الكمبيوتر المكتبي وأجهزة Android التي تتضمّن WebAPK، وتظهر في قائمة سياقية على رمز التطبيق في الشاشة الرئيسية أو شريط التطبيقات أو شريط التطبيقات، كما في الصورة التالية:
للوصول إلى هذه القائمة، على المستخدمين النقر بزر الماوس الأيمن أو الضغط مع الاستمرار على رمز تطبيق الويب التقدّمي (PWA).
يتم تحديد الاختصارات في عضو shortcuts في البيان. يستغرق الأمر صفيفًا من الأعضاء ذوي السمات التالية:
name- النص الذي سيتم عرضه للمستخدم عادةً في قائمة سياق.
url- عنوان URL الذي يجب أن يتم تحميله من خلال تطبيق الويب التقدّمي (PWA) عندما يبدأ المستخدم تشغيله من هذا الاختصار ويجب أن يكون عنوان 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">
يكمن التحدي في أنّ صورة بدء التشغيل يجب أن تكون بحجم النافذة المحدّد لتطبيق الويب التقدّمي (PWA) عند فتحها. لذلك، ستحتاج أجهزة iOS وiPadOS المختلفة إلى صور مختلفة. يجب تغطية المزيد من الحالات على جهاز iPad، مثل عمليات الفتح الأفقية/العمودية وعرض تطبيق الويب التقدّمي في وضع تعدد المهام (مثل 1/3 أو 1/2 أو 2/3 من الشاشة).
يمكنك الاطّلاع على قائمة معدّلة بأحجام شاشات iOS وiPadOS في إرشادات واجهة Human Interface من 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>لإدخاله في المستند. ويُعدّ منشئ مواد عرض PWA مثالاً على هذه الأداة. - أداة إنشاء من جهة العميل هي أداة JavaScript يمكنها تضمين نسخة Base64 واحدة أو أكثر من صورة بدء التشغيل في العناصر التي تم إدخالها في
<link>بناءً على نوع الجهاز الحالي وحجم شاشته. يمكنك استخدام لوحة ذاكرة وعرض الصورة وتحويلها إلى معرّف موارد منتظم (URI)data:باستخدام ملف PNG. مكتبة PWA Compat هي مكتبة سهلة الاستخدام من جهة العميل لتنفيذ هذا الإجراء من خلال استنساخ شاشة تشغيل Android النموذجية.
رصد تطبيق الويب التقدّمي (PWA) على أنظمة Apple للأجهزة الجوّالة
على الرغم من أنّه عليك استخدام ميزتَي "التحسين التدريجي" و"رصد الميزات" في تطبيق الويب التقدّمي (PWA)، في بعض الحالات الحدّية التي نحتاج فيها إلى معرفة ما إذا كان المستخدم في تطبيق ويب تقدّمي (PWA) على أنظمة Apple للأجهزة الجوّالة، مثلاً عندما تريد تقديم تعليمات التثبيت أو إضافة روابط إلى تطبيقات خاصة بنظام التشغيل iOS فقط.
لتجنّب قراءة سلسلة وكيل المستخدم، تحقَّق من السمة standalone للكائن navigator. هذه ملكية غير قياسية، وهي متاحة فقط على محرك WebKit على iOS وiPadOS.
- إذا كانت قيمة
navigator.standaloneهيundefined، هذا يعني أنّ المستخدم لا يستخدم جهاز iPadOS أو iOS. - إذا كانت قيمة
navigator.standaloneهيfalse، هذا يعني أنّ المستخدم فتح تطبيق الويب التقدّمي (PWA) في المتصفّح ويستخدمه هناك. - إذا كانت قيمة
navigator.standaloneهيtrue، يعني ذلك أنّ المستخدم فتح تطبيق الويب التقدّمي (PWA) من الشاشة الرئيسية وسيحصل على تجربة تطبيق الويب التقدّمي المستقل (PWA).
إتاحة ملء الشاشة
على متصفّح Safari على أجهزة iOS وiPad، يمكن استخدام display: standalone فقط كوضع عرض لرمز تطبيق الويب التقدّمي. على الرغم من أنّ display: fullscreen غير متاح على أجهزة Android، فمن الممكن استخدام علامة وصفية غير عادية لجعل تطبيق الويب التقدّمي (PWA) يدخل في وضع ملء الشاشة.
في الصورة التالية، يمكنك رؤية تصميم تلقائي مستقلّ على اليمين مع لون مظهر، وعلى يسار تطبيق ويب تقدّمي (PWA) مع وضع iOS بملء الشاشة يتيح لك عرض المحتوى خلف شريط الحالة.
في حال إضافة العلامة التالية في رمز HTML، سيدخل تطبيق الويب التقدّمي (PWA) على نظامَي التشغيل iOS وiPadOS في وضع ملء الشاشة، ولكنّه يختلف عن تطبيق Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
في هذا الوضع، يظل شريط الحالة في الجهاز (الجزء العلوي الذي تظهر فيه رموز الساعة ومستوى البطارية ورمز الإشعارات) مرئيًا، ولكنه يُعرض فوق المحتوى بخلفية شفافة.
عند استخدام هذا الوضع، يجب توخي الحذر بشأن التصميم لأن نظام التشغيل سيعرض الرموز دائمًا باللون الأبيض، لذا يجب عليك دائمًا تباين الخلفيات أعلى الشاشة مع المحتوى الفاتح. ومن المهم أيضًا استخدام متغيّرات بيئة CSS لعرض المحتوى في المنطقة الآمنة، كما هو موضّح في App Design Chapter.
موثوقية التثبيت
لا يحمّل Safari على نظامي التشغيل iOS وiPadOS قبل الإصدار 15.4 ملف البيان من الشبكة إلا عندما يفتح المستخدم ورقة المشاركة - باستخدام رمز المشاركة داخل المتصفح - وليس عند تحميل الصفحة. لذلك، لا يتحقّق Safari مما إذا كان موقعك الإلكتروني يستخدم تطبيق ويب تقدّمي (PWA) حتى تلك اللحظة، ما قد يؤدي إلى حالات يتعذّر فيها تحميل البيان أو يستغرق وقتًا طويلاً جدًا، ويتجاهله متصفّح Safari.
عندما يتعذَّر على Safari تحميل البيان في الوقت المحدَّد، يجب الضغط على "إضافة إلى الشاشة الرئيسية" يضع رمزًا على الشاشة الرئيسية، ولكنه لا يوفر تجربة تطبيق؛ سيكون مجرد اختصار لعلامة تبويب Safari.