تم إنشاء تطبيقات الويب التقدّمية (PWA) وتحسينها باستخدام واجهات برمجة التطبيقات الحديثة لتقديم إمكانات محسَّنة وموثوقية وإمكانية تثبيت مع الوصول إلى أي مستخدم في أي مكان وعلى أي جهاز باستخدام قاعدة رموز برمجية واحدة. ولمساعدتك في إنشاء أفضل تجربة ممكنة، استخدِم قوائم التحقق والاقتراحات الأساسية والأمثل لإرشادك.
قائمة التحقّق الأساسية لتطبيق الويب التقدّمي
تصف قائمة التحقق من تطبيقات الويب التقدمية العوامل التي تجعل التطبيق قابلاً للتثبيت والاستخدام من قبل جميع المستخدمين، بغض النظر عن الحجم أو نوع الإدخال.
يؤدي الأداء دورًا كبيرًا في نجاح أي تجربة على الإنترنت، لأنّ المواقع الإلكترونية العالية الأداء تجذب المستخدمين وتحتفظ بهم بمعدّل أكبر مقارنةً بالمواقع المنخفضة الأداء. ركِّز على التحسين لزيادة مقاييس الأداء التي تركّز على المستخدم.
الأسباب
وتُعد السرعة عاملاً أساسيًا في تشجيع المستخدمين على استخدام تطبيقك.
في الواقع، كلما ازدادت أوقات تحميل الصفحة من ثانية واحدة إلى عشر ثوانٍ،
تزداد احتمالية ارتداد المستخدم بنسبة %123. لا يتوقّف الأداء
عند فعالية load أيضًا. يجب ألا يتساءل المستخدمون أبدًا ما إذا كان تفاعلهم، مثل النقر على زر، قد تم تسجيله أم لا. يجب أن يكون التمرير والصور المتحركة سلسة.
يؤثر الأداء في تجربتك بالكامل، سواء في سلوك
تطبيقك أو كيف ينظر المستخدمون إليه.
تستند عمليات تدقيق الأداء في Lighthouse إلى Core Web Vitals على الرغم من اختلاف الاحتياجات، إلا أنّ النتائج العالية التي تحققها عمليات التدقيق هذه تزيد من فرص حصول المستخدمين على تجربة ممتعة. يمكنك أيضًا استخدام إحصاءات PageSpeed أو تقرير تجربة المستخدم على Chrome للحصول على بيانات أداء تطبيق الويب الفعلي.
الطريقة
اتّبِع دليلنا حول أوقات التحميل السريعة للتعرّف على كيفية بدء تشغيل تطبيق الويب التقدّمي بسرعة وتسريعه.
يمكن للمستخدمين استخدام أي متصفح من اختيارهم للوصول إلى تطبيق الويب قبل تثبيته.
الأسباب
إنّ تطبيقات الويب التقدّمية هي تطبيقات الويب في المقام الأول، ما يعني أنّها تحتاج إلى العمل على مختلَف المتصفحات.
ووفقًا لما ذكره "جيريمي كيث" في مقالة تصميم الويب المرن، فإنّ الطريقة الفعّالة لتحقيق ذلك هي تحديد الميزات الأساسية وإتاحة هذه الميزات باستخدام أبسط التقنيات الممكنة، ثم تحسين التجربة حيثما أمكن. وفي كثير من الأحيان، يعني ذلك البدء بلغة HTML فقط لإنشاء الميزات الأساسية، وتحسين تجربة المستخدم باستخدام CSS وJavaScript لإنشاء تجربة أكثر جاذبية.
لنأخذ على سبيل المثال إرسال النموذج. وأبسط طريقة لتنفيذ ذلك هي
نموذج HTML الذي يرسل طلب POST. وبعد إنشاء ذلك، يمكنك تحسين تجربة استخدام JavaScript للتحقّق من صحة النموذج وإرساله من خلال AJAX، ما يحسّن تجربة المستخدمين الذين يمكنهم دعمه.
يختبر المستخدمون موقعك الإلكتروني على مجموعة من الأجهزة والمتصفحات. لا يمكنك استهداف النهاية القصوى لهذا النطاق فحسب. استخدِم رصد الميزات لتقديم تجربة سهلة الاستخدام لأكبر عدد ممكن من المستخدمين المحتملين، بما في ذلك أولئك الذين يستخدمون متصفّحات وأجهزة غير متوفرة بعد.
الطريقة
يُعدّ تصميم الويب المرن الذي أنشأه "جيريمي كيث" مرجعًا ممتازًا يصف كيفية التفكير في تصميم الويب باستخدام هذه المنهجية التقدّمية التي تعمل على مختلَف المتصفحات.
موادّ إضافية للقراءة
- أما القسم فهم التحسين التدريجي، فيُعد مقدمة جيدة حول هذا الموضوع.
- التحسين التدريجي لمجلة Smashing Magazine: ما هو وكيف يتم استخدامها؟ يقدم مقدمة عملية وروابط لموضوعات أكثر تقدمًا.
- تتناول مقالة تنفيذ اكتشاف الميزات من MDN كيفية اكتشاف ميزة من خلال تقديم طلب بحث عنها مباشرةً.
يمكن للمستخدمين استخدام تطبيق الويب التقدّمي (PWA) على أي حجم شاشة، ويتوفّر كل محتواه بأي حجم لإطار العرض.
الأسباب
تتوفر الأجهزة بأحجام مختلفة، ويمكن للمستخدمين استخدام تطبيقك بأحجام مختلفة، حتى على الجهاز نفسه. وبالتالي، من المهم التأكّد من أنّ المحتوى لا يتلاءم مع إطار العرض فحسب، بل يشمل أيضًا إمكانية استخدام جميع الميزات والمحتوى على موقعك الإلكتروني بجميع أحجام إطارات العرض.
ولا تتغير المهام التي يريد المستخدمون إكمالها والمحتوى الذي يريدون الوصول إليه وفقًا لحجم إطار العرض. يمكنك إعادة ترتيب المحتوى الخاص بك حسب أحجام إطار العرض المختلفة، ويجب أن يكون كل المحتوى معروضًا بطريقة أو بأخرى. في الواقع، كما ذكر "لوك فروبلوسكي" في كتابه Mobile First، يمكنك تحسين تصميم الموقع الإلكتروني من خلال البدء بالتصميم البسيط وتغيير تصميمه ليتوافق مع الشاشات الأكبر حجمًا:
تتطلب الأجهزة الجوّالة من فِرق تطوير البرامج التركيز على البيانات والإجراءات الأكثر أهمية في تطبيق معيّن. لا تتوفّر مساحة على شاشة بحجم 320 × 480 بكسل لاحتوائها على عناصر غير ضرورية وغير ضرورية. عليك تحديد الأولويات.
الطريقة
تتوفر مراجع كثيرة حول التصميم السريع الاستجابة، بما في ذلك المقالة الأصلية من تأليف "إيثان ماركوت"، وهي مجموعة من المفاهيم المهمة المتعلقة به، بالإضافة إلى كمية وافرة من الكتب والمحادثات. لتضييق نطاق هذه المناقشة لتشمل جوانب المحتوى الخاصة بالتصميم سريع الاستجابة، يمكنك الاطّلاع على التصميم الذي يركز على المحتوى أولاً و التنسيقات المتجاوبة مع مختلف الأجهزة. وأخيرًا، مع أنّ الدروس في الدورة التدريبية Seven Deadly Mobile Myths من تأليف "جوش كلارك" تركّز على الأجهزة الجوّالة، يمكن استخدامها أيضًا على الأجهزة الجوّالة بشكل عام، تمامًا مثل الفيديوهات الصغيرة الحجم للمواقع الإلكترونية المتجاوبة.
عندما يكون المستخدمون غير متصلين بالإنترنت، يؤدي إبقاؤهم في تطبيق الويب التقدّمي (PWA) إلى توفير تجربة أكثر سلاسة من الرجوع إلى صفحة المتصفّح التلقائية بلا اتصال بالإنترنت.
الأسباب
يتوقع المستخدمون أن تعمل التطبيقات المثبّتة بغض النظر عن حالة الاتصال. لا يعرض التطبيق الخاص بالنظام الأساسي صفحة فارغة أبدًا عندما يكون غير متصل بالإنترنت، ويجب ألا يعرض تطبيق الويب التقدّمي (PWA) الصفحة التلقائية للمتصفّح بلا اتصال بالإنترنت أبدًا. إنّ توفير تجربة مخصّصة بلا اتصال بالإنترنت عندما ينتقل المستخدم إلى عنوان URL لم يتم تخزينه مؤقتًا أو عندما يحاول استخدام ميزة تتطلب اتصالاً، تساعد تجربة الويب في الشعور وكأنّها جزء من الجهاز الذي تعمل عليه.
الطريقة
أثناء حدث install الخاص بعامل الخدمات، يمكنك تخزين نسخة مخزّنة مؤقتًا
من صفحة مخصّصة بلا إنترنت لاستخدامها لاحقًا. إذا انقطع اتصال المستخدم بالإنترنت، يمكنك
الرد باستخدام صفحة مخصّصة بلا اتصال بالإنترنت ومخزنة مؤقتًا بشكل مسبق. يمكنك اتّباع
نموذج الصفحة المتوفرة بلا إنترنت
المخصّص للاطّلاع على مثال عملي على هذه العملية والتعرّف على كيفية تنفيذها بنفسك.
يميل المستخدمون الذين يثبّتون التطبيقات أو يضيفونها إلى أجهزتهم إلى التفاعل مع هذه التطبيقات بشكل أكبر.
الأسباب
يؤدي تثبيت تطبيق ويب تقدّمي إلى إظهار التطبيق ومظهره وتصرفه كأي تطبيق آخر مثبَّت. يتم إطلاقها من المكان نفسه الذي يشغّل فيه المستخدمون تطبيقاتهم الأخرى. ويتم تشغيل هذه الأداة في نافذة التطبيق الخاصة بها بشكل منفصل عن المتصفّح، وتظهر في قائمة المهام مثل التطبيقات الأخرى.
كما هو الحال مع التطبيقات الخاصة بالأجهزة، يكون المستخدمون الذين يثبّتون تطبيقاتك هم الجمهور الأكثر تفاعلاً، وغالبًا ما تكون مقاييس تفاعلهم متساوية مع مستخدمي التطبيق على الأجهزة الجوّالة. وتشمل هذه المقاييس عددًا أكبر من الزيارات المتكررة وأوقات أطول على موقعك الإلكتروني ومعدّلات إحالات ناجحة أعلى من الزوّار العاديين.
الطريقة
يمكنك اتّباع دليلنا القابل للتثبيت للتعرّف على كيفية جعل تطبيق PWA قابلاً للتثبيت.
قائمة التحقّق الأمثل لتطبيق الويب التقدّمي
لإنشاء تطبيق ويب تقدّمي (PWA) رائع حقًا، يبدو وكأنه التطبيق الأفضل في فئته، تحتاج إلى أكثر من مجرد قائمة التحقق الأساسية. تهدف قائمة التحقق المثلى إلى تطبيق الويب التقدّمي (PWA) إلى جعل تطبيق الويب التقدّمي يبدو وكأنه جزء من الجهاز الذي يعمل عليه مع الاستفادة من الميزات التي تجعل الويب فعّالاً.
في الحالات التي لا يكون فيها الاتصال مطلوبًا بشكل تام، يعمل تطبيقك بلا اتصال بالإنترنت تمامًا كما يعمل على الإنترنت.
الأسباب
بالإضافة إلى توفير صفحة مخصّصة بلا اتصال بالإنترنت، يتوقّع المستخدمون أن تكون تطبيقات الويب التقدّمية قابلة للاستخدام بلا اتصال بالإنترنت. على سبيل المثال، يجب أن تتضمّن تطبيقات السفر والخطوط الجوية تفاصيل الرحلات وبطاقات صعود الطائرات تكون متاحة بسهولة بلا اتصال بالإنترنت. أمّا تطبيقات الموسيقى والفيديو وبث البودكاست، فيُفترض أن تتيح التشغيل بلا إنترنت. ويجب أن تخزّن التطبيقات الاجتماعية وتطبيقات الأخبار المحتوى الحديث في ذاكرة التخزين المؤقت ليتمكن المستخدمون من قراءته بلا اتصال بالإنترنت. ويتوقّع المستخدمون أيضًا أن تظل المصادقة تتم بلا اتصال بالإنترنت، لذا يجب التصميم للمصادقة بلا اتصال بالإنترنت. يوفّر تطبيق الويب التقدّمي (PWA) بلا اتصال بالإنترنت للمستخدمين تجربة استخدام مشابهة للتطبيق.
الطريقة
بعد تحديد الميزات التي يتوقع المستخدمون العمل بها بلا اتصال بالإنترنت، عليك إتاحة المحتوى الخاص بك وتعديله لملاءمة السياقات بلا اتصال بالإنترنت. يمكنك استخدام IndexedDB، وهو نظام تخزين NoSQL مُضمَّن في المتصفح، لتخزين البيانات واستردادها، وميزة المزامنة في الخلفية للسماح للمستخدمين باتخاذ إجراءات بلا اتصال بالإنترنت وتأجيل اتصالات الخادم حتى يصل المستخدم إلى اتصال ثابت مرة أخرى. يمكنك أيضًا الاستعانة بعاملي الخدمات لتخزين أنواع أخرى من المحتوى، مثل الصور وملفات الفيديو والملفات الصوتية للاستخدام بلا اتصال بالإنترنت، وتنفيذ جلسات آمنة وطويلة الأجل للحفاظ على مصادقة المستخدمين. من منظور تجربة المستخدم، يمكنك استخدام الشاشات الهيكلية التي تتيح للمستخدمين معرفة السرعة والمحتوى أثناء التحميل، ما قد يؤدي إلى العودة إلى المحتوى المخزَّن مؤقتًا أو مؤشرًا متاحًا بلا اتصال بالإنترنت حسب الحاجة.
اجتازت جميع تفاعلات المستخدمين متطلبات تسهيل الاستخدام WCAG 2.0.
الأسباب
يريد معظم المستخدمين في مرحلة ما من حياتهم استخدام تطبيق الويب التقدّمي (PWA) بطريقة مشمولة في متطلبات تسهيل الاستخدام WCAG 2.0. تختلف قدرة المستخدمين على التفاعل مع تطبيق الويب التقدّمي (PWA) وفهمه، ويمكن أن تكون الاحتياجات مؤقتة أو دائمة. ومن خلال إتاحة الوصول إلى تطبيق الويب التقدّمي (PWA)، يمكنك استخدامه للجميع.
الطريقة
وتُعدّ
مقدمة عن إمكانية الوصول إلى الويب من W3C نقطة بداية جيدة. ويجب إجراء معظم اختبارات تسهيل الاستخدام
يدويًا. يمكن أن تساعدك أدوات مثل عمليات تدقيق تسهيل الاستخدام
في Lighthouse وax
وإحصاءات تسهيل الاستخدام
في برمجة بعض اختبارات تسهيل الاستخدام. من المهم أيضًا
استخدام عناصر صحيحة دلاليًا بدلاً من إعادة إنشائها
بنفسك، مثل العنصرَين a وbutton. يضمن ذلك استيفاء توقعات تسهيل الاستخدام عند الحاجة إلى إنشاء ميزات أكثر تقدّمًا (مثل وقت استخدام الأسهم
مقابل علامات التبويب).
وتقدّم بطاقات التغذية A11Y نصائح ممتازة في هذا الشأن في ما يتعلق ببعض المكوّنات الشائعة.
يمكن اكتشاف تطبيق الويب التقدّمي (PWA) بسهولة من خلال البحث.
الأسباب
تُعدّ القدرة على اكتشاف المواقع الإلكترونية والتطبيقات من خلال البحث إحدى أكبر مزايا الويب. في الواقع، أكثر من نصف جميع الزيارات إلى الموقع الإلكتروني تأتي من البحث المجاني. إنّ التأكد من توفّر عناوين URL أساسية للمحتوى ومن أنّ محركات البحث يمكنها فهرسة موقعك الإلكتروني هو أمر مهم للسماح للمستخدمين المحتملين بالعثور على تطبيق الويب التقدّمي الخاص بك. وينطبق ذلك على وجه الخصوص عند استخدام العرض من جهة العميل.
الطريقة
تأكَّد أولاً من أنّ كل عنوان URL يتضمّن عنوانًا وصفيًا فريدًا ووصفًا تعريفيًا. بعد ذلك، يمكنك استخدام Google Search Console وعمليات تدقيق تحسين محركات البحث في Lighthouse لتصحيح الأخطاء في قابلية اكتشاف تطبيق الويب التقدّمي وحلّها. يمكنك أيضًا استخدام أدوات مالك الموقع الإلكتروني على Bing أو Yandex، ومراعاة تضمين البيانات المنظَّمة باستخدام مخططات من Schema.org في تطبيق الويب التقدّمي PWA.
يسهل استخدام تطبيق الويب التقدّمي (PWA) باستخدام الماوس أو لوحة المفاتيح أو قلم الشاشة أو اللمس.
الأسباب
توفّر الأجهزة مجموعة متنوعة من طرق الإدخال، ويجب أن يتمكّن المستخدمون من التبديل بينها بسلاسة أثناء استخدام التطبيق. وبالأهمية نفسها، يجب ألا تعتمد أساليب الإدخال على حجم الشاشة، أي أنّ إطارات العرض الكبيرة يجب أن تتيح اللمس، ويجب أن تتوافق إطارات العرض الصغيرة مع لوحات المفاتيح وأجهزة الماوس. ننصحك قدر الإمكان بالتأكد من أنّ تطبيقك وجميع ميزاته تتيح استخدام أي طريقة إدخال قد يختارها المستخدم. عند الاقتضاء، حسِّن التجارب للسماح بعناصر تحكُّم خاصة بالإدخال أيضًا (مثل السحب لإعادة التحميل).
الطريقة
توفّر Pointer Events API واجهة موحّدة للعمل مع خيارات إدخال مختلفة، وهي مفيدة بشكل خاص لإضافة التوافق مع قلم الشاشة. لإتاحة عمل كل من اللمس ولوحة المفاتيح، احرص على استخدام العناصر الدلالية الصحيحة (رموز الارتساء والأزرار وعناصر التحكّم في النماذج وما إلى ذلك) وليس إعادة إنشائها باستخدام محتوى HTML غير دلالي. عند تضمين التفاعلات التي يتم تفعيلها عند تمرير مؤشر الماوس ، تأكّد من إمكانية تفعيلها أيضًا عند النقر.
عند طلب إذن لاستخدام واجهات برمجة التطبيقات الفعّالة، قدِّم سياقًا ولا تسأل إلا عند الحاجة إلى واجهة برمجة التطبيقات.
الأسباب
واجهات برمجة التطبيقات التي تؤدي إلى عرض طلب للحصول على إذن، مثل الإشعارات ورصد الموقع الجغرافي وبيانات الاعتماد، مصمّمة بشكل متعمّد لتكون مزعجة للمستخدم لأنّها غالبًا ما تكون مرتبطة بميزات فعّالة تتطلّب الموافقة. ويؤدي عرض هذه الطلبات بدون سياق إضافي، كما هو الحال عند تحميل الصفحة، إلى تقليل احتمال قبول المستخدمين لهذه الأذونات وزيادة احتمال عدم ثقتهم بها في المستقبل. بدلاً من ذلك، لا يتم تشغيل هذه الطلبات إلا بعد تقديم مبرر منطقي ضمن السياق للمستخدم حول سبب احتياجك إلى هذا الإذن.
الطريقة
تُعدّ مقالة تجربة المستخدم على الأذونات ومقالة الطرق الصحيحة لطلب الأذونات من المستخدمين من UX Planet مرجعَين جيدَين لفهم كيفية تصميم طلبات الحصول على أذونات، والتي تنطبق على جميع تطبيقات الويب التقدّمية (PWA) مع التركيز على الأجهزة الجوّالة.
يساهم الحفاظ على صحة قاعدة الرموز في تسهيل تحقيق أهدافك وتقديم ميزات جديدة.
الأسباب
ينطوي إنشاء تطبيق ويب حديث على الكثير من الأمور. احرص على تحديث تطبيقك باستمرار والحفاظ على حالة قاعدة الرموز على تسهيل تقديم ميزات جديدة تلبي الأهداف الأخرى الموضّحة في قائمة التحقّق هذه.
الطريقة
هناك عدد من عمليات الفحص ذات الأولوية العالية لضمان توفّر قاعدة رموز سليمة:
- تجنب استخدام المكتبات ذات الثغرات الأمنية المعروفة.
- يُرجى التأكد من عدم استخدام واجهات برمجة تطبيقات تم إيقافها نهائيًا.
- أزِل ممارسات الترميز غير الآمنة من قاعدة الرموز (مثل استخدام
document.write()أو استخدام أدوات معالجة أحداث الانتقال غير السلبية) - يمكنك أيضًا الترميز بشكل دفاعي لضمان عدم تعطُّل تطبيق الويب التقدّمي (PWA) في حال تعذّر تحميل الإحصاءات أو المكتبات الأخرى التابعة لجهات خارجية.
- ننصحك بطلب تحليل الرمز البرمجي الثابت، مثل استخدام أداة Lint، بالإضافة إلى اختبار آلي في عدة متصفّحات وقنوات إصدار. ويمكن أن تساعد هذه التقنيات في رصد الأخطاء قبل تضمينها في مرحلة الإنتاج.