أخبار التقانات الحديثة
تطبيقات الوب التدريجية
العدد 154 | آب (اغسطس)-2020

بقلم شفيع البيطار
مهندس معلوماتية

المقدمة

اعتاد مستعملو هواتف أندرويد على تحميل تطبيقاتهم من متجر بلاي Google Play، واعتاد مستعملو هواتف شركة Apple على تحميل تطبيقاتهم من موقع اب ستور App Store. وقد ظهرت في المدة الأخيرة تقانات حديثة تغني عن الذهاب إلى هذين الموقعين تسمى تطبيقات الوب التدريجية، وهي تطبيقات تعمل على متصفحات الأجهزة الذكية تمامًا مثل التطبيقات الأصلية Native Applications. وسمِّيت بهذا الاسم لأنه يجري تطويرها تدريجيًّا بحيث تواكب أحدث المزايا والتقنيات الجديدة التي توفرها تلك المتصفحات. وقد اهتمت قنوات اليوتيوب البرمجية الكبيرة مثل قناة Chrome Developers ومواقع شهيرة على شبكة الإنترنت مثل Github و Stackoverflow بهذه التطبيقات، وأطلقت عدة مواضيع ونقاشات حولها.

وأعلن موقع تويتر في سنة 2018 عن شروعه في تقديم موقعه الرسمي عن طريق تطبيقات الوب التدريجية للهاتف المحمول، وأشار الموقع إلى أن هذه التطبيقات تحدِّد مستقبل تطبيقات الوب المدعومة من شركات عملاقة في هذا المجال لاسيما شركة غوغل التي صرَّحت بها في أحد مؤتمرات IO الخاصة بها والذي كان بعنوان

Great Experiences Everywhere (Google I/O '17)

تعرض هذه المقالة تطبيقات الوب التدريجية وميزاتها وكيفية بنائها، ولماذا نشجع على استعمالها.

ما هي تطبيقات الوب التدريجية

في السابق كان مصممو المواقع التي تعمل على الأجهزة الذكية يواجهون عدة تحديات نذكر منها:

  • تقليل زمن التحميل لأن معظم الهواتف النقالة تعمل بسرعة اتصال بطيئة نسبيًّا
  • تعديل التصميم ليناسب جميع أنواع الأجهزة (Tablets, Mobiles…)
  • إيجاد تجربة مستعمل User eXperience مشابهة إلى حدٍّ بعيد للتطبيقات الأصلية الخاصة بالجوالات

وقد تم تطوير بعض الحلول لهذه التحديات وفق التقنيات الآتية:

  • Media Queries وهي تقنية أُضيفت إلى لغة CSS لجعل صفحات الوب أكثر تفاعلية، لدرجة أنها تستطيع تغيير شكلها وفقًا لأبعاد الشاشة.
  • مكتبات للغة CSS مثل bootstrap, foundation… التي تسهِّل مهمة مطور المواقع وتوفر الوقت والجهد.
  • استعمال خوارزميات ضغط الملفات مثل gzip لتقليل حجم ملفات الموقع وزيادة سرعة التحميل.

ومع أن هذه الحلول آتت أُكُلها، غير أنها لم تكن حلولًا جذرية مثل تطبيقات الوب التدريجية.

بدأت هذه التطبيقات في الظهور منذ مدة طويلة، لكن أوج التعاطي بها لم يظهر إلا عند إطلاق النسخة السبعين من متصفح جوجل كروم الذي يدعم خواص هذه التطبيقات في الموبايل والحاسوب كذلك، إذ إن أي مستعمل لمتصفح جوجل كروم في هذه النسخة وفي النسخة التي هي أحدث منها يمكنه ان يشغّل هذه التطبيقات مباشرة دون الولوج في روابط تلك المواقع. وقد غيَّر جوجل مفهوم تطبيقات الوب التدريجية بتوفيره كلَّ شيء لصناعة تطبيق مخصَّص. وبإعلانه دعم هذه التطبيقات سارعت منصات مثل تويتر وسبوتيفاي في إنشاء تطبيقات خاصة بها. تعتمد هذه التطبيقات في المقام الأول على نمط التطبيقات المتجانسة Hybrid Apps؛ أي يمكن صناعتها باستعمال تقنيات الوب المعيارية مثل (HTML, CSS…)، ولكن مع إضافة أحدث ميزات لغة JavaScript بحيث تعمل مثل تطبيقات آندرويد و iOS.

وكمثال على هذه التطبيقات يمكن الدخول إلى أحد المواقع (وهو خاص برياضة اليوغا) عن طريق متصفح جهاز ذكي، عندها نلاحظ وجود زر كُتب عليه "أضف إلى الشاشة الرئيسية" Add to home screen.

 

وفور الضغط على هذا الزر يجري تثبيت التطبيق ويظهر رمز تطبيق الوب التدريجي على الجهاز، وعند تشغيله تظهر شاشة البداية، مع إمكان فتح التطبيق في وضع ملء الشاشة Fullscreen دون ظهور شريط التنقل الموجود في المتصفح.

مزايا تطبيقات الوب التدريجية

في عام 2015 أطلق المصمم Frances Berriman والمهندس Alex Russell اسم تطبيقات الوب التدريجية على المواقع التي تستعمل الميزات الآتية:

  • تعمل على كل الأجهزة والمتصفحات باختلاف أنواعها وأحجامها وأنظمة التشغيل: windows, linux, mac, android, ios…
  • متناسبة مع جميع أحجام الشاشات
  • يمكن أن تعمل في حال غياب الاتصال بالإنترنت أو عندما يكون الاتصال ضعيفًا
  • لها مظهر وتجربة مستعمل مثل التطبيقات الأصلية تمامًا
  • تعمل في الخلفية للاتصال بالمخدم وتجديد المحتوى فور ظهوره أولًا بأول
  • الوصول إليها يكون ببروتوكول https (الذي يعتبر أكثر أمانًا)
  • يمكن العثور عليها بواسطة محركات البحث مثل google, ping…
  • لها خاصية إظهار الإشعارات Notifications
  • يمكن تثبيتها على الشاشة الرئيسية كأي تطبيق آخر دون الحاجة إلى متجر التطبيقات
  • يمكن مشاركتها مع الآخرين بسهولة تامة عن طريق الرابط
  • يمكنها الوصول إلى موارد وخدمات الهاتف مثل الكاميرا والبلوتوث والمستشعرات الأخرى

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

  • الموثوقية Reliability

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

  • السرعة Fastness

يجب أن تكون سرعة التطبيق هدفًا رئيسيًّا وهاجسًا أوليًّا أثناء بناء تطبيقات الوب التدريجية؛ فبحسب جوجل يقوم نحو 53% من الأشخاص بإغلاق أي موقع يستغرق تحميله أكثر من ثلاث ثوان. ولتحقيق ذلك يجب استعمال نمط من جوجل اسمه PRPL Pattern تمت صياغته كخارطة طريق لبناء تطبيقات وب تدريجية عالية الأداء. وكذلك توجد مجموعة من التقنيات مثل Webpack لتشطير الرماز المصدري Code splitting وأطر عمل جافاسكريبت مثل React.js وAngular تساعد كثيرًا على بناء تطبيقات سريعة وعالية الأداء، فمثلًا توجد ميزة اسمها التحميل الكسول Lazy Loading وهي تفرض على التطبيق ألا يقوم بتحميل أي كود جافاسكريبت إلا عندما يتم عرض المكون Component الموافق له على الشاشة، وهذه خطوة هامة جدًّا لأنها تسهم في تقليل حجم الجافاسكريبت التي يجري تحميلها من طرف المتصفح عند الدخول الأول إلى التطبيق.

  • المشاركة Engaging

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

  • الأمان Safety

تتعامل تطبيقات الوب التدريجية مع الصفحات التي يجري طلبها عن طريق بروتوكول https وذلك للحماية من هجمات القراصنة مثل man-in-the-middle التي تستهدف البيانات الحساسة.

  • قابلية البحث Searchable

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

  • الاستقلالية عن الأجهزة Device Independent

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

  • الاستقلالية عن المتصفحات Browser Independent

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

بناء تطبيقات الوب التدريجية

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

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

ينصح بشدة عند بناء تطبيق وب تدريجي الاعتماد على بنية تسمى App shell architecture، والهدف منها هو تقسيم واجهة المستعمل User Interface إلى قسمين:

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

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

 

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

ومن أهم التقنيات المستعملة في بناء تطبيقات الوب التدريجية نذكر:

  • عمال الخدمة Service Workers

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

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

  1. إرسال التنبيهات عن طريق واجهة Push API
  2. تخزين بعض أجزاء التطبيق في الذاكرة المخبأة ليكون متاحًا في وضع عدم الاتصال

في مرحلة التطوير Development نستطيع استعمال عمال الخدمة عن طريق المخدم المحلي localhost، أما في مرحلة إنتاج تطبيق الوب التدريجي Production فمن الضروري تثبيت شهادة SSL في المخدم (لا بد من HTTPS)

 

  • ملف Manifest

الهدف الرئيسي من إنشاء تطبيق وب تدريجي هو إمكان فتحه انطلاقًا من الشاشة الرئيسية للهاتف كما هو الحال مع التطبيقات الأصلية، وللوصول إلى ذلك الهدف يجب إضافة ملف Manifest إلى التطبيق، وهو ملف JSON (JavaScript Object Notation) يحتوي على معلومات عديدة عن الموقع تساعد المتصفح على تعرُّف هويته عندما يضاف إلى الصفحة الرئيسية للجوال. ومن المعلومات التي يمكن إضافتها إلى هذا الملف:

  1. اسم تطبيق الوب name
  2. روابط لأيقونات تطبيق الوب أو كائنات الصور icon
  3. العنوان المفضل لبدء أو فتح تطبيق الوب URL
  4. لون الخلفية background_color
  5. لون السمة theme_color
  6. بيانات تكوين تطبيق الوب
  7. الاتجاه الافتراضي لتطبيق الوب
  8. خيار ضبط وضع العرض مثل ملء الشاشة

 

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

 

ولكي يؤخذ هذا الملف في الحسبان يجب استدعاؤه في كود HTML بهذه الطريقة :

 

بعد استيفاء كل هذه الشروط يطلب من مستعملي تطبيق الوب التدريجي إضافته إلى الشاشة الرئيسية عن طريق نافذة منبثقة كما هو مبيَّن في الصورة الآتية:

 

 

الخاتمة

هناك العديد من قصص النجاح التي حققتها الشركات التي استعملت تطبيقات الوب التدريجية (https://www.pwastats.com). وربما تكون قصة النجاح الأكثر شهرة موقع Flipkart Lite، وهو أكبر موقع للتجارة الإلكترونية في الهند، أعيد بناؤه على هيئة تطبيق وب تدريجي في عام 2015 فأدى ذلك إلى زيادة بنسبة 70٪ في التحويلات المالية.

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

المراجع

 

قد ترغب كذلك بقراءة
تقانات جديدة