صممت تطبيقات الويب التقدمية PWA -اختصارًا إلى Progressive Web Apps- باستخدام واجهات برمجة تطبيقات حديثة، لتقديم إمكانيات أفضل وموثوقية وقابلية للتثبيت وذلك للوصول إلى أي شخص في أي مكان على أي جهاز بكتابة شيفرة واحدة.
ميزات تطبيقات الويب التقدمية الأساسية
سنعرض في هذا المقال الأسباب التي تجعل تطبيق الويب التقدمي جيدًا على جميع الأجهزة ولجميع المستخدمين من عدة نواحي بغض النظر عن حجم أو نوع الجهاز.
1. سريعة أداة
المواقع عالية الأداء تجذب المستخدمين وتحتفظ بهم بشكل أفضل من المواقع ضعيفة الأداء، إذ يلعب الأداء دورا هاما في نجاح أي تجربة عبر الإنترنت. يجب يركز الموقع على تحسين مقاييس الأداء المتعلقة بالمستخدم.
للسرعة أهمية كبيرة في جذب المستخدمين لتطبيقك. إذ أنه في الحقيقة مع زيادة وقت تحميل الصفحة من ثانية واحدة إلى عشر ثوانٍ، يزداد احتمال ارتداد المستخدم إثر ذلك بنسبة 123٪.
الأداء لا يتوقف مع تحميل الصفحة، فيجب ألا يتساءل المستخدمون أبدًا عما إذا كان تفاعلهم - مثلا عند النقر فوق زر ما - يحدث شيئا ما. يجب أن يشعر المستخدم بسلاسة أثناء التمرير وعرض الرسوم المتحركة. يؤثر الأداء على تجربتك بالكامل، بدءًا من كيفية إدراك المستخدمين لتطبيقك إلى أدائه الفعلي.
رغم امتلاك جميع التطبيقات خصوصياتها، إلا أن عمليات تدقيق الأداء في Lighthouse تستند إلى نموذج الأداء المرتكز على المستخدم RAIL user-centric performance model، تسجيل نقاط عالية في عمليات التدقيق هذه يعني زيادة احتمالية تمتع المستخدمين بتجربة ممتعة. يمكنك أيضًا استخدام PageSpeed Insights أو تقرير تجربة مستخدم كروم Chrome User Experience Report للحصول على بيانات أداء واقعية لتطبيق الويب الخاص بك.
2. تعمل على جميع المتصفحات
يمكن للمستخدمين اختيار أي متصفح للوصول إلى تطبيق الويب التقدمي الخاص بك قبل تثبيته، فتطبيقات الويب التقدمية هي تطبيقات ويب أساسا، هذا يعني أنها تحتاج إلى العمل عبر جميع المتصفحات.
تتمثل إحدى الطرق الفعالة للقيام بذلك في تحديد الوظائف الأساسية، وإتاحة هذه الوظيفة باستخدام بتقنية بسيطة، ثم تحسين التجربة كلما أمكن، كما يقول Jeremy Keith في تصميم الويب المرن Resilient Web Design، في كثير من الحالات يعني هذا البدء باستخدام HTML فقط لتصميم الوظائف الأساسية، وتحسين تجربة المستخدم باستخدام CSS و JavaScript لإنشاء تجربة أكثر جاذبية للمستخدم.
على سبيل المثال نأخذ إرسال النماذج form submission، إن أبسط طريقة لتنفيذ ذلك هي نموذج HTML الذي يرسل طلب POST. ثم يمكنك تحسين تجربة المستخدم باستعمال JavaScript لإجراء تحقق من صحة النموذج وإرسال النموذج عبر AJAX، تحسين التجربة للمستخدمين الذين يمكنهم دعمها.
ضع في اعتبارك أن المستخدمين سيختبرون موقعك عبر أجهزة ومتصفحات مختلفة، إذا لا يمكنك ببساطة استهداف فئة معينة.
يمكنك التحقق من الميزات المتاحة باستعمال التحقق من الميزات feature detection هذا سيمكنك من تقديم تجربة قابلة للاستخدام على نطاق واسع من المستخدمين، بما في ذلك أولئك الذين يستخدمون المتصفحات والأجهزة التي قد لا تكون موجودة حاليا.
3. تستجيب لجميع أحجام الشاشات
يمكن للمستخدمين استعمال تطبيق الويب التقدمي PWA الخاص بك على أي شاشة ويتوفر المحتوى بجميع الأحجام.
يمكن أن تأتي الأجهزة بأحجام مختلفة، ويمكن للمستخدمين استخدام تطبيقك بأحجام مختلفة على نفس الجهاز، لذلك من المهم جدا التأكد من أن المحتوى يتلاءم مع أحجام مختلفة وليس مع إطار العرض viewport فقط، ويجب أيضا أن تتأكد من أن محتوى موقعك وجميع ميزاته قابلة للاستخدام في جميع الأجهزة والأحجام.
لا تتغير المهام التي يريد المستخدمون إكمالها والمحتوى الذي يريدون الوصول إليه مع تغير حجم الشاشة. ويمكن إعادة ترتيب المحتوى بأحجام ليناسب حجم العرض، ويجب أن يكون متوفرا، كما يقول Luke Wroblewski في كتابه Mobile First، البدء بشيء صغيرا وتطويره وليس العكس يمكنه في الواقع تحسين تصميم الموقع.
تتطلب الأجهزة المحمولة من فرق التطوير التركيز فقط على البيانات والإجراءات الأكثر أهمية في التطبيق. لا توجد مساحة في شاشة 320x480 بكسل للعناصر الإضافية وغير الضرورية، لذا عليك أن تعطي الأولوية للعناصر المهمة.
4. يوفر صفحة يمكن الوصول إليها دون إنترنت
عندما يكون المستخدمون غير متصلين، فإن الاحتفاظ بهم في تطبيق الويب التقدمي الخاص بك يوفر تجربة أكثر سلاسة من الصفحة الافتراضية للمتصفح التي تعرض حالة عدم الاتصال بإنترنت.
يتوقع المستخدمون أن تعمل التطبيقات المثبتة بغض النظر عن وجود إنترنت. لا يعرض التطبيق المخصص بالنظام صفحة فارغة عندما يكون الجهازة مفصولا عن الإنترنت، كذلك الأمر بالنسبة لتطبيق الويب التقدمي إذ يجب ألا يعرض الصفحة الافتراضية للمتصفح في وضع عدم الاتصال بالإنترنت.
إن توفير تجربة مخصصة في وضع عدم الاتصال، سواء حاول المستخدم الولوج لرابط لم يتم تخزينه أو حاول استخدام ميزة تتطلب اتصالا يساعد على جعل تجربة الويب الخاصة بك تشغر المستخدم بأنها جزء من الجهاز الذي يتم التشغيله عليه.
يمكنك جعل تطبيق الويب التقدمي الخاص بك يعمل بدون اتصال وذلك بتخزين صفحة لا تتطلب اتصالا بالإنترنت مؤقتًا لاستخدامها لاحقًا أثناء حدث تثبيت منجز الخدمة، إذا انتقل المستخدم إلى وضع عدم الاتصال، فيمكنك حينها استخدام الصفحة التي خزنتها. ويمكنك متابعة offline page sample للاطلاع على مثال على ذلك أثناء العمل ومعرفة كيفية تنفيذه بنفسك.
5. قابل للتثبيت
يميل المستخدمون الذين الذين ثبتوا التطبيق أو أضافوه إلى أجهزتهم إلى التفاعل مع هذه التطبيقات بشكل أكبر.
تثبيت تطبيق الويب التقدمي يُشعِر المستخدم أن تطبيق الويب التقدمي الخاص بك مثل جميع التطبيقات المثبتة الأخرى. إذ يتم تشغيله من نفس المكان الذي تشغل منه المستخدمون تطبيقاتهم الأخرى. ويتم يتم تشغيله في نافذة تطبيق خاصة به منفصلة عن المتصفح ويظهر في قائمة المهام، مثله مثل التطبيقات الأخرى.
السبب الذي يجعلك ترغب في أن يثبت المستخدمون تطبيق الويب التقدمي الخاص بك هو نفس السبب الذي يجعلك ترغب في تثبيت تطبيقك المخصص للنظام من متجر التطبيقات، فالمستخدمون الذين يثبتون تطبيق الويب التقدمي الخاص بك هم عادة الأكثر تفاعلاً، ومقايس تفاعلهم أفضل من المستخدمين العاديين، وغالبا ما يكون ذلك قريبا من مقاييس تفاعل المستخدمين على تطبيقك المخصص للنظام، تتضمن هذه المقاييس عددًا أكبر من الزيارات المتكررة، وقضاء وقت أطول على تطبيقك ومعدلات تحويل أعلى.
ميزات تطبيقات الويب التقدمية المثالية
تحتاج إلى ما هو أكثر من مجرد قائمة التحقق الأساسية لإنشاء تطبيق ويب تقدمي رائع ويكون أفضل تطبيق في فئته.
يهدف وجود قائمة التحقق المثلى لتطبيق الويب التقدمي إلى جعله جزء من الجهاز الذي يعمل عليه بالاستفادة من ميزات الويب التي تجعله قويا.
1. يوفر إمكانية العمل دون إنترنت
يمكن أن يعمل تطبيقك بنفس الطريقة التي يعمل بها أثناء وجود اتصال بالإنترنت عندما لا يكون الاتصال ضروريا.
إضافة إلى توفير صفحة مخصصة لا تتطلب وصولا للإنترنت، يتوقع المستخدمون أن يكون تطبيق الويب التقدمي قابلا للاستخدام أثناء عدم الاتصال، مثلا: يجب في تطبيقات السفر وشركات الطيران أن تكون التفاصيل حول الرحلة وتذاكر الصعود إلى الطائرة متاحة بسهولة أثناء عدم الاتصال بالإنترنت. ويجب أن تسمح تطبيقات الموسيقى والفيديو والبودكاست بالتشغيل في وضع عدم الاتصال. ويجب أن تقوم تطبيقات التواصل الإجتماعي والأخبار بتخزين المحتوى الحديث مؤقتًا حتى يتمكن المستخدمون من قراءته أثناء عدم الاتصال بالإنترنت. ويتوقع المستخدمون أيضًا أن يظل دخولهم مسجلا في وضع عدم الاتصال، لذلك عليه أن تصمم مصادقة دون اتصال.
يوفر تطبيق الويب التقدمي تجربة حقيقية شبيهة بالتطبيقات المخصصة للنظام أثناء وضع عدم الاتصال.
بعد أن تقوم بتحديد الميزات التي يتوقع المستخدمون استعمالها دون اتصال بالإنترنت، ستحتاج إلى جعل المحتوى الخاص بك متاحًا وقابلًا للتكيف مع حالات عدم الاتصال بالإنترنت. يمكنك استخدام IndexedDB وهو نظام تخزين NoSQL في المتصفح مصمم لتخزين البيانات واستردادها دون اتصال، ويمكنك مزامنة الخلفية background sync للسماح للمستخدمين بعمل بعض الإجراءات أثناء عدم الاتصال بالإنترنت وتأجيل الاتصالات بالخادم حتى يتوفر الإتصال مرة أخرى.
يمكنك أيضًا استخدام منجزات الخدمة لتخزين أنواع أخرى من المحتوى مثل الصور والفيديو والصوتيات استخدامها دون اتصال بالإنترنت، بالإضافة لذلك يمكنك استخدامها في الجلسات الآمنة طويلة الأمد للحفاظ على تسجيل دخول المستخدمين.
من منظور تجربة المستخدم، يمكنك استخدام الواجهات أو الشاشات الهيكلية skeleton screens التي تمنح المستخدمين تصورًا حول المحتوى الذي يجري تحميله، ويمكن تخزين ذلك المحتوى وعرضه لاحقا بدون اتصال بالإنترنت.
2. إمكانية وصول كاملة
يجتاز تطبيق الويب التقدمي متطلبات سهولة الوصول WCAG 2.0.
يرغب معظم المستخدمين في مرحلة ما في الاستفادة من تطبيق الويب التقدمي الخاص بك، وإن بناء تطبيقك بطريقة تم تغطيتها بموجب متطلبات الوصول WCAG 2.0. يجعل المستخدمون قادرين على التفاعل مع تطبيق الويب التقدمي الخاص بك وفهمه على نطاق واسع وجعله قادرا على تلبية احتياجاتهم المؤقتة أو الدائمة.
بجعل تطبيق الويب التقدمي الخاص بك قابلا للوصول، فإنك تضمن أنه يمكن استخدامه من طرف الجميع.
يجب عليك إجراء اختبارات إمكانية الوصول يدويًا. ويمكن أن تساعدك أدوات مثل Accessibility في Lighthouse و axe، ويمكنك أتمتة بعض اختبارات إمكانية الوصول باستعمال Accessibility Insights. من المهم أيضًا استخدام العناصر ذات الدلالة المتعارف عليها بدلاً من صياغة عناصر جديدة بنفسك، على سبيل المثال: استخدام العناصر a و button يضمن ذلك أنه عندما تحتاج إلى إنشاء وظائف أكثر تقدمًا سيكون الوصول المتوقع من خلال هذه العناصر محققا (كمثال arrows أو tabs)..
3. يمكن الوصول إليه من خلال البحث
يمكن الوصول لتطبيق الويب التقدمي PWA الخاص بك بسهولة من خلال البحث.
إحدى أكبر مزايا الويب في القدرة على الوصول إلى المواقع والتطبيقات من خلال البحث. في الواقع يكون مصدر أكثر من نصف حركة مرور الموقع الإلكتروني من البحث الأساسي (محركات البحث).
إن التأكد من وجود عناوين URL الأساسية للمحتوى وتكمن محركات البحث من فهرستها أمر بالغ الأهمية للمستخدمين ليتمكنوا من العثور على تطبيق الويب التقدمي الخاص بك. خاصة إن كان التقديم من جانب العميل client-side rendering.
للقيام بذلك عليك بداية التأكد من أن جميع عناوين URL الخاصة بك تمتلك وصفا وتعريفا فريدا. يمكنك بعدها استخدام Google Search Console ومراجعات تحسين محرك البحث من Lighthouse لتصحيح وإصلاح مشكلات قابلية الاكتشاف لتطبيق الويب التقدمي الخاص بك. ويمكنك استخدام أدوات مشرفي المواقع الخاصة بمحركي بحث Bing أو Yandex، والنظر في تضمين البيانات المنظمة structured data عبر مخططات من Schema.org في تطبيق الويب التقدمي الخاص بك.
4. يعمل مع أي جهاز إدخال
يمكن استخدام تطبيق الويب التقدمي PWA مع الفأرة أو لوحة المفاتيح أو القلم أو لوحة اللمس.
تقدم الأجهزة إمكانيات مختلفة للاستخدام، ويجب أن يكون المستخدمون قادرين على التغيير بينها وبنفس القدر من سلاسة أثناء استعمالهم للتطبيق الخاص بك، يجب ألا تعتمد أساليب الإدخال على حجم الشاشة، مما يعني أن إطارات العرض الكبيرة تحتاج إلى دعم اللمس وأن إطارات العرض الصغيرة تحتاج إلى دعم لوحات المفاتيح والماوس، تأكد قدر ما تستطيع من أن التطبيق الخاص بك وجميع ميزاته تدعم استخدام أي طريقة إدخال قد يختارها المستخدم، يجب عليك أيضًا عند الحاجة تحسين تطبيقك للسماح بعناصر تحكم خاصة بالإدخال (مثل عنصر السحب-للتحديث pull-to-refresh).
توفر واجهة برمجة تطبيقات Pointer Events API واجهة موحدة للتعامل مع مختلف الإدخالات، وهي مفيدة بشكل خاص لإضافة دعم القلم واللمس ولوحة المفاتيح، تأكد من أنك تستخدم العناصر الدلالية الصحيحة (الروابط anchors، الأزرار buttons، متحكمات النماذج form controls وما إلى ذلك) ولا تقم بنائها باستخدام كود أو عناصر HTML لا تمتلك دلالة معروف لدي المستخدم (وهذا يحسن إمكانية الوصول).
تأكد عند تضمين الحدث "عند مرور الفأرة" من إمكانية تفعيلها عند النقر أيضًا.
5. طلب الأذونات
عند طلب الإذن لاستخدام واجهات برمجة تطبيقات، استعمل السياق واطلب الإذن الذي تريده.
تم تصميم الواجهات البرمجية التي تتطلب أذونات، مثل الإشعارات والموقع الجغرافي وبيانات الاعتماد، لتكون مزعجة للمستخدم عن قصد، لأنه غالبًا ما تكون هذه الإشعارات مرتبطة بوظائف غير مسموح تنفيذها إلا بموافقة المستخدم.
يؤدي تفعيل رسالة طلب الأذونات من المستخدم دون سياق مناسب إلى تقليل احتمالية موافقة المستخدمين على تلك الأذونات وزيادة احتمالية عدم ثقتهم بالتطبيق مستقبلا. في حال كنت تحتاج الإذن، يجب عليك ان تشغل طلب الإذن فقط بعد تقديم سبب منطقي في سياق مناسب للمستخدم.
6. يوفر كود نظيف بأفضل الممارسات
يمكن استخدام تطبيق الويب التقدمي PWA مع الفأرة أو لوحة المفاتيح أو القلم أو لوحة اللمس.
هناك الكثير من الأمور التي عليك أخذها في الاعتبار عند بناء تطبيق ويب حديث، وإبقاء تطبيقك محدثا والكود الخاص به نضيفا يجعل تقديم ميزات جديدة تلبي الأهداف الموضحة في قائمة التحقق هذه أمرا أسهل.
هناك عدة أمور عليك التحقق منها ليكون الكود الخاص بتطبيقك نظيفا، نذكر منها: تجنب استخدام المكتبات التي تملك ثغرات الأمنية المعروفة، التأكد من أنك لا تستخدم واجهات برمجية موقوفة Deprecated APIs، إزالة أنماط الويب المضادة من الكود الخاص بك (مثل document.write() أو امتلاك القيمة non-passive لحدث التمرير)، وأيضا التأكد من أن تطبيق الويب التقدمي الخاص بك يستمر في العمل حتى إذا فشل تحميل التحليلات أو مكتبات الطرف الثالث الأخرى.
ترجمة -وبتصرف- للمقال What makes a good Progressive Web App? لصاحبيه Sam Richard وPete LePage.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.