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

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

السبب

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

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

الطريقة

اتّبِع دليلنا حول أوقات التحميل السريعة التعرّف على كيفية بدء تطبيق الويب التقدّمي (PWA) بسرعة والبقاء سريعًا.

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

السبب

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

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

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

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

الطريقة

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

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

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

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

السبب

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

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

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

الطريقة

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

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

السبب

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

الطريقة

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

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

السبب

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

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

الطريقة

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

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

السبب

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

الطريقة

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

اجتازت جميع تفاعلات المستخدم نموذج WCAG 2.0 متطلبات سهولة الوصول.

السبب

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

الطريقة

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

يمكن اكتشاف تطبيقك المتوافق مع الأجهزة الجوّالة من خلال البحث بسهولة.

السبب

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

الطريقة

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

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

السبب

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

الطريقة

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

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

السبب

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

الطريقة

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

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

السبب

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

الطريقة

هناك عدد من عمليات الفحص ذات الأولوية العالية لضمان codebase:

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