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

Pete LePage
Sam Richard

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

قائمة التحقق الأساسية لتطبيق الويب التقدّمي

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

يبدأ العمل بسرعة، ويبقى سريعًا

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

أهمية

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

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

الطريقة

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

إمكانية الاستخدام على أي متصفّح

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

أهمية

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

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

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

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

الطريقة

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

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

التجاوب مع أي حجم شاشة

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

أهمية

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

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

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

الطريقة

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

توفير صفحة مخصّصة بلا إنترنت

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

أهمية

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

الطريقة

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

قابل للتثبيت

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

أهمية

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

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

الطريقة

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

قائمة التحقّق الأفضل لتطبيق الويب التقدّمي

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

توفير تجربة بلا اتصال بالإنترنت

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

أهمية

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

الطريقة

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

يمكن الوصول إليه بشكل كامل

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

أهمية

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

الطريقة

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

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

أهمية

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

الطريقة

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

إمكانية الاستخدام مع أي نوع إدخال

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

أهمية

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

الطريقة

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

توفير سياق لطلبات الأذونات

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

أهمية

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

الطريقة

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

اتّباع أفضل الممارسات لإنشاء رموز برمجية سليمة

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

أهمية

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

الطريقة

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