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