ما الذي يجعل تطبيق ويب تقدّميًا جيدًا؟

يلعب الأداء دورًا مهمًا في نجاح أي تجربة على الإنترنت، لأنّ المواقع الإلكترونية العالية الأداء تتفاعل مع المستخدمين وتحتفظ بهم بمعدّل أكبر مقارنةً بالمواقع المنخفضة الأداء. ركِّز على التحسين لزيادة مقاييس الأداء التي تركّز على المستخدم.

السبب

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

تستند عمليات تدقيق الأداء في Lighthouse إلى Core Web Vitals على الرغم من اختلاف الاحتياجات، إلا أنّ النتائج العالية التي تحققها عمليات التدقيق هذه تزيد من فرص حصول المستخدمين على تجربة ممتعة. يمكنك أيضًا استخدام إحصاءات PageSpeed أو تقرير تجربة المستخدم على Chrome للحصول على بيانات أداء تطبيق الويب الفعلي.

الطريقة

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

يمكن للمستخدمين استخدام أي متصفّح يختارونه للوصول إلى تطبيق الويب قبل تثبيته.

السبب

تطبيقات الويب التقدّمية هي تطبيقات الويب في المقام الأول، ما يعني أنّها تحتاج إلى العمل على مختلَف المتصفحات.

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

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

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

الطريقة

يُعدّ تصميم الويب المرن الذي أنشأه "جيريمي كيث" مرجعًا ممتازًا يصف كيفية التفكير في تصميم الويب باستخدام هذه المنهجية التقدّمية التي تعمل على مختلَف المتصفحات.

موادّ إضافية للقراءة

• أما القسم فهم التحسين التدريجي، فيُعد مقدمة جيدة حول هذا الموضوع.
• مقالة Smashing Magazine بعنوان التحسين التدريجي: ما هو؟ وكيف يمكن استخدامه؟ تقدّم مقدمة عملية وروابط إلى مواضيع أكثر تقدمًا.
• تتناول مقالة تنفيذ ميزة رصد العناصر في MDN كيفية رصد عنصر من خلال إجراء طلب بحث عنه مباشرةً.

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

السبب

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

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

تتطلب الأجهزة الجوّالة من فِرق تطوير البرامج التركيز على البيانات والإجراءات الأكثر أهمية في تطبيق معيّن. لا تتوفّر مساحة على شاشة بحجم 320 × 480 بكسل لاحتوائها على عناصر غير ضرورية وغير ضرورية. عليك تحديد الأولويات.

الطريقة

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

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

السبب

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

الطريقة

أثناء حدث install لخدمة عامل الخدمة، يمكنك تخزين صفحة بلا إنترنت مخصّصة مسبقًا لعرضها عندما يصبح المستخدم بلا إنترنت. اطّلع على إنشاء صفحة احتياطية بلا اتصال بالإنترنت للتعرّف على كيفية تنفيذها بنفسك. يُرجى العِلم أنّ Chrome سيعرض صفحة أساسية بلا إنترنت في حال عدم توفّر أي صفحة.

يميل المستخدمون الذين يثبتون التطبيقات أو يضيفونها إلى أجهزتهم إلى التفاعل مع تلك التطبيقات بشكل أكبر.

السبب

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

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

الطريقة

اتّبِع دليلنا القابل للتثبيت للتعرّف على كيفية جعل تطبيق PWA قابلاً للتثبيت.

في الحالات التي لا يكون فيها الاتصال مطلوبًا بشكل تام، يعمل تطبيقك بلا اتصال بالإنترنت تمامًا كما يعمل على الإنترنت.

السبب

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

الطريقة

بعد تحديد الميزات التي يتوقّع المستخدمون أن تعمل بلا إنترنت، عليك إتاحة المحتوى وجعله قابلاً للتكيّف مع السياقات بلا إنترنت. يمكنك استخدام IndexedDB، وهو نظام تخزين NoSQL مُضمَّن في المتصفح، لتخزين البيانات واستردادها، وميزة المزامنة في الخلفية للسماح للمستخدمين باتخاذ إجراءات بلا اتصال بالإنترنت وتأجيل اتصالات الخادم حتى يصل المستخدم إلى اتصال ثابت مرة أخرى. يمكنك أيضًا الاستعانة بعاملي الخدمات لتخزين أنواع أخرى من المحتوى، مثل الصور وملفات الفيديو والملفات الصوتية للاستخدام بلا اتصال بالإنترنت، وتنفيذ جلسات آمنة وطويلة الأجل للحفاظ على مصادقة المستخدمين. من منظور تجربة المستخدم، يمكنك استخدام شاشات الهيكل التي تمنح المستخدمين فكرة عن السرعة والمحتوى أثناء التحميل، والتي يمكن بعد ذلك الرجوع إلى المحتوى المخزّن مؤقتًا أو مؤشر عدم الاتّصال بالإنترنت حسب الحاجة.

تستوفي جميع تفاعلات المستخدم متطلبات WCAG 2.0 لإتاحة الاستخدام.

السبب

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

الطريقة

يمكنك البدء من خلال مقدّمة عن تسهيل الاستخدام على الويب الصادرة عن W3C. ويجب إجراء معظم اختبارات تسهيل الاستخدام يدويًا. يمكن أن تساعدك أدوات مثل عمليات تدقيق تسهيل الاستخدام في Lighthouse وaxe وإحصاءات تسهيل الاستخدام في إجراء بعض الاختبارات المبرمَجة لإمكانية الاستخدام. من المهم أيضًا استخدام عناصر صحيحة دلاليًا بدلاً من إعادة إنشائها بنفسك، مثل العنصرَين a وbutton. يضمن ذلك استيفاء توقعات تسهيل الاستخدام (مثل حالات استخدام الأسهم بدلاً من علامات التبويب) عندما تحتاج إلى إنشاء ميزات أكثر تقدمًا. وتقدّم بطاقات التغذية A11Y نصائح ممتازة في هذا الشأن في ما يتعلق ببعض المكوّنات الشائعة.

يمكن اكتشاف تطبيق الويب التقدّمي (PWA) بسهولة من خلال البحث.

السبب

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

الطريقة

تأكَّد أولاً من أنّ كل عنوان URL يتضمّن عنوانًا وصفيًا فريدًا ووصفًا تعريفيًا. بعد ذلك، يمكنك استخدام Google Search Console وعمليات تدقيق تحسين محركات البحث في Lighthouse لتصحيح الأخطاء وحلّ مشاكل إمكانية العثور على تطبيقك المتوافق مع الأجهزة الجوّالة. يمكنك أيضًا استخدام أدوات مالك الموقع الإلكتروني على Bing أو Yandex، ومراعاة تضمين البيانات المنظَّمة باستخدام مخططات من Schema.org في تطبيق الويب التقدّمي PWA.

يسهل استخدام تطبيق الويب التقدّمي (PWA) باستخدام الماوس أو لوحة المفاتيح أو قلم الشاشة أو اللمس.

السبب

توفّر الأجهزة مجموعة متنوعة من طرق الإدخال، ويجب أن يتمكّن المستخدمون من التبديل بينها بسلاسة أثناء استخدام تطبيقك. ومن المهام المهمة أيضًا أن لا تعتمد طرق الإدخال على حجم الشاشة، ما يعني أنّه يجب أن تتيح إطارات العرض الكبيرة استخدام شاشة اللمس، ويجب أن تتيح إطارات العرض الصغيرة استخدام لوحات المفاتيح والفئران. احرص على أن يتوافق تطبيقك وجميع ميزاته مع استخدام أي طريقة إدخال قد يختارها المستخدم. عند الاقتضاء، حسِّن التجارب للسماح بعناصر تحكُّم خاصة بالإدخال أيضًا (مثل السحب لإعادة التحميل).

الطريقة

توفّر Pointer Events API واجهة موحّدة للعمل مع خيارات إدخال مختلفة، وهي مفيدة بشكل خاص لإتاحة استخدام قلم الشاشة. لتتوافق التطبيقات مع كلّ من اللمس ولوحة المفاتيح، تأكَّد من استخدام العناصر الدالة الصحيحة (علامات الربط والأزرار وعناصر التحكّم في النماذج وما إلى ذلك) وعدم إعادة إنشائها باستخدام ترميز HTML غير الدالي. عند تضمين تفاعلات يتم تفعيلها عند التمرير فوقها، تأكَّد من إمكانية تفعيلها أيضًا بالنقر أو النقر.

عند طلب الإذن لاستخدام واجهات برمجة تطبيقات فعّالة، قدِّم سياقًا واسْأل فقط عند الحاجة إلى واجهة برمجة التطبيقات.

السبب

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

الطريقة

إنّ مقالة تجربة المستخدم في ما يتعلّق بالأذونات ومقالة UX Planet بعنوان الطرق الصحيحة لطلب الأذونات من المستخدمين هي مصادر جيدة لفهم كيفية تصميم طلبات الأذونات التي تسري على جميع التطبيقات المتوافقة مع الأجهزة الجوّالة، مع التركيز على الأجهزة الجوّالة.

إنّ الحفاظ على صحة قاعدة بياناتك يسهّل تحقيق أهدافك وطرح ميزات جديدة.

السبب

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

الطريقة

هناك عدد من عمليات الفحص ذات الأولوية العالية لضمان الحصول على قاعدة رموز سليمة:

• تجنَّب استخدام المكتبات التي تتضمّن ثغرات أمنية معروفة.
• يُرجى التأكد من عدم استخدام واجهات برمجة تطبيقات تم إيقافها نهائيًا.
• إزالة ممارسات الترميز غير الآمنة من قاعدة الرموز البرمجية (مثل استخدام document.write() أو استخدام أدوات معالجة حدث التمرير غير الساكن
• يمكنك أيضًا كتابة الرموز البرمجية بشكل دفاعي للتأكّد من عدم تعطُّل تطبيقك المتوافق مع الأجهزة الجوّالة إذا تعذّر تحميل تحليلات Google أو مكتبات تابعة لجهات خارجية أخرى.
• ننصحك بطلب إجراء تحليل الرمز البرمجي الثابت، مثل فحص الأخطاء النحوية، بالإضافة إلى الاختبار الآلي في عدّة متصفّحات وقنوات إصدار. ويمكن أن تساعد هذه التقنيات في رصد الأخطاء قبل تضمينها في مرحلة الإنتاج.