سمعنا كثيرا في السنوات الأخيرة عن تطبيقات الويب التقدمية أو Progressive Web Applications واختصارا يشار إليها بالرمز PWA. هذه التطبيقات هي تطبيقات ويب تستفيد وتستخدم أحدث المزايا الموجودة في المتصفحات اليوم، ويمكن إضافتها للشاشة الرئيسية لهواتفنا لتبدو كأي تطبيق محمول أصيل (Native).
إذن تطبيق الويب التقدمي ليس تقنية أو إطار عمل جافاسكريبت جديد، وإنما مجموعة من الممارسات الجيدة والمزايا التي يجب أن تتوفر في تطبيق الويب ليكون شبيها بتطبيقات الهواتف الأصيلة التي اعتدنا تحميلها من متجر Play Store بالنسبة لهواتف أندرويد و App Store بالنسبة لهواتف وأجهزة شركة Apple. الهدف هو منح مستخدمي تطبيقات الويب تجربة استخدام تماثل تلك الموجودة في Native Applications.
يفترض في هذا النوع من التطبيقات أن تعمل بشكل جيد في كافة الأجهزة على اختلاف مقوماتها وإمكاناتها التقنية. قد لا يكون بالإمكان مثلا إتاحة بعض المزايا والوظائف في بعض الهواتف أو الأجهزة القديمة، ولكن يجب ضمان أن يظل التطبيق يعمل فيها بشكل جيد وبالخصوص من ناحية الأداء والسرعة.
متى نقول بأن تطبيق الويب تقدمي ؟

كما قلنا في البداية، تطبيقات PWA هي مجرد تطبيقات ويب مكونة من CSS ،HTML وجافاسكريبت، وبطبيعة الحال تشتغل في المتصفحات. ولكن ما يميزها عن غيرها هو مجموعة من المزايا والنقاط التي لا نجدها مجتمعة إلا في عدد قليل من تطبيقات الويب، ولن نستطيع إنشاء تطبيق ويب تقدمي ما لم نكن على ذراية تامة بهذه النقاط أو المبادئ.
1. آمنة

تتعامل تطبيقات PWA مع عدد من الواجهات الأصلية في المتصفح، هذه التقنيات لا تشتغل إلا في الصفحات والمواقع التي تقدم عن طريق بروتوكول https لحماية المستخدمين من هجمات man-in-the-middle التي تستهدف بياناتهم الحساسة. وبشكل عام، استخدام بروتوكول HTTPS أصبح من الأمور التي ينصح بها بشدة كل صاحب موقع على الإنترنت، وحتى محرك البحث Google قرر منذ مدة اعتماده كأحد معايير ترتيب نتائج البحث.
2. متجاوبة

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

في تطبيقات الهواتف الأصلية، نستطيع فتح التطبيق ورؤية الأجزاء الرئيسية في واجهة المستخدم (الشريط العلوي مثلا) حتى ولو كان الجهاز غير متصل بالإنترنت. ولا شك أنكم جربتم من قبل الدخول لتطبيق فيسبوك أو تويتر من دون اتصال ومع ذلك لاحظتم بأن التطبيق يعرض المحتوى القديم الذي كان مخزن في Cache.
هذه التجربة تسعى تطبيقات الويب التقدمية لمحاكاتها، وسيلتها لتحقيق ذلك هي ما يعرف ب Service Workers.
باختصار، Service workers هو كود أو سكريبت يقوم المتصفح بتشغيله في الخلفية (Background) وبشكل منفصل عن صفحة الويب (لا يمكنه الوصول إلى DOM). تستخدم هذه الميزة في وظائف التطبيق التي لا تحتاج للتفاعل المباشر مع المستخدمين. ومن أبرز تلك الوظائف التي يستعان فيها ب SW :

• إرسال تنبيهات للمستخدمين عن طريق واجهة Push API.
• عمل Cache لبعض أجزاء التطبيق في وضع Offline.

في وضع التطوير تستطيع استخدام service workers عن طريق الخادم المحلي localhost، بينما في وضع الإنتاج (Production) يعتبر من الضروري تثبيت شهاده SSL في الخادم (لا بد من HTTPS ).
عل كل حال، موضوع service workers طويل ويحتاج لمقال خاص حتى نستوعبه بشكل جيد. وإذا كنتم متحمسين جدا لفهم آلية عمل هذه التقنية أنصحكم بزيارة هذا الرابط.
4. قابلة للتثبيت

الهدف الرئيسي من إنشاء تطبيق ويب تقدمي هو تمكين للمستخدمين من فتحه إنطلاقا من الشاشة الرئيسية للهاتف، تماما كما يفعلون مع التطبيقات الأصلية. للوصول لذلك الهدف يجب إضافة ملف Web Manifest إلى التطبيق، وهو عبارة عن ملف JSON يضم مجموعة من المعلومات المتعلقة بالتطبيق مثل الأيقونة ، الإسم، اتجاه الشاشة إلخ…
في النهاية سيكون لدينا ملف manifest.json يشبه ما يلي :
{ "short_name": "Maps", "name": "Google Maps", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/maps/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/maps/", "theme_color": "#3367D6" }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}



ولكي يؤخذ الملف بعين الإعتبار يجب استدعاؤها في كود HTML بهذه الطريقة :
<link rel="manifest" href="manifest.json">
1

<link rel="manifest" href="manifest.json">



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

5. سريعة

يفترض في هذه التطبيقات أن تكون سريعة جدا، خاصة أثناء التحميل. فبحسب Google، حوالي 53% من المستخدمين يقومون بإغلاق أي موقع يستغرق أكثر من 3 ثواني في التحميل، لذلك يجب أن تكون السرعة وخفة التطبيق هدفا رئيسيا وهاجسا أول أثناء بناء تطبيقات الويب الحديثة.
بتحسين سرعة تحميل الموقع فقط استطاعت شركات ومواقع إلكترونية كبرى رفع عدد الجلسات لكل زائر ما يعني تخفيض معدل ارتداد الزوار (Bounce rate) وبالتالي رفع معدل التحويل (Conversion rate) بنسب وصلت في حالات كثيرة %10 إلى %15.
هذه المهمة ليست باليسيرة خاصة إذا كان التطبيق كبيرا. يجب استخدام عدد من التقنيات مثل Webpack لتقسيم الشفرة المصدرية حسب الطلب أو ما يعرف ب Code splitting، وهناك نمط من غوغل اسمه PRPL Pattern تمت صياغته كخارطة طريق لبناء تطبيقات ويب تقدمية عالية الأداء.
أطر عمل جافاسكريبت مثل React.js وAngular تساعد كثيرا في بناء تطبيقات سريعة وعالية الأداء عن طريق توفير عدد من المزايا مثل Lazy loading. هذه الميزة تجعل التطبيق لا يقوم بتحميل أي كود جافاسكريبت إلا عندما يتم عرض المكون (Component) الموافق له على الشاشة، وهذه خطوة هامة للغاية لأنها تساهم في تقليل حجم الجافاسكريبت التي يتم تحميله من طرف المتصفح في الدخول الأول إلى التطبيق.
الإنتقال كذلك بين الصفحات يجب أن يكون سلسا وسريعا بما فيه الكفاية. عند الإنتقال لصفحة جديدة يجب عرض رسالة مؤقتة للمستخدم في انتظار تحميل المحتوى (أيقونة متحركة على سبيل المثال).
6. كل صفحة لديها رابطها

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

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

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

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

هذه أهم المبادئ والمعايير الأساسية لتطبيقات الويب التقدمية. هناك معايير ومزايا أخرى تكميلية يستحسن دائما توفرها في هذه التطبيقات حتى يتم تحقيق أقصى فائدة ممكنة من ورائها، مثل نظام للتنبيهات (Push Notifications) الذي أصبح ممكنا وموجودا في بيئة الويب بفضل واجهة Push API التي تدعمها في الوقت الحالي كل المتصفحات التي ذكرناها ما عدا Safari.
نقاط إيجابية لصالح تطبيقات Progressive Web Apps

مميزات تطبيقات الويب التقدمية وإيجابياتها كثيرة، نورد منها ما يلي :

• تطويرها وتوسعتها أقل تكلفة وأسرع مقارنة بالتطبيقات الأصلية.
• عابرة للمنصات كونها تعيش وتحيا في المتصفحات تطبيق PWA واحد يستطيع العيش بسلام في أندرويد، iOS، ويندوز وغيرها من أنظمة التشغيل المختلفة.
• Google هي الداعم الرئيسي لمشروع تطبيقات الويب التقدمية، وهذا بحد ذاته كاف لنطمئن على مستقبله.
• صديقة لمحركات البحث، بما أنها مجرد تطبيقات ويب أخذت بعض الفيتامينات الإضافية (Alex Russel) :).
• حجمها صغير لا يتجاوز 1MB في معظم الحالات.