Stax

منشئ PWA Manifest

إنشاء Web App Manifest كامل لتطبيقك التدريجي.

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "description": "A Progressive Web Application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />

ما هو PWA manifest builder؟

أداة لإنشاء manifest.json لـ Progressive Web Apps. أدخل اسم الموقع، الأيقونات، الألوان - تحصل على JSON كامل جاهز. أساسي لتحويل موقعك لـ app قابل للتثبيت على الموبايل والديسكتوب.

حقول رئيسية

  1. name و short_name
  2. start_url (default: /)
  3. display (standalone/fullscreen)
  4. icons متعدد الأحجام
  5. theme_color و background_color

أحجام أيقونات مطلوبة

  • 192x192 - الحد الأدنى
  • 512x512 - splash screen
  • 180x180 - Apple touch icon
  • maskable icons - Android adaptive
  • SVG لأفضل تكيف

PWA features

service worker للـ offline. install prompt على الأجهزة المتوافقة. ظهور في app drawer كتطبيق native. notifications (مع موافقة). access to camera، GPS، storage. lighthouse PWA score 100 يحسن SEO. كل المتطلبات في manifest + service worker. test على أجهزة فعلية.

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

ما هو manifest.json؟
ملف JSON يخبر المتصفح كيف يعرض الموقع كـ Progressive Web App. يحدد الاسم، الأيقونة، الألوان، الـ orientation، start URL. يمكن المستخدمين تثبيت موقعك على homescreen كتطبيق. أساسي للـ PWAs في 2026.
ما الحقول المطلوبة؟
name (اسم كامل)، short_name (للأيقونة)، start_url (الصفحة الرئيسية)، display (standalone/fullscreen)، icons (أحجام متعددة 192، 512)، theme_color، background_color. minimum للعمل: name، start_url، display، icons. المزيد للتجربة الأفضل.
PWA vs تطبيق native؟
PWA: HTML/CSS/JS، يعمل في كل المنصات، تحديثات فورية، أصغر حجماً، أرخص للتطوير. Native: أداء أفضل، ميزات نظام عميقة (Bluetooth، widgets)، يظهر في app stores. PWA أفضل لمعظم المواقع، Native للتطبيقات المعقدة.
كيف أختبر PWA؟
Chrome DevTools > Lighthouse > Progressive Web App. يفحص: manifest، service worker، HTTPS، responsive، أداء. هدف 90+. تثبيت في Chrome: install button في address bar. test على أجهزة موبايل فعلية. PWA-friendly = مكافأة SEO من Google.

أدوات ذات صلة