ما هو تطبيق الويب التقدمي PWA؟ مقارنة مع التطبيق الأصلي والموقع المتجاوب

ما هو PWA؟ تطبيق الويب التقدمي (Progressive Web App) هو موقع يتصرّف مثل التطبيق: يُثبَّت على الجوال دون المرور بـApp Store أو Google Play، وتستقر أيقونته على الشاشة الرئيسية، ويُفتح في نافذة مستقلة دون شريط عنوان، وإذا صُمّم بشكل صحيح فإن جزءاً منه يعمل حتى مع اتصال ضعيف أو منقطع. وعندما تعرض عليك خدمةٌ ما «تطبيق ويب» تثبّته مباشرة من موقعها، فهو في الغالب PWA.

إذا كنت متردداً بين بناء تطبيق أصلي (Native)، أو إطلاق PWA، أو الاكتفاء بموقع متجاوب، نستعرض في هذا المقال المكوّنات التقنية لـPWA، وقدراته وحدوده الفعلية، والمقارنة بين الخيارات الثلاثة، ومؤشرات الاختيار الصحيح.

ما هو PWA وما الفرق بينه وبين الموقع العادي؟

PWA اختصار لـProgressive Web App، وكلمة «تقدمي» هي مفتاح فهمه: الأساس موقع عادي يُفتح في أي متصفح، وحيثما توفّر المتصفح والجهاز إمكانات أكثر، تُضاف إليه قدرات شبيهة بالتطبيقات مثل التثبيت والعمل دون اتصال والإشعارات. لذا فإن PWA ليس لغة برمجة ولا إطار عمل بعينه؛ بل مجموعة من تقنيات الويب القياسية تُطبَّق على موقع.

أهم الفروق بين PWA والموقع العادي:

• قابل للتثبيت: يضيفه المستخدم من داخل المتصفح إلى الشاشة الرئيسية لجواله أو حاسوبه.
• يعمل في نافذة مستقلة: بعد التثبيت يختفي شريط العنوان وأزرار المتصفح، وتصبح التجربة شبيهة بالتطبيق.
• يتعامل مع الاتصال الضعيف: تُخزَّن الملفات اللازمة على الجهاز، فتُحمَّل الزيارات اللاحقة بسرعة أكبر.
• يمكنه إرسال الإشعارات: بإذن المستخدم، ومع قيود نوضحها لاحقاً.

وفي الوقت نفسه، يبقى PWA موقعاً: له عنوان على الإنترنت، ويستطيع جوجل فهرسة صفحاته، وكل تغيير على الخادم يصل إلى جميع المستخدمين. لذا إذا كان موقعك الحالي بطيئاً أو مضطرباً على الجوال، فلن يحلّ تحويله إلى PWA المشكلة؛ يجب إصلاح الأساس أولاً.

المكوّنات التقنية الثلاثة لـPWA بلغة بسيطة

ثلاثة مكوّنات تحوّل الموقع إلى PWA. ومعرفة دور كلٍّ منها تساعدك على التحدث مع الفريق التقني بدقة أكبر.

1. HTTPS: شرط الدخول

لا يعمل PWA إلا عبر اتصال آمن؛ لأن Service Worker يستطيع إدارة الطلبات بين الموقع والمستخدم، والمتصفحات لا تمنح هذه الصلاحية إلا لموقع اتصاله مشفّر. واليوم يحتاج كل موقع جادّ تقريباً إلى شهادة SSL، كما تتوفر شهادات مجانية موثوقة.

2. ملف بيان تطبيق الويب (Web App Manifest)

ملف البيان (Manifest) ملف نصي صغير بصيغة JSON يعرّف المتصفح بالتطبيق: الاسم الكامل والاسم المختصر، والأيقونات بمقاسات مختلفة، واللون الأساسي ولون الخلفية، والصفحة التي تظهر عند فتح التطبيق، ووضع العرض (مثل نافذة مستقلة دون شريط عنوان). ويستخدم المتصفح هذه المعلومات للتثبيت وإنشاء الأيقونة وشاشة البداية.

3. Service Worker: المحرك خلف الكواليس

Service Worker ملف JavaScript يشغّله المتصفح بشكل منفصل عن الصفحة نفسها. تخيّله وسيطاً بين الموقع والإنترنت يقرر لكل طلب هل يجلب الاستجابة من الشبكة أم من النسخة المخزّنة (الكاش) على الجهاز. العمل دون اتصال، والتحميل السريع في الزيارات اللاحقة، واستقبال الإشعارات، كلها تأتي من هذا المكوّن.

وهنا يكمن الجزء الهندسي الأساسي في PWA. فإذا لم تُصمَّم استراتيجية التخزين المؤقت بشكل صحيح، فقد يرى المستخدم سعراً قديماً، أو مخزوناً خاطئاً، أو نسخة متقادمة من الصفحة. لذا يجب أن يكون واضحاً مسبقاً ما الذي يُخزَّن مؤقتاً، وما الذي يُجلب دائماً جديداً من الخادم، وكيف تصل النسخة الجديدة إلى المستخدم.

ما الذي يستطيع تطبيق PWA فعله وما الذي لا يستطيعه؟

ينشأ معظم الإحباط من PWA عندما تتوقع منه كل قدرات التطبيق الأصلي.

ما يجيده PWA

• العمل دون اتصال أو مع اتصال ضعيف: عرض الصفحات التي فُتحت سابقاً، وصفحة لائقة عند انقطاع الاتصال بدلاً من خطأ المتصفح، وفي بعض المتصفحات الاحتفاظ بالنموذج وإرساله بعد عودة الاتصال.
• الإشعارات (Web Push) لتذكير المواعيد، أو حالة الطلب، أو رسائل الدعم؛ فقط عندما يسمح المستخدم بذلك.
• الوصول إلى بعض إمكانات الجهاز: الكاميرا، والميكروفون، والموقع الجغرافي، والمشاركة مع التطبيقات الأخرى، وكلها بإذن المستخدم وبحسب المتصفح.

قيود يجب أن تعرفها

• لا يملك وصولاً عميقاً إلى نظام التشغيل: مثل قراءة الرسائل النصية، أو الوصول الكامل إلى جهات الاتصال، أو التشغيل الطويل والمستمر في الخلفية.
• دعم المتصفحات غير متساوٍ: بعض الإمكانات، مثل الاتصال بأجهزة البلوتوث أو NFC، متاحة في بعض المتصفحات فقط، وغالباً في كروم على أندرويد.
• المهام الثقيلة جداً، مثل الألعاب ذات الرسوميات المتقدمة أو التحرير الاحترافي للفيديو، تعمل بسلاسة أكبر في التطبيق الأصلي.
• البيانات المخزّنة ليست دائمة: قد يحذف المتصفح البيانات المخزّنة عند نقص المساحة أو بعد فترة من عدم الاستخدام؛ لذا يجب أن تبقى بيانات المستخدم المهمة على الخادم.
• لا يظهر في متاجر التطبيقات: المستخدم الذي يبحث في متجر التطبيقات فقط لن يجد تطبيق PWA الخاص بك افتراضياً.

أندرويد وآيفون ليسا متساويين

في أندرويد، يقدّم كروم والمتصفحات المبنية عليه أكبر قدر من الدعم، ويمكنها أن تعرض اقتراح التثبيت على المستخدم تلقائياً. أما في آيفون فالوضع أكثر محدودية: يتم التثبيت يدوياً من قائمة المشاركة (Share) وخيار «Add to Home Screen»، ولا تعمل إشعارات الويب إلا لتطبيقات الويب المثبّتة على الشاشة الرئيسية، وذلك في الإصدارات الأحدث من iOS وبعد موافقة المستخدم. إذا كان كثير من عملائك يستخدمون آيفون، فضع دليل تثبيت مختصراً داخل الموقع.

نقطة أخرى: تمرّ إشعارات الويب عبر البنية التحتية لخدمات الإشعارات التابعة لمطوّري المتصفحات. وقبل أن تعتمد عليها في تواصل حيوي مع العملاء، اختبر الإرسال على هواتف عملائك الفعليين واتصالاتهم.

تطبيق أم موقع؟ مقارنة PWA بالتطبيق الأصلي والموقع المتجاوب

يُبنى التطبيق الأصلي لكل نظام تشغيل على حدة (أو للنظامين معاً عبر أطر عمل متعددة المنصات مثل Flutter وReact Native)، ويُثبَّت من متجر التطبيقات. أما الموقع المتجاوب فيتكيّف مع حجم الشاشة، لكنه لا يوفر التثبيت ولا العمل دون اتصال. ويقع PWA بين الاثنين:

خلاصة الجدول: لجذب عملاء جدد من جوجل، الموقع ضروري ولا يحلّ التطبيق الأصلي محله. وللحفاظ على العملاء الحاليين واستخدامهم المتكرر، يأتي دور PWA أو التطبيق. وإذا كان منتجك يحتاج إلى إمكانات عميقة في الجهاز، فالتطبيق الأصلي هو الخيار الأكثر منطقية.

لماذا يجذب PWA كثيراً من الأعمال؟

لـPWA استخدامات في كل مكان، وتبرز بعض مزاياه بشكل خاص:

• لا حاجة إلى متجر تطبيقات للبدء: يُثبَّت PWA مباشرة من نطاقك الخاص، دون حساب مطوّر أو إدراج في المتجر.
• تحديث دون طابور مراجعة: تنشر إصلاح خطأ أو تغيير سعر على الخادم، فيحصل المستخدم على النسخة الجديدة في زيارته التالية.
• تنزيل أخف: للمستخدم الذي لديه اتصال بطيء، أو باقة بيانات محدودة، أو ذاكرة جوال ممتلئة، يكون تثبيت PWA أسهل.
• تحمّل الاتصال غير المستقر: مع تخزين مؤقت صحيح، تبقى أجزاء من الخدمة متاحة حتى مع انقطاع الاتصال وعودته.
• شيفرة واحدة للجميع: أندرويد وآيفون والحاسوب تُغطّى بمشروع واحد.

وللأمانة، يعتمد PWA أيضاً على سياسات المتصفحات وأنظمة التشغيل، وقد تتغير هذه السياسات. كما تبقى متاجر التطبيقات بالنسبة لكثير من الجماهير المكان المعتاد للعثور على التطبيقات الأصلية وتثبيتها. PWA طريق أبسط، لا طريق خالٍ من المخاطر.

ما الأعمال التي تستفيد أكثر من PWA؟

يكتسب PWA قيمته الحقيقية عندما يعود المستخدم إلى خدمتك بشكل متكرر. بعض الأمثلة الشائعة:

• المتاجر الإلكترونية ذات المشتريات المتكررة، مثل السوبرماركت الإلكتروني أو المستلزمات الاستهلاكية. وإذا كنت لا تزال في مرحلة الإطلاق، فراجع أيضاً خطوات إطلاق متجر إلكتروني.
• حجز المواعيد والحجوزات في العيادات، وصالونات التجميل، والنوادي الرياضية، والمطاعم، حيث يفيد تذكير المواعيد.
• بوابات العملاء والوكلاء والأنظمة الداخلية مثل تتبّع الطلبات، أو المبيعات الميدانية، أو المستودعات، التي لا تحتاج إلى نشر عام.
• اختبار فكرة تطبيق: قبل الاستثمار في تطبيق أصلي، اختبر عبر PWA هل يستخدمه المستخدمون فعلاً أم لا.

متى يبقى التطبيق الأصلي الخيار الصحيح؟

لا يحلّ PWA محل التطبيق الأصلي في كل الحالات. إذا انطبق عليك أحد هذه الشروط، فادرس بجدية بناء تطبيق أصلي أو على الأقل الجمع بين PWA والتطبيق:

• منتجك يعتمد على عتاد الجوال: الاتصال بأجهزة البلوتوث، أو التتبّع المستمر للموقع في الخلفية، أو التعامل مع ملفات ضخمة.
• الإشعارات الموثوقة على آيفون أمر حيوي، ولا يمكنك الاعتماد على تثبيت المستخدم لـPWA يدوياً.
• لديك تجربة رسومية ثقيلة: ألعاب، أو واقع معزز، أو تحرير احترافي للصور والفيديو.
• الحضور في المتاجر جزء من تسويقك: جمهورك يبحث عن التطبيق في Google Play أو App Store أو متاجر أخرى.

وهناك طريق وسط أيضاً: ابنِ الواجهة الخلفية (Backend) وAPI بحيث يستخدمهما كلٌّ من PWA والتطبيق الأصلي؛ ابدأ بـPWA، وعندما يثبت الطلب أضف التطبيق الأصلي. شرحنا مراحل هذا المسار في مقال مراحل تطوير التطبيق من الفكرة إلى النشر.

كيف تعرف أن الموقع PWA وكيف تثبّته؟

أبسط علامة أن المتصفح يقترح التثبيت، وأن الموقع يُفتح بعد التثبيت دون شريط عنوان. وقد تختلف أسماء الخيارات قليلاً بين إصدارات المتصفحات.

تثبيت PWA على أندرويد (كروم)

1. افتح الموقع في كروم.
2. إذا ظهرت رسالة التثبيت فوافق عليها؛ وإلا فافتح قائمة النقاط الثلاث أعلى الشاشة.
3. اختر «تثبيت التطبيق» (Install app) أو «إضافة إلى الشاشة الرئيسية».

تثبيت PWA على آيفون (سفاري)

1. افتح الموقع في سفاري.
2. اضغط زر المشاركة (مربع بسهم يتجه للأعلى).
3. اختر «Add to Home Screen» ثم أكّد.

في الإصدارات الأحدث من iOS، تتيح بعض المتصفحات الأخرى هذه الإمكانية أيضاً. وعلى الحاسوب، في كروم وEdge، تظهر أيقونة التثبيت في شريط العنوان أو خيار التثبيت في قائمة المتصفح.

لصاحب الموقع: الفحص التقني

في كروم على الحاسوب، افتح أدوات المطوّر (DevTools)، ثم في قسم Application راجع قسمَي Manifest وService workers؛ إذ تظهر هناك أخطاء ملف البيان وحالة Service Worker. ولمزيد من التفاصيل التقنية، تُعدّ وثائق PWA في MDN مرجعاً موثوقاً.

تكلفة بناء PWA ومساره: من موقعك الحالي إلى تطبيق متكامل

إذا كان لديك موقع

في كثير من الحالات لا داعي للبدء من الصفر؛ إذ يمكن تحويل الموقع الحالي إلى PWA. الخطوات المعتادة:

1. تقييم الأساس: تُراجَع سرعة الموقع ومدى تجاوبه وبنيته؛ وعادةً ما تحظى توصيات تحسين سرعة الموقع بالأولوية في هذه المرحلة.
2. ملف البيان والأيقونات وService Worker: مع استراتيجية للتخزين المؤقت؛ أي ما الذي يكون متاحاً دون اتصال وما الذي يأتي دائماً جديداً من الخادم.
3. صفحة عدم الاتصال، ودليل التثبيت، والإشعارات عند الحاجة، مع سيناريو واضح لنوع الرسالة التي تُرسل، ومتى، ولمن.
4. الاختبار على أجهزة أندرويد وآيفون حقيقية، لا على المحاكيات فقط.

لمواقع ووردبريس (WordPress) توجد إضافات تضيف ملف بيان وService Worker أساسيين. وهي كافية عادةً لموقع تعريفي بسيط، لكن في المتجر الإلكتروني قد يسبب التخزين المؤقت الخاطئ لسلة الشراء أو الأسعار مشكلة جدية، لذا يلزم ضبط دقيق. وقد ناقشنا ما إذا كان ووردبريس كافياً لمشروعك أم تحتاج إلى برمجة مخصصة في مقال ووردبريس أم البرمجة المخصصة.

إذا كنت تبدأ من الصفر

الأفضل أن يكون PWA جزءاً من التصميم منذ اليوم الأول، لا أن يُلصق بالموقع لاحقاً. ففي مشروع تصميم المواقع الإلكترونية يمكن التخطيط للبنية والسرعة وقابلية التثبيت معاً منذ البداية.

كم التكلفة؟

لا توجد تكلفة ثابتة لتحويل موقع إلى PWA؛ فهي تعتمد على وضع الموقع الحالي، والحاجة إلى العمل دون اتصال والإشعارات، ومدى تعقيد البيانات، لذا تُقدَّر بعد مراجعة الموقع. وإذا كنت تفكر أيضاً في مسار التطبيق: في الباقات المنشورة لخدمة تطوير تطبيقات الجوال، تبدأ نسخة MVP من $6,900 (منصة واحدة)، والنسخة القياسية $12,900 (iOS وأندرويد مع لوحة ويب)، أما المشاريع المؤسسية فأسعارها حسب الطلب.

الأسئلة الشائعة

ما هي «نسخة PWA» ولماذا تقترحها بعض الخدمات؟

نسخة PWA هي تطبيق الويب التقدمي نفسه: نسخة من الخدمة تُثبَّت من داخل المتصفح وتستقر على الشاشة الرئيسية مثل التطبيق. وتقترحها الخدمات عادةً لمن لا يرغبون في تنزيل تطبيق كبير الحجم. ولأمانك، ثبّت نسخة PWA فقط من العنوان الرسمي للخدمة نفسها، وتحقق من النطاق بعناية قبل التثبيت.

هل يمكن تنزيل تطبيق PWA من Google Play أو متاجر التطبيقات الأخرى؟

يُثبَّت PWA عادةً مباشرة من الموقع نفسه، ولا يملك ملف تثبيت منفصلاً. ويمكن تغليف PWA في صورة تطبيق أندرويد عبر تقنية تُسمّى Trusted Web Activity وإرساله إلى المتجر، لكن شروط القبول تختلف من متجر لآخر ويجب التحقق منها قبل اتخاذ القرار.

هل تعمل إشعارات PWA على آيفون؟

نعم في الإصدارات الأحدث من iOS، بشرط أن يكون المستخدم قد ثبّت PWA عبر «Add to Home Screen» وسمح باستقبال الإشعارات. وفي آيفون، لا يرسل الموقع غير المثبّت إشعارات ويب. إذا كانت الإشعارات ركيزة أساسية في خدمتك، فضع هذا القيد في حسبانك عند اتخاذ القرار.

هل يؤثر PWA على الـSEO؟

كون الموقع PWA ليس عامل ترتيب بحد ذاته. لكن لأن PWA هو الموقع نفسه، فصفحاته قابلة للفهرسة، والسرعة الأعلى والتجربة الأفضل على الجوال تصبّ في مصلحة الـSEO. فقط إذا كانت الصفحات تُبنى بالكامل عبر JavaScript في المتصفح، فتأكد من أن جوجل يرى المحتوى الأساسي؛ إذ يقلّل العرض من جانب الخادم (Server-side rendering) هذا الخطر.

إذا لم تكن متأكداً هل يكفيك موقع متجاوب، أم أن PWA خيار أفضل، أم تحتاج إلى تطبيق أصلي، فراجع احتياجاتك وجمهورك معنا. في صفحة خدمات تطوير تطبيقات الجوال من MyTarh اطّلع على المسارات والباقات وسجّل طلب استشارة.