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

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

أهمية

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

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

الطريقة

اتّبِع دليلنا حول مُدد التحميل السريعة للتعرّف على كيفية بدء تشغيل تطبيق الويب التقدّمي (PWA) بسرعة والحفاظ على سرعة أدائه.

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

أهمية

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

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

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

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

الطريقة

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

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

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

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

أهمية

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

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

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

الطريقة

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

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

أهمية

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

الطريقة

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

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

أهمية

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

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

الطريقة

يمكنك اتّباع دليلنا القابل للتثبيت للتعرّف على كيفية جعل تطبيق الويب التقدّمي (PWA) قابلاً للتثبيت، وكيفية اختبار مدى قابلية التثبيت، ثم محاولة إجراء ذلك بنفسك.

في حال عدم توفُّر إمكانية الاتصال بالإنترنت بشكل صارم، سيعمل تطبيقك بالطريقة نفسها التي يعمل بها على الإنترنت.

أهمية

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

الطريقة

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

اجتازت جميع تفاعلات المستخدم متطلبات تسهيل الاستخدام WCAG 2.0.

أهمية

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

الطريقة

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

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

أهمية

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

الطريقة

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

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

أهمية

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

الطريقة

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

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

أهمية

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

الطريقة

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

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

أهمية

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

الطريقة

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