UTILS.
‎100%‎ داخل المتصفح
📱

مولّد بيان تطبيق الويب (PWA)

أنشئ بيان تطبيق ويب صالحاً لـ PWA (manifest.json) بأيقونات وألوان سمة ووضع عرض، إضافة إلى وسم link rel=manifest الجاهز للصق.

— يظهر المخرج هنا —
— يظهر المخرج هنا —

حول هذه الأداة

يبني مولّد بيان تطبيق الويب ملف manifest.json صالحاً لتطبيق ويب تقدمي من نموذج بسيط، ثم يسلّمك وسوم HTML المرافقة لإسقاطها في <head> صفحتك. يُجمَّع كل شيء في متصفحك ولا يُرفع أي شيء — يمكنك نسخ JSON، أو تنزيله كـ manifest.json، أو نسخ وسوم link وmeta.

بيان تطبيق الويب هو ملف JSON الذي يتيح تثبيت موقع على شاشة رئيسية وتشغيله كتطبيق أصيل. تجمّع هذه الأداة المفاتيح القياسية — name وshort_name وdescription وstart_url وscope وdisplay (standalone أو fullscreen أو minimal-ui أو browser) وorientation وtheme_color وbackground_color ومصفوفة icons — مسقِطةً أي حقل تتركه فارغاً حتى يبقى الناتج نظيفاً. يصبح كل حجم أيقونة تحدّده مدخلاً بـ src وsizes وtype (مشتق من امتداد الملف)، ويتيح لك purpose الاختياري وسم الأيقونات كـ maskable. تُسلسَل النتيجة بـ JSON.stringify بمسافة بادئة من فراغين، فتكون مقروءة بشرياً ومتوافقة مع المعايير.

استخدم العنصر النائب {size} في مسار الأيقونة (مثلاً /icons/icon-{size}.png) ويُستبدل بكل بُعد مثل 192x192 و512x512. كحد أدنى ينبغي أن يتضمّن البيان اسماً وstart_url ووضع عرض وأيقونة 192px و512px على الأقل، وهي الافتراضيات هنا. ارجع إليه من صفحتك بوسم <link rel="manifest"> المولّد وأضِف meta الخاص بـ theme-color لواجهة المتصفح.

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

ما هو بيان تطبيق الويب؟
إنه ملف JSON يصف تطبيق الويب التقدمي — اسمه وأيقوناته وألوانه وكيف ينبغي أن يُطلق — حتى تستطيع المتصفحات عرض تثبيته على الشاشة الرئيسية وفتحه في نافذة تشبه التطبيق.
أي الحقول مطلوبة؟
يحتاج البيان المفيد على الأقل إلى name (أو short_name) وstart_url ووضع عرض وأيقونتي 192x192 و512x512. يملأ هذا المولّد تلك افتراضياً؛ الحقول الأخرى اختيارية وتُحذف عند تركها فارغة.
ماذا يعني 'maskable' للأيقونات؟
للأيقونات القابلة للإخفاء حشوة آمنة تتيح للأنظمة قصّها إلى دوائر أو مربعات دائرية أو مربعات مستديرة دون قصّ شعارك. اضبط purpose على 'maskable' أو 'any maskable' للأيقونات المصمّمة بتلك المنطقة الآمنة.
كيف أثبّت البيان على موقعي؟
احفظ JSON كـ manifest.json، وارفعه إلى موقعك، ثم أضِف وسوم <link rel="manifest" href="/manifest.json"> وmeta الخاص بـ theme-color المولّدة إلى <head> كل صفحة.

المزيد من الأدوات