تطبيقات الويب التقدمية PWA: هل تغنيك عن تطبيق الموبايل؟

بقلم محمد صقر · 2 نوفمبر 2026 · المواقع الإلكترونية · قراءة نحو 4 دقيقة

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

لكن PWA ليست عصا سحرية؛ لها حدود حقيقية خاصة على أجهزة Apple. هنا نشرح كيف تعمل، ومتى تناسب، ومتى لا.

ما هي PWA بالتحديد؟

PWA موقع عادي (HTML وCSS وJavaScript) يستوفي ثلاثة أمور رئيسية:

1. يعمل عبر HTTPS (شرط أمان).
2. لديه ملف Manifest يصف التطبيق: الاسم والأيقونات والألوان وطريقة العرض.
3. لديه Service Worker: سكربت يعمل في الخلفية، يعترض طلبات الشبكة ويخزن الموارد مؤقتًا، فيسمح بالعمل دون إنترنت وبالتحميل السريع.

المرجع الرسمي الجيد: PWA على MDN وweb.dev PWA.

الأجزاء العملية

1) ملف Manifest

{
  "name": "متجر صقر",
  "short_name": "صقر",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#05060a",
  "theme_color": "#05060a",
  "lang": "ar",
  "dir": "rtl",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

ثم اربطه في رأس الصفحة:

<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#05060a">

الأيقونات القابلة للقص (maskable) تضمن ظهورًا جيدًا على أندرويد.

2) Service Worker

مثال مبسط يخزن الصفحة الأساسية والملفات الثابتة ويقدمها دون إنترنت:

// sw.js
const CACHE = 'app-v1';
const ASSETS = ['/', '/offline.html', '/assets/style.css', '/assets/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
});

self.addEventListener('activate', e => {
  e.waitUntil(caches.keys().then(keys =>
    Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))));
});

self.addEventListener('fetch', e => {
  if (e.request.method !== 'GET') return;
  e.respondWith(
    fetch(e.request).then(res => {
      const copy = res.clone();
      caches.open(CACHE).then(c => c.put(e.request, copy));
      return res;
    }).catch(() => caches.match(e.request).then(r => r || caches.match('/offline.html')))
  );
});

وتسجيله من الصفحة:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
}

هذا نمط «الشبكة أولًا مع احتياطي من التخزين» وهو آمن للمحتوى المتجدد. هناك استراتيجيات أخرى مثل «التخزين أولًا» للملفات الثابتة و«التحديث أثناء العرض» (stale-while-revalidate). الأخطر في Service Worker هو التخزين الخاطئ: قد يعلق المستخدمون على نسخة قديمة. لذلك رتّب الإصدارات ونظّف التخزين القديم كما في المثال.

3) صفحة بلا إنترنت

صفحة offline.html لطيفة تخبر المستخدم أنه بلا اتصال وتعرض ما هو متاح، أفضل من رسالة المتصفح الافتراضية.

ماذا تعطيك PWA؟

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

حدود PWA: كن واقعيًا

• iOS: دعم Apple لـPWA تحسن لكنه يظل أقل مرونة من أندرويد: قيود على بعض الواجهات والتخزين وسلوك التثبيت (التثبيت عبر «إضافة إلى الشاشة الرئيسية» يدويًا، ولا نافذة تثبيت تلقائية كأندرويد). تحقق من الوضع الحالي قبل البناء، فالدعم يتغير.
• الوصول للعتاد: كاميرا وGPS وملفات متاحة، لكن حساسات وخصائص متقدمة (بلوتوث، NFC، تكامل عميق مع النظام) محدودة أو غير مدعومة في كل المنصات.
• الظهور في المتاجر: PWA لا تظهر في بحث App Store تلقائيًا. يمكن تغليفها لنشرها في Google Play (عبر Trusted Web Activity) لكن على iOS يحتاج الأمر تطبيقًا أصليًا أو غلافًا وفق شروط Apple.
• الأداء الثقيل: ألعاب رسومية قوية أو معالجة ثقيلة قد تحتاج تطبيقًا أصليًا.
• انتشار الفكرة: بعض المستخدمين لا يفهمون التثبيت من المتصفح، فتحتاج توجيهًا بسيطًا.
• تعقيد التخزين المؤقت: يحتاج انضباطًا في إدارة الإصدارات.

متى تختار PWA؟

مناسبة غالبًا لـ:

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

الأفضل التطبيق الأصلي أو العابر للمنصات (مثل Flutter أو React Native) حين:

• تحتاج وصولًا عميقًا للنظام وحساسات وخلفية متقدمة.
• تعتمد على الظهور في App Store/Play Store كقناة اكتساب.
• تبني لعبة أو تطبيقًا ثقيلًا في الرسوميات.
• تريد تجربة مطابقة تمامًا لمعايير كل منصة.

ولتفصيل الاختيار بين الموقع والتطبيق موقع أم تطبيق موبايل، وبين تقنيات التطبيقات Flutter وReact Native والأصلي.

خطوات بناء PWA لموقعك الحالي

1. تأكد من HTTPS وصحة الموقع (الدومين والاستضافة).
2. اجعل التصميم متجاوبًا بالكامل (التصميم المتجاوب).
3. أضف Manifest بأيقونات ومعلومات صحيحة.
4. سجّل Service Worker بإستراتيجية تخزين مناسبة لنوع محتواك.
5. أضف صفحة بلا إنترنت.
6. اختبر بـLighthouse (يتضمن فحصًا للتثبيت وPWA) وبتجربة التثبيت على أجهزة حقيقية.
7. حسّن الأداء (Core Web Vitals).
8. وجّه المستخدم للتثبيت بزر لطيف أو إرشاد بسيط بدل نافذة مزعجة.
9. راقب الاستخدام وسلوك التثبيت بالتحليلات.

إن أردت أداة مساعدة، يوجد PWABuilder لفحص موقعك وتوليد أصول التطبيق.

PWA والسيو

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

أخطاء شائعة

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

أسئلة شائعة

أسئلة شائعة

اقرأ أيضاً

مصادر موثوقة للاستزادة

• PWA على MDN
• تعلم PWA على web.dev
• PWABuilder
• Lighthouse