منوعات | 5دقائق للقراءة

ماهي تطبيقات الويب التقدمية 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

ملئ الشاشة

اضافة سؤال جديد