ماهي تطبيقات الويب التقدمية 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 نظرًا لأن هذه المكتبات تمتلك مميزات جاهزة تجعل مهمة التطوير أسهل وأسرع