ما هي تطبيقات الويب التقدمية (PWA)؟ وهل تُمثل مستقبل الويب؟
يتطور الويب باستمرار ويتطور معه توقعات المستخدمين، فهم يريدون تطبيقات ويب سريعة وموثوق بها مثل التطبيقات الأصلية (native apps)، ولكن بدون متاعب التنزيل أو التحديث المستمر، يريدون تطبيقات ويب يمكنها العمل في وضع عدم الاتصال (offline)، ويمكنها أيضًا إرسال الإشعارات، والوصول إلى مميزات الجهاز، والتكامل مع نظام التشغيل.
يمكن عمل كل هذا من خلال تطبيقات الويب التقدمية (Progressive Web Apps-PWA)، وهي تطبيقات ويب تستخدم التحسين التدريجي (progressive enhancement) لتوفر للمستخدمين تجربة أكثر سلاسة وتفاعلية. ولأنها تطبيقات ويب، فيمكنها الوصول إلى أي شخص، في أي مكان، وعلى أي جهاز، وكل ذلك باستخدام قاعدة بيانات واحدة.
في هذا المقال، سنستعرض معك ما هي PWA، ومزاياها، وكيف تعمل، وما تحتاج لتعلمه لبناء PWAs الخاصة بك، ولماذا تعد أحد التقنيات المستقبلية للويب.
كل ما يخص تطبيقات الويب التقدمية
ما هي تطبيقات الويب التقدمية؟ (What are Progressive Web Apps)
هي تطبيقات مصممة للويب، ولكنها توفر تجربة استخدام مشابهة للتطبيقات التي تعمل على أجهزة الجوال، وتتميز بالعديد من الميزات كالسرعة، والعمل بدون اتصال بالإنترنت، وإرسال الإشعارات، كما يحدث في الأجهزة الجوالة.
ويمكن استخدام تطبيقات الويب التقدمية (PWAs) في الحصول على تجربة استخدام أسهل وأسرع للويب على جهاز الحاسوب أو الجوال الخاص بك؛ حيث توفر هذه التطبيقات إمكانية الوصول بشكل أسرع إلى تطبيقات ومواقع الويب من خلال بعض المميزات الإضافية، مثل مساحة تخزين إضافية لتصفح المحتوى بدون اتصال بالإنترنت.
وتتميز PWA بثلاث خصائص رئيسة:
- Reliable: يحمل PWA على الفور ولا يُظهر أبدًا downasaur، حتى في ظروف الشبكة غير المستقرة.
- Capable: يمكن لـ PWA استخدام ميزات مثل الكاميرا والميكروفون والموقع الجغرافي والبلوتوث، ويمكنه أيضًا العمل في الخلفية وإرسال إشعارات والتفاعل مع التطبيقات الأخرى.
- Installable: يمكن إضافة PWA إلى الشاشة الرئيسية (home screen) أو الـ app drawer أو شريط المهام (taskbar)، ويمكن تشغيله في نافذة مستقلة، بدون واجهة مستخدم للمتصفح (browser UI).
PWA ليس نوعًا منفصلًا من التطبيقات، بل مجموعة من أفضل الممارسات والمعايير التي يمكن لأي تطبيق ويب اتباعها ليصبح PWA. ولا يزال PWA تطبيق ويب، ويمكن الوصول إليه من خلال URL، ولكن يمكنه توفير تجربة تشبه الـ native apps للمستخدمين.
مزايا تطبيقات الويب التقدمية (Advantages of PWA)
تتمتع PWAs بالعديد من المزايا مقارنةً بتطبيقات الويب التقليدية والتطبيقات الأصلية (Native app)، مثل:
- الوصول (Reach): يمكن الوصول إلى PWAs من قبل أي شخص لديه متصفح، بغض النظر عن الجهاز أو النظام الأساسي أو الموقع؛ حيث إن PWAs قابلة للاكتشاف بواسطة محركات البحث ويمكن مشاركتها بسهولة من خلال رابط.
- الأداء (Performance): تعتبر تطبيقات الويب التقدمية PWAs سريعة ومتجاوبة (responsive)، وذلك بفضل تقنيات مثل التخزين المؤقت (caching)، والاستباق (prefetching) وتقسيم الكود (code splitting). تستخدم PWAs أيضًا بيانات أقل وبطارية أقل من التطبيقات الأصلية، ويمكنها العمل أيضًا بدون اتصال بالإنترنت أو على الشبكات ذات الجودة المنخفضة.
- التفاعل (Engagement): يمكن لـ PWAs زيادة تفاعل المستخدم، عن طريق توفير تجربة مستخدم متسقة وسلسة، وباستخدام ميزات مثل الإشعارات، واختصارات التطبيقات (app shortcuts)، وغيرهم من المميزات.
- التحويل (Conversion): يمكن لـ PWAs تحسين معدلات التحويل والإيرادات، من خلال زيادة ثقة المستخدمين. ألقِ نظرة على هذه الاحصائيات.
- التطوير (Development): تعد تطبيقات PWA أسهل وأرخص في التطوير والصيانة من التطبيقات الأصلية (Native Apps)، لأنها تستخدم تقنيات الويب وقاعدة تعليمات برمجية واحدة (single codebase). ولا تتطلب تطبيقات PWA أيضًا موافقة متجر التطبيقات أو تحديثاتها، ويمكن نشرها على الفور.
كيفية عمل تطبيقات الويب التقدمية (How PWAs Work)
تعتمد PWAs على مجموعة من تقنيات ومعايير الويب لتوفير تجربة مستخدم تشبه التطبيقات الأصلية. والمكونات الرئيسية لـ PWA هي:
- Web App Manifest: يوفر هذا الملف معلومات (metadata) حول PWA، مثل اسمها و icon, theme color, orientation, display mode وغيرهم، ويخبر هذا الملف المتصفح كيف يجب أن يتصرف تطبيق الويب عند تثبيته على الجهاز، وكيف يجب أن يظهر للمستخدم.
- Service Worker: هو ملف JavaScript يعمل في الخلفية بشكل منفصل عن صفحة الويب، ويعمل كـ proxy بين تطبيق الويب والشبكة. يمكن للـ Service Worker معالجة طلبات الشبكة، وتخزين الموارد في ذاكرة التخزين المؤقت، ومزامنة البيانات، وإرسال الإشعارات، والمزيد؛ مما يمكن تطبيق الويب من العمل بدون اتصال بالإنترنت، والتحميل بشكل أسرع، وتنفيذ المهام في الخلفية.
- App Shell: هي الحد الأدنى من HTML و CSS و JavaScript الذي يوفر الهيكل الأساسي وواجهة المستخدم لتطبيق الويب. يتم تخزين الـ App Shell قشرة التطبيق بواسطة الـ Service Worker ويتم تحميلها من ذاكرة التخزين المؤقت في الزيارات اللاحقة، لتوفير تجربة مستخدم سريعة.
- Web APIs: هي الواجهات التي تسمح لتطبيق الويب بالوصول إلى ميزات وقدرات الجهاز، مثل الكاميرا والميكروفون والموقع الجغرافي والبلوتوث والدفع وغيرها. وتمكن واجهات برمجة تطبيقات الويب (Web APIs) تطبيق الويب من توفير تجربة مستخدم وتفاعلية، والاندماج مع نظام التشغيل والتطبيقات الأخرى.
ما تحتاج إلى تعلمه لبناء تطبيقات الويب التقدمية (Getting Started with PWA)
لإنشاء PWAs فعالة، تحتاج إلى فهم أساسيات تقنيات الويب والمعايير التي تعتمد عليها PWAs، مثل:
- Web Development: تحتاج إلى معرفة أساسيات تطوير الويب، مثل HTML وCSS وJavaScript، وكيفية استخدامهم لإنشاء صفحات وتطبيقات ويب. تحتاج أيضًا إلى معرفة كيفية استخدام إطارات ومكتبات الويب، مثل React أو Angular أو Vue وغيرهم، وذلك لإنشاء تطبيقات ويب أكثر تعقيدًا وديناميكية.
- Web Performance: تحتاج إلى معرفة كيفية قياس وتحسين أداء تطبيقات الويب الخاصة بك، مثل كيفية استخدام أدوات مثل Lighthouse وChrome DevTools وWebPageTest، وذلك لمراجعة (audit) تطبيقات الويب الخاصة بك من ناحية الأداء وإمكانية الوصول (accessibility) وأفضل الممارسات. تحتاج أيضًا إلى معرفة كيفية استخدام تقنيات مثل التخزين المؤقت (caching) والتحميل المسبق (prefetching) وتقسيم الكود (code splitting) والتحميل الكسول (lazy loading)، لتحسين تطبيقات الويب الخاصة بك من ناحية السرعة والكفاءة.
- Web Features: تحتاج إلى معرفة كيفية استخدام ميزات ومعايير الويب التي تعتمد عليها تطبيقات الويب التقدمية، مثل: service workers, web app manifests, web APIs، وكيفية استخدامها لتحسين تطبيقات الويب الخاصة بك. تحتاج أيضًا إلى معرفة كيفية استخدام أدوات مثل Workbox وPWA Builder وPWACompat، لإنشاء وإدارة الـservice workers, web app manifests, and icons للمنصات المختلفة.
- Web Design: تحتاج إلى معرفة كيفية تصميم تطبيقات الويب للعمل على أجهزة ومنصات مختلفة، مثل كيفية استخدام التصميم المتجاوب (responsive design) والـprogressive & enhancement graceful degradation، لإنشاء تطبيقات ويب تتكيف مع أحجام الشاشة المختلفة وقدرات الأجهزة المختلفة. تحتاج أيضًا إلى معرفة كيفية استخدام مبادئ التصميم، مثل قابلية الاستخدام (usability) وإمكانية الوصول (accessibility) وغيرهم، لإنشاء تطبيقات ويب تفاعلية وسهلة الاستخدام.
التحديات والقيود التي تواجه تطبيقات الويب التدريجية (Challenges and Limitations of PWAs)
على الرغم من إمكاناتها الواعدة، تواجه PWAs بعض التحديات والقيود، مثل:
- دعم المتصفح Browser Support: لا تدعم جميع المتصفحات جميع الميزات والمعايير التي تعتمد عليها PWAs، مثل service workers, web app manifests, and web APIs. تحتاج إلى التأكد من توافق المتصفح عند إنشاء PWAs، واستخدام أدوات مثل Can I Use وMDN Web Docs للتحقق من هذا التوافق. يمكنك أيضًا استخدام تقنيات مثل Modernizr وpolyfills وfallbacks لتوفير حلول بديلة للمتصفحات غير المدعومة.
- الاندماج مع المنصة Platform Integration: لا تعامل جميع المنصات وأنظمة التشغيل تطبيقات الويب التقدمية بنفس الطريقة التي تعامل بها التطبيقات الأصلية (native apps)، وبعضها يفرض قيودًا على تطبيقات الويب التقدمية. على سبيل المثال، لا يدعم نظام iOS الإشعارات الدفعية (push notifications) أو المزامنة الخلفية (background sync) أو اختصارات التطبيقات (app shortcuts) لتطبيقات الويب التقدمية. ولا يدعم نظام أندرويد web share target or web app banner لتطبيقات الويب التقدمية، ويتطلب حد أدنى من الزيارات والتفاعل لتكون تطبيقات الويب التقدمية قابلة للتثبيت.
- وعي المستخدم User Awareness: ليس جميع المستخدمين على دراية بوجود وفوائد تطبيقات الويب التقدمية، وبعضهم قد لا يعرف كيفية تثبيتها أو استخدامها. يمكنك استخدام أدوات مثل PWACompat لإنشاء الأيقونات للمنصات مختلفة، واستخدام أدوات مثل A2HS.js لتشجيع المستخدمين على إضافة تطبيق الويب التقدمي إلى شاشتهم الرئيسة.
مستقبل تطبيقات الويب التقدمية (The Future of Progressive Web Apps)
PWAs هي أحد تقنيات مستقبل الويب، فهي توفر ميزتين رئيسيتين: وصول ومرونة الويب (reach and flexibility of the web) بجانب وظائف وأداء التطبيقات الأصلية (performance and functionality of native apps). تُعد تطبيقات الويب التقدمية مستقبل الويب أيضًا لأنها متوافقة مع رؤية ورسالة الويب: أن يكون مفتوحًا ومتاحًا وشاملًا الجميع (open, accessible, and inclusive for everyone).
مع اعتماد المزيد والمزيد من مطوري الويب على نهج تطبيقات الويب التقدمية، ومع دعم المزيد من المتصفحات والمنصات لميزات ومعايير تطبيقات الويب التقدمية، يمكننا أن نتوقع رؤية المزيد من الـ PWAs التي ستسعد المزيد من المستخدمين، وتغير مفهوم استخدامنا للويب.
إذا كان لديك أي أسئلة أو تعليقات أو ملاحظات، فلا تتردد في تركها في التعليقات. وإذا أعجبتك هذه المقالة، فشاركها مع أصدقائك وزملائك.
المصادر:
تطبيقات الويب التقدمية (PWAs) هي تطبيقات مصممة للويب، ولكنها توفر تجربة استخدام مشابهة للتطبيقات التي تعمل على أجهزة الجوال، وتتميز بالعديد من الميزات كالسرعة، والعمل بدون اتصال بالإنترنت، وإرسال الإشعارات، تمامًا كما يحدث في الأجهزة الجوالة.
وتعتمد PWAs على مجموعة من تقنيات الويب والمعايير لتوفير تجربة مستخدم تشبه التطبيقات الأصلية. والمكونات الرئيسية لها هي:
- Web App Manifest
- Service Worker
- App Shell
- Web APIs
تتم كتابة تطبيقات الويب التقدمية (PWAs) باستخدام لغات برمجة الويب الأساسية: HTML وCSS وJavaScript.
تتمتع PWAs بالعديد من المزايا على تطبيقات الويب التقليدية والتطبيقات الأصلية (native app)، مثل:
- الوصول (Reach): يمكن الوصول إلى PWAs من قبل أي شخص لديه متصفح، بغض النظر عن الجهاز أو النظام الأساسي أو الموقع.
- الأداء (Performance): تعتبر تطبيقات الويب التقدمية PWAs سريعة ومتجاوبة (responsive)، وذلك بفضل تقنيات مثل التخزين المؤقت (caching)، والاستباق (prefetching) وتقسيم الكود (code splitting).
- التفاعل (Engagement): يمكن لـ PWAs زيادة تفاعل المستخدم، عن طريق توفير تجربة مستخدم متسقة وسلسة، وباستخدام ميزات مثل الإشعارات، واختصارات التطبيقات (app shortcuts)، وغيرهم من المميزات.
- التحويل (Conversion): يمكن لـ PWAs تحسين معدلات التحويل والإيرادات، من خلال زيادة ثقة المستخدمين. ألقِ نظرة على هذه الاحصائيات.
- التطوير (Development): تعد تطبيقات PWA أسهل وأرخص في التطوير والصيانة من التطبيقات الأصلية، لأنها تستخدم تقنيات الويب وقاعدة تعليمات برمجية واحدة (single codebase).
تعتبر تطبيقات الويب التقدمية PWAs سريعة ومتجاوبة (responsive)، وذلك بفضل تقنيات مثل التخزين المؤقت (caching)، والاستباق (prefetching) وتقسيم الكود (code splitting). تستخدم PWAs أيضًا بيانات أقل وبطارية أقل من التطبيقات الأصلية، ويمكنها العمل أيضًا بدون اتصال بالإنترنت أو على الشبكات ذات الجودة المنخفضة.
تقوم بعض الشركات الآن بتحويل تركيزها من مواقع الويب إلى تطبيقات الويب؛ وذلك لأن التطبيقات توفر المزيد من المحتوى وتجذب المستخدمين بشكل أفضل. ونتوقع رؤية المزيد من الـ تطبيقات الويب التقدمية (PWAs) في المستقبل؛ وذلك لأنها تجمع بين ميزتين رئيسيتين: وصول ومرونة الويب (reach and flexibility of the web) بجانب وظائف وأداء التطبيقات الأصلية (performance and functionality of native apps) فهي بذلك توفر تجربة استخدام مشابهة للتطبيقات التي تعمل على أجهزة الجوال، وتتميز بالعديد من الميزات كالسرعة، والعمل بدون اتصال بالإنترنت، وإرسال الإشعارات، تمامًا كما يحدث في الأجهزة الجوالة.
