×
ماهي تطبيقات الويب التقدمية PWA ؟ وهل تمثل مستقبل الويب


فى العقود الماضية تحول العديد من مستخدمي الحواسيب إلى استخدام الأجهزة الذكية (android, ios ) ، مما أضاف حملًا ثقيلًا على عاتق مصممي المواقع  وهو كيفية جعل الموقع يعمل بصورة مناسبة على الأجهزة الذكية بالإضافة إلى سطح المكتب. عندها ظهرت العديد من التحديات مثل :


تقليل زمن التحميل لأن معظم الهواتف النقالة تعمل بسرعة اتصال بطيئة نسبيًا


تعديل التصميم ليناسب جميع الأجهزة (الحواسيب والألواح والجوالات)


خلق تجربة مستخدم (ux) مشابهة إلى حد كبير للتطبيقات الأصلية للجوالات المصممة بلغات مثل Java و swift


تم تطوير بعض الحلول لهذه المشكلات كالتالي :


Media Queries وهى تقنية تمت اضافتها فى لغة css لجعل الصفحات أكثر تفاعلية لدرجة أنها تستطيع التغيير من شكلها وفقًا لأبعاد شاشة المستخدم


مكتبات لغة css مثل bootstrap, foundation التى تسهل مهمة مطور المواقع وتوفر الوقت والجهد


استعمال خوارزميات ضغط الملفات (مثل gzip) لتقليل حجم ملفات الموقع وزيادة سرعة التحميل


كل هذه الحلول أتت بثمارها لكنها لم تكن جذرية حتى ظهرت PWA (Progressive Web Apps) .


 


ما هي PWA ؟

عام 2015 أطلق كلًا من المصمم  Frances Berriman والمهندس Alex Russell اسم PWA على المواقع التى تستخدم المميزات الآتية :


تعمل على كل الأجهزة والمتصفحات باختلاف أنواعها وأحجامها وأنظمة التشغيل سواء كانت windows, linux mac os, android, ios


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


تستطيع العمل فى ظل غياب اتصال الانترنت أو حتى عندما يكون الاتصال ضعيف


تمتلك مظهر وتجربة مثل التطبيقات الأصلية تمامًا


تعمل فى الخلفية للاتصال بالخادم وتجديد المحتوى فور ظهوره أول بأول


يجب الوصول إليها عبر بروتكولhttps  والذى يعتبر أكثر أمانًا وأسرع


يمكن إيجادها بواسطة محركات البحث مثل google, ping


تستطيع إظهار الاشعارات للمستخدم


يمكن تثبيتها على الشاشة الرئيسية للعمل كأي تطبيق آخر بدون الحاجة إلى app store


يمكن مشاركتها مع الآخرين بسهولة تامة عن طريق الرابط


تستطيع الوصول لموارد وخدمات الهاتف مثل الكاميرا والبلوتوث والمستشعرات الأخرى 


كل هذه المميزات جعلت ال PWA واحدة من أهم التقنيات الى ستغير عالم تطوير الويب ، ومن المحتمل أن تطغى على أخواتها من react native و nativescript . PWA تستخدم العديد من المميزات التى أضيفت حديثًا فى المتصفحات مثل service workers, cache storage, indexed DB . بسبب سهولتها وفعاليتها بدأت العديد من الشركات فى دعم PWA واستخدامها فى المواقع الخاصة بهم مثل Google, Medium, twitter, Uber, Instagram, Pinterest . 


التقنيات المستخدمة فى بناء PWA

Service Workers

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


Manifest

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


https://developer.mozilla.org/en-US/docs/Web/Manifest

 


Indexed DB

قاعدة بيانات noSQL موجودة فى المتصفحات لتمكين تخزين هياكل البيانات لحين الحاجة إليها . 



ماذا أحتاج لبناء PWA ؟

لا حاجة لمعرفة العديد من المكتبات أو لغات البرمجة فقط خبرة بسيطة فى لغات HTML, CSS, JavaScript


ملحوظة: يمكن استخدام المكتبات الحديثة للغة JavaScript مثل react, angular, vue لبناء PWA نظرًا لأن هذه المكتبات تمتلك مميزات جاهزة تجعل مهمة التطوير أسهل وأسرع


مصادر لتعلم PWA

https://developers.google.com/web/progressive-web-apps/


https://www.youtube.com/playlist?list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN


https://www.youtube.com/playlist?list=PL_jn5jikluSJ3THax5o5BHZk171Ql7CJx


https://www.youtube.com/playlist?list=PLYHcCSWbw4G6s7NVi2RK0TKd69PdB0sWe