هناك العديد من التحسينات التي يمكنها تحسين تحويل تطبيق الويب التقدّمي (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، مثل الفتحات الأفقية/العمودية وعرض تطبيق الويب التقدّمي (PWA) في وضع المهام المتعدّدة (مثل 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>لإدخالها في المستند. ومن الأمثلة على هذه الأداة PWA Asset Generator. - منشئ من جهة العميل، عبارة عن أداة 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 كوضع عرض لرمز تطبيق الويب التقدّمي (PWA). على الرغم من أنّ 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 تحميل البيان في الوقت المحدد، يؤدي الضغط على "Add to Home Screen" (إضافة إلى الشاشة الرئيسية) إلى وضع رمز على الشاشة الرئيسية، ولكن لا يتم توفير تجربة استخدام للتطبيق، بل سيكون مجرد اختصار لعلامة تبويب في متصفّح Safari.