الملف
manifest.webmanifest
{ "name": "مذكرات سعيد", "short_name": "مذكرات", "lang": "ar", "dir": "rtl", "start_url": "/saeed-notes/", "scope": "/saeed-notes/", "display": "standalone", "background_color": "#12121f", "theme_color": "#6c4bff", "icons": [ { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ]}وتربطه من الـ HTML:
index.html
<link rel="manifest" href="/saeed-notes/manifest.webmanifest" /><meta name="theme-color" content="#6c4bff" /><link rel="apple-touch-icon" href="/saeed-notes/icons/apple-touch-icon.png" />| الحقل | بيعمل إيه |
|---|---|
name و short_name | الاسم في شاشة التسطيب، والقصير تحت الأيقونة |
start_url | بيفتح على فين لما تدوس الأيقونة |
scope | أي URL بره المسار ده بيفتح في المتصفح العادي |
display | standalone = شباك لوحده من غير شريط العنوان |
theme_color | لون شريط النظام فوق |
background_color | لون الـ splash screen وهو بيفتح |
الأيقونات و maskable
أندرويد بيقص الأيقونة دايرة أو مربع بحواف أو شكل نقطة مية، على حسب الموبايل. لو الأيقونة العادية فيها حواف شفافة، هتطلع صغيرة جوه دايرة بيضا.
المتصفح بيعرض “Install” إمتى؟
- index.html ← manifest: بيشاور على
- manifest ← المتصفح: يقرا الحقول
- المتصفح ← 📲 الـ home screen: Install ✓
في Chrome الشروط تقريبًا: HTTPS، و manifest فيه name و start_url و display وأيقونة 192 و 512، والمستخدم اتفاعل مع الصفحة شوية. الشروط دي بتتغير، فراجع web.dev. على iPhone مفيش زرار تلقائي: المستخدم بيعمل Share ← Add to Home Screen بإيده.
خلّصت الفصل لما
🧠 اختبر نفسك
١) الأيقونة طالعة صغيرة جوه دايرة بيضا على أندرويد. ليه؟
مفيش أيقونة maskable، فالنظام صغّر العادية وحط خلفية.
٢) لينك لصفحة بره الـ scope بيفتح فين؟
في المتصفح العادي، مش جوه شباك التطبيق.