recent
أخبار ساخنة

تطبيقات الويب التقدّمية (PWA): حوِّل موقعك التقني إلى تجربة تشبه التطبيقات وتعمل دون اتصال

تمنحك PWA قدرة تشغيل موقعك كـ “شبه تطبيق” على الهاتف والكمبيوتر: إضافة للشاشة الرئيسية، عمل دون اتصال، إشعارات، وسرعة تحميل ملحوظة—وكل ذلك من دون متاجر التطبيقات.



PWA manifest.json service-worker.js Offline Ready
رسم SVG أصلي يوضّح علاقة أيقونة التطبيق وملف Manifest وملف Service Worker وتجهيز وضع عدم الاتصال.

لماذا PWA لمواقع التقنية؟

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

المتطلبات الأساسية

  1. HTTPS فعّال على النطاق/الفرعي.
  2. ملف manifest.json يعرّف الاسم والأيقونات وطريقة العرض.
  3. Service Worker لإدارة الكاش والتحديثات.
  4. تصميم متجاوب وتجربة سريعة على الأجهزة المحمولة.

ملف Manifest

أنشئ manifest.json في جذر الموقع، ثم اربطه في القالب لديك (عرض كود للشرح فقط):

{
  "name": "مقالات تقنيّة",
  "short_name": "Tech",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b0f1a",
  "theme_color": "#7c6cff",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Service Worker: أساس عمل دون اتصال

مثال بسيط يعتمد استراتيجية stale-while-revalidate للصفحات والمقالات:

// /service-worker.js
const CACHE = "pwa-tech-v1";
const PRECACHE = ["/", "/styles.css", "/offline.html"];

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

self.addEventListener("fetch", e => {
  const req = e.request;
  e.respondWith(
    caches.match(req).then(cached => {
      const fetchPromise = fetch(req).then(netRes => {
        const resClone = netRes.clone();
        caches.open(CACHE).then(c => c.put(req, resClone));
        return netRes;
      }).catch(() => cached || caches.match("/offline.html"));
      return cached || fetchPromise;
    })
  );
});

تسجيل الـ Service Worker (ضمن القالب لديك):

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/service-worker.js");
  });
}
</script>
نصيحة: ضع الملفات الحرجة (الشعار، css الأساسي، صفحة عدم الاتصال) ضمن PRECACHE، واترك الصور الثقيلة للكاش الديناميكي.

آلية التثبيت وإضافة للشاشة الرئيسية

  • عند استيفاء الشروط (Manifest + HTTPS + SW) سيظهر حدث beforeinstallprompt.
  • يمكنك إظهار زر “تثبيت” للمستخدمين المتكررين فقط.
  • احرص على أيقونات متعددة القياسات وصورة splash إن رغبت.
الميزةموقع عاديPWA
عمل دون اتصال✖✔
إضافة للشاشة الرئيسيةمحدود✔
أداء وسرعةيعتمد على الشبكةكاش محلي + أسرع

القياس والتحسين

  • اختبر عبر Lighthouse (قسم PWA) وتابع مؤشرات Core Web Vitals.
  • راقب حجم الكاش وحدّث اسم النسخة (pwa-tech-v2…) عند تغييرات كبيرة.
  • لصفحات المقالات: احجز أبعاد الصور لتقليل CLS، وفعّل loading="lazy".

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

هل أحتاج تطبيقًا أصليًا بعد PWA؟

إن كانت احتياجاتك تتعلق بالمحتوى والتصفح والإشعارات الأساسية فـ PWA كافية غالبًا. للميزات العميقة جداً بالأجهزة، قد تحتاج أصليًا.

هل تعمل على iOS؟

نعم مع بعض القيود؛ احرص على أيقونات وSplash ملائمة وإجراءات تسجيل SW وفق أحدث دعم متاح.

كيف أتجنب مشاكل التحديث؟

استخدم رقم نسخة للكاش، ونفّذ إزالة للكاش القديم في حدث activate إن لزم.

الخلاصة

تجعل PWA موقعك التقني أسرع وأكثر قربًا من المستخدم: تشغيل دون اتصال، إضافة للشاشة الرئيسية، وتجربة سلسة تشجع العودة للموقع. ابدأ بإنشاء manifest.json، أضف service worker بسيطًا، ثم حسّن الأداء تدريجيًا بناءً على القياسات.

google-playkhamsatmostaqltradent