فى العقود الماضية تحول العديد من مستخدمي الحواسيب إلى استخدام الأجهزة الذكية (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
