دليل عملي
دليل بناء المواقع بصيغة تطبيق PWA
تطبيق الويب التقدمي PWA (Progressive Web App) هو موقع ويب يمكن تثبيته على شاشة الجوال أو الكمبيوتر ويفتح في نافذة مستقلة مثل التطبيق، ويمكن أن يعمل جزئياً دون إنترنت. لا يحتاج إلى متجر تطبيقات، ويُبنى بتقنيات الويب نفسها.
آخر تحديث: 10 أكتوبر 2026
الإجابة المختصرة: ما هو PWA؟
PWA موقع عادي أُضيف إليه أمران: ملف تعريف التطبيق (Web App Manifest) يحدد الاسم والأيقونة والألوان وطريقة الفتح، و—عند الحاجة فقط—عامل خدمة (Service Worker) يحفظ ملفات الموقع ليعمل دون اتصال.
النتيجة: يضيف الزائر الموقع إلى الشاشة الرئيسية بأيقونة، ويفتحه دون شريط المتصفح. الرابط نفسه يبقى قابلاً للفهرسة في Google كأي صفحة ويب.
PWA أم تطبيق جوال أصلي؟
| المحور | تطبيق PWA | تطبيق أصلي (App Store / Google Play) |
|---|---|---|
| التثبيت | من المتصفح مباشرة عبر «إضافة إلى الشاشة الرئيسية» | من المتجر بعد مراجعة النشر |
| الظهور في البحث | صفحاته قابلة للفهرسة في Google | صفحة المتجر فقط |
| التحديث | يصل للمستخدم عند فتح الموقع | يحتاج نشر نسخة جديدة في المتجر |
| الوصول لميزات الجهاز | محدود بما يسمح به المتصفح | وصول أوسع للكاميرا والإشعارات والخلفية |
| الإشعارات على iPhone | تعمل فقط بعد تثبيت التطبيق على الشاشة الرئيسية | مدعومة |
متى يناسبك PWA؟
- 01تريد أن يعود العملاء إلى خدمتك بأيقونة على الجوال دون تكلفة نشر تطبيق في المتاجر
- 02مشروعك أداة استخدام متكرر: حجوزات، طلبات، لوحة متابعة، أداة داخلية لفريق
- 03تحتاج أن تبقى صفحاتك ظاهرة في البحث بالعربي
- 04يستخدم جمهورك اتصالاً متقطعاً وتحتاج فتح الصفحات السابقة دون إنترنت
متى لا يناسبك؟
- 01تحتاج ظهوراً داخل App Store أو Google Play كقناة اكتساب أساسية
- 02تعتمد على ميزات جهاز متقدمة أو عمل مستمر في الخلفية
- 03موقعك صفحة تعريفية يزورها الشخص مرة واحدة؛ التثبيت لن يضيف قيمة
المستوى الأول: قابل للتثبيت فقط (الأبسط والأكثر أماناً)
معظم من يطلب «تطبيق على الجوال» يحتاج هذا المستوى فقط: ملف manifest وأيقونات ووسوم في رأس الصفحة، دون عامل خدمة. لا يسبب مشكلات التخزين القديم ولا يحتاج صيانة.
- 01ملف manifest.webmanifest يحوي: name، short_name، start_url، display: standalone، theme_color، background_color
- 02أيقونات بمقاسي 192×192 و512×512 بكسل، وأيقونة maskable للأندرويد
- 03apple-touch-icon بمقاس 180×180 لأجهزة iPhone
- 04وسم link rel=manifest ووسم theme-color في رأس كل صفحة
- 05الموقع يعمل عبر HTTPS
المستوى الثاني: العمل دون إنترنت
أضف عامل الخدمة فقط إذا كان العمل دون اتصال مطلباً حقيقياً. الخطأ الأشهر هنا هو تخزين صفحات HTML بطريقة «التخزين أولاً»، فيبقى الزوار عالقين على نسخة قديمة أو شاشة بيضاء بعد كل تحديث.
- 01استخدم مكتبة مجرّبة لتوليد عامل الخدمة (مثل vite-plugin-pwa أو Workbox) بدل كتابته يدوياً
- 02الصفحات: الشبكة أولاً (Network First)، والملفات ذات الأسماء المتغيرة: التخزين أولاً
- 03لا تسجّل عامل الخدمة في بيئة التطوير أو المعاينة
- 04استثنِ مسارات تسجيل الدخول وروابط OAuth من التخزين
- 05جهّز صفحة بديلة واضحة عند انقطاع الاتصال
كيف تطلب PWA من أداة Vibe Coding دون أخطاء؟
حدد المستوى المطلوب صراحة، فالأدوات تميل لإضافة عامل خدمة كامل حتى عندما لا تحتاجه. مثال برومبت:
«حوّل الموقع إلى تطبيق قابل للتثبيت على الجوال فقط، دون عمل دون إنترنت ودون Service Worker. أضف manifest بالاسم [الاسم] واللون [اللون] وأيقونات 192 و512 وapple-touch-icon، ووسوم الرأس اللازمة. لا تغيّر أي شيء آخر، واذكر الملفات التي عدّلتها.»
وإذا احتجت العمل دون اتصال: «أضف دعم العمل دون إنترنت عبر vite-plugin-pwa بإستراتيجية Network First للصفحات، ولا تسجّل عامل الخدمة في التطوير أو داخل iframe المعاينة.»
PWA وSEO وGEO
تحويل الموقع إلى PWA لا يحسّن ترتيبه في Google بحد ذاته، ولا يضره إذا بُني بشكل صحيح. المهم أن تبقى الصفحات تُعرض من الخادم بمحتوى نصي حقيقي، ولكل صفحة رابط مستقل وعنوان ووصف خاصان بها.
تجنب تحويل الموقع إلى «صفحة واحدة» تُحمّل المحتوى بعد فتح التطبيق، لأن محركات البحث ونماذج الذكاء الاصطناعي قد لا ترى المحتوى. وتأكد أن عامل الخدمة لا يقدّم نسخة قديمة لمحركات البحث.
قائمة فحص قبل إطلاق تطبيق PWA
- 01يظهر خيار التثبيت في Chrome على أندرويد، و«إضافة إلى الشاشة الرئيسية» يعمل في Safari على iPhone
- 02الأيقونة والاسم يظهران بشكل صحيح بعد التثبيت
- 03التطبيق المثبّت يفتح على start_url الصحيح دون شريط المتصفح
- 04بعد نشر تحديث، يرى المستخدم النسخة الجديدة دون مسح البيانات يدوياً
- 05تسجيل الدخول والخروج يعملان من التطبيق المثبّت
- 06تقرير Lighthouse في Chrome DevTools لا يُظهر أخطاء في manifest
- 07كل صفحة عامة لها canonical وتظهر محتواها قبل تشغيل JavaScript
الحدود والقيود
- 01دعم ميزات PWA يختلف بين المتصفحات، وiPhone أكثرها تقييداً
- 02أنظمة الجوال تحفظ بعض إعدادات التطبيق عند التثبيت؛ تغيير start_url أو الاسم لاحقاً قد يتطلب إعادة التثبيت
- 03عامل الخدمة المكتوب بشكل خاطئ قد يُبقي الزوار على نسخة قديمة، ويحتاج إصلاحه نشر عامل بديل في المسار نفسه
أسئلة شائعة
ما هو PWA بالعربي؟
PWA اختصار Progressive Web App، أي تطبيق ويب تقدمي: موقع ويب يُثبَّت على الجوال أو الكمبيوتر بأيقونة ويفتح كتطبيق مستقل، ويمكن أن يعمل جزئياً دون إنترنت.
هل يمكن نشر تطبيق PWA في App Store أو Google Play؟
التثبيت الأساسي يتم من المتصفح دون متجر. يمكن تغليفه لاحقاً لنشره في المتاجر بأدوات مخصصة، لكن ذلك مسار مختلف له متطلبات مراجعة خاصة.
هل يعمل PWA على iPhone؟
نعم، عبر Safari وخيار «إضافة إلى الشاشة الرئيسية». بعض الميزات مثل الإشعارات تعمل فقط بعد التثبيت، وبعضها محدود مقارنة بأندرويد.
هل أحتاج Service Worker لكي يصبح موقعي قابلاً للتثبيت؟
لا لمعظم الاستخدامات. ملف manifest والأيقونات ووسوم الرأس تكفي للتثبيت على الشاشة الرئيسية. عامل الخدمة مطلوب للعمل دون إنترنت وللإشعارات.
هل يؤثر PWA على ترتيب موقعي في Google؟
ليس عاملاً مباشراً في الترتيب. ما يؤثر هو سرعة الصفحات وظهور المحتوى للزواحف، وPWA المبني جيداً لا يعيق ذلك.
هل يمكن بناء PWA باستخدام Lovable أو Bolt أو Replit؟
نعم، لأنها تبني تطبيقات ويب. حدّد في طلبك هل تريد التثبيت فقط أم العمل دون إنترنت، واختبر النتيجة على الموقع المنشور لا في المعاينة.