دليل PWA (Progressive Web Apps): جعل تطبيقات الويب تعمل مثل تطبيقات الجوال

ما هي PWA؟

PWA (Progressive Web Apps) هي تطبيقات web مبنية بـ web technologies توفر تجربة app mobile native.

PWA تستخدم modern web technologies مثل Service Worker وWeb App Manifest وHTTPS. تعمل في أي navegador ولا تتطلب app store.

الميزات key: وظيفة offline، إضافة إلى الشاشة الرئيسية، إشعارات push، مزامنة في الخلفية، وضع fullscreen.

المزايا: codebase واحد (web + mobile)، لا يتطلب موافقة app store، تحديثات instantáneas، تكلفة تطوير menor، SEO friendly.

Web App Manifest

ملف manifest.json يحدد metadata الـ PWA: name، short_name، start_url، display، background_color، theme_color، icons.

مثال على manifest: { "name": "Utilgo", "short_name": "Utilgo", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90d9", "icons": [{"src": "/icon-192.png", "sizes": "192x192"}] }.

display: standalone يسمح للـ app بالعمل بدون UI del navegador (barra de direcciones، navigación). خيارات fullscreen وminimal-ui متوفرة أيضًا.

الأيقونات: تتطلب at least أيقونات PNG بحجم 192x192 و512x512 pixel. دعم أيقونات maskable ينشئ أيقونات adaptativas.

اربط manifest في <head> بـ <link rel="manifest" href="/manifest.json">. المتصفح يقرأ manifest لـ enabling وظائف PWA.

Service Worker

Service Worker هو ملف JavaScript يُنفّذ بين navegador والشبكة. يعمل في الخلفية و provides وصول offline، cache وإشعارات push.

التسجيل: يتم تسجيل Service Worker بـ navigator.serviceWorker.register('/sw.js'). يجب أن يعمل على HTTPS أو localhost.

استراتيجيات cache: Cache First (أولًا cache، ثم شبكة)، Network First (أولًا شبكة، ثم cache)، Stale While Revalidate (serve من cache، تحديث في الخلفية).

Cache API: يتم cache الـ assets estáticos بـ caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js'])).

Fallback offline: اعرض صفحة personalized عندما تكون offline. self.addEventListener('fetch', (e) => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

متطلبات PWA وLighthouse

HTTPS: يجب أن تعمل PWA على HTTPS (باستثناء localhost). شهادة SSL مطلوبة.

تصميم responsive: بما أن PWA تعمل على dispositivos móviles، التصميم responsive إلزامي. أضف meta tag viewport.

تحميل سريع: يجب أن يكون التحميل الأول أقل من 3 ثوانٍ. سرّع بـ code splitting وlazy loading وcache.

تدقيق PWA في Lighthouse: نفّذ تدقيق PWA في تبويب Lighthouse في Chrome DevTools. يتحقق من جميع معايير PWA (قابل للتثبيت، يعمل offline، تحميل سريع).

قابلية التثبيت: المتصفح يعرض تلقائيًا زر 'إضافة إلى الشاشة الرئيسية' عندما تُستوفى شروط manifest وService Worker.

PWA vs App Native

مزايا PWA: codebase واحد، تحديثات instantáneas، لا يتطلب app store، SEO friendly، تكلفة menor، حجم pequeño.

مزايا app native: الوصول الكامل إلى hardware (cámara، Bluetooth، NFC)، أداء mejor، visibility في app store، reliability إشعارات push.

معايير الاختيار: PWA إذا كان الميزانية محدودة و требуется lanzamiento rápido. App native إذا كان required الوصول الكامل إلى hardware y máximo rendimiento.

نهج hybrid: ابدأ بـ PWA، انتقل إلى app native عندما تنمو base المستخدمين. أو convert PWA إلى app native بـ Capacitor/Ionic.

أمثلة PWA والأدوات

أمثلة PWA ناجحة: Twitter Lite (65% datos menor)، Pinterest (44% engagement usuarios más)، Starbucks (pedidos offline).

أدوات desarrollo: Workbox (biblioteca Service Worker de Google)، PWA Builder (Microsoft)، Lighthouse (auditoría)، Chrome DevTools (debugging).

دعم frameworks: Next.js (next-pwa)، Nuxt.js (@nuxtjs/pwa)، React (Create React App PWA template)، Vue (Vue CLI PWA plugin).

الاختبار: تحقق من Service Worker وCache وManifest في تبويب Application في Chrome DevTools. قس score PWA بـ Lighthouse.