كيفية الإضافة إلى الشاشة الرئيسية في تطبيق ويب تقدمي

أضف إلى الشاشة الرئيسية

هنا يركز شعار تثبيت تطبيق الويب على تطبيق الويب ، مع ميزة الإضافة إلى الشاشة الرئيسية.

دعم المتصفح للإضافة إلى الشاشة الرئيسية

وظيفة الإضافة إلى الشاشة الرئيسية مدعومة حاليًا بواسطة:

  • كروم
  • iOS Safari

يمكنك الاطلاع على أحدث حالة لدعم المتصفح لهذه الميزة هنا.

على Android

على نظام Android ، يظهر شعار "إضافة إلى الشاشة الرئيسية" تلقائيًا إذا كنت تفي بمتطلبات معينة. هذا ما يجب أن يبدو عليه على Android:

إضافة إلى موجه الشاشة الرئيسية عند تشغيل التطبيق

مستعجل إطلاق

المتطلبات

قم بتضمين manifest.jsonملف بالخصائص التالية:

  • short name
  • name
  • 192x192حجم pngالرمز
  • start_url
  • تضمين عامل خدمة مسجل ومنشط
  • يتم تقديم موقع الويب عبر HTTPS (لا يزال بإمكانك تجربة ذلك مع المضيف المحلي بدون HTTPS)
  • يفي موقع الويب بإرشادات المشاركة المحددة بواسطة Chrome

بيان. json

{ "name": "FreeCodeCamp", "short_name": "FreeCodeCamp", "theme_color": "#00FF00", "background_color": "#00FF00", "display": "standalone", "Scope": "/", "start_url": "/", "icons": [ { "src": "assets/images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
  • nameهو اسم تطبيق الويب. (سيظهر في شاشة التشغيل)
  • short nameهو الاسم المختصر لتطبيق الويب. (سيظهر أسفل أيقونة قائمة الهاتف)
  • theme_color هو لون الجزء العلوي من المتصفح.
  • background_color هو لون خلفية شاشة التشغيل.
  • display هي الطريقة التي يجب أن يعرض بها تطبيق الويب بمجرد تشغيله على الهاتف.
  • start_url تحديد عنوان url الخاص ببداية الموقع.
  • icons هي مصفوفة تخزن جميع مواقع الصور وأحجامها وأنواعها.

على الأجهزة الأخرى

على الرغم من أن هذه الطريقة لا تعمل على نظامي iOS و Windows ، إلا أن هناك طريقة احتياطية.

iOS

على نظام iOS ، يجب إضافة زر "إضافة إلى الشاشة الرئيسية" يدويًا. أضف العلامات الوصفية التالية إلى قسم رأس HTML لدعم أيقونة تطبيق الويب لنظام iOS.

شبابيك

على هاتف windows ، أضف العلامات الوصفية التالية إلى قسم رأس HTML الخاص بك: