بيان تطبيق الويب
اكتب manifest.json متضمنًا name وicons وstart_url وdisplay وtheme_color لكي تعرض المتصفحات مطالبة الإضافة إلى الشاشة الرئيسية
بيان تطبيق الويب درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو PWA؟
تطبيق الويب التقدّمي هو موقع إلكتروني يتمتع بقدرات التطبيقات الأصلية: يمكن تثبيته على الشاشة الرئيسية، ويعمل دون اتصال، ويمكنه استقبال الإشعارات الفورية. وتتكون أجزاؤه الأساسية الثلاثة من Web App Manifest وService Worker وHTTPS.
ملف Manifest
ملف manifest.json (أو .webmanifest) هو ملف JSON يصف البيانات الوصفية لتطبيقكم. تقرؤه المتصفحات لتمكين خيار «الإضافة إلى الشاشة الرئيسية» وتشغيل التطبيق كما لو كان تطبيقًا أصليًا.
Manifest أساسي
يتضمن ملف Manifest الأدنى name وicons وstart_url ونمط display.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}ربط ملف Manifest
اربطوه من HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">أنماط display
يتحكم "display" في عناصر نافذة التطبيق: "standalone" (من دون واجهة المتصفح، وبمظهر يشبه التطبيق)، و"fullscreen" (وضع غامر يخفي شريط الحالة)، و"minimal-ui" (بعض عناصر تحكم المتصفح)، و"browser" (علامة تبويب عادية).
الأيقونات — أحجام متعددة
وفّروا أيقونات بأحجام متعددة. يحتاج Android الحديث إلى حجمي 192 و512، بينما تحتاج Apple إلى أحجام إضافية. استخدموا "purpose": "maskable" للأيقونات المتكيفة في Android.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]الوسوم الخاصة بـ Apple
لا يدعم iOS ملف Manifest دعمًا كاملًا. أضيفوا وسوم meta الخاصة بـ Apple لميزة الإضافة إلى الشاشة الرئيسية في iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<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="Notes">مطالبة التثبيت
تُطلق المتصفحات حدث beforeinstallprompt عند استيفاء الشروط (Manifest وService Worker وHTTPS وتفاعل المستخدم). يمكنكم تأجيله وتشغيله من واجهة المستخدم الخاصة بكم.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}الاختصارات (App Shortcuts)
يمكن لملف Manifest تعريف اختصارات تظهر عند الضغط المطوّل على أيقونة التطبيق المثبّت.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]الفئات ولقطات الشاشة
أضيفوا categories وscreenshots للحصول على واجهة تثبيت أكثر ثراءً في Chrome على Android وWindows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]اختبار ملف Manifest
افتحوا DevTools ← Application ← Manifest. يعرض Chrome حقول Manifest التي تم تحليلها، ومعاينات الأيقونات، والتحذيرات (مثل فقدان الأيقونات أو انخفاض التباين).
تجعل أُطر العمل ذلك سهلًا
Next.js: ضعوا manifest.webmanifest في public/. Nuxt: ثبّتوا الوحدة @vite-pwa/nuxt. Vite: ينشئ vite-plugin-pwa ملف Manifest وService Worker تلقائيًا.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};تحقق سريع
ما قيمة display في Web App Manifest التي تجعل PWA المثبّت يفتح من دون أي واجهة للمتصفح، مثل التطبيق الأصلي؟
مراجعة: Web App Manifest
ملف JSON يصف البيانات الوصفية لـ PWA. أدرجوا name وshort_name وstart_url وdisplay وtheme_color وicons (بأحجام متعددة مع maskable). اربطوه في HTML باستخدام rel=manifest. يحتاج iOS إلى وسوم meta خاصة بـ Apple. استخدموا حدث beforeinstallprompt لإنشاء واجهة تثبيت مخصصة. أضيفوا shortcuts وscreenshots لتثبيت أكثر ثراءً. تؤتمت أُطر العمل (Vite PWA وNext وNuxt PWA) عملية الإنشاء.
الأسئلة الشائعة
هل درس «بيان تطبيق الويب» مجاني؟
نعم — نص درس «بيان تطبيق الويب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «بيان تطبيق الويب»؟
اكتب manifest.json متضمنًا name وicons وstart_url وdisplay وtheme_color لكي تعرض المتصفحات مطالبة الإضافة إلى الشاشة الرئيسية تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «بيان تطبيق الويب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بيان تطبيق الويب
- تسجيل Service Worker ودورة حياته
- استراتيجيات التخزين المؤقت دون اتصال: CacheFirst وNetworkFirst
- الإشعارات الفورية