كيف تبني تطبيق PWA بالذكاء الاصطناعي على Lovable — دليل شامل بالعربي
دليل عملي كامل لتحويل موقعك إلى تطبيق ويب تقدّمي (PWA) يُثبَّت على الجوال من المتصفح بدون متجر تطبيقات: الفرق بين PWA والتطبيق الأصلي، البرومبتات الجاهزة، أيقونة الشاشة الرئيسية، العمل بدون إنترنت، الاختبار على آيفون وأندرويد، والظهور في جوجل ومحركات الذكاء الاصطناعي في السعودية والخليج.
ما هو تطبيق PWA باختصار؟
تطبيق الويب التقدّمي (Progressive Web App أو PWA) هو موقع عادي يتصرّف كتطبيق جوال: يُضاف إلى الشاشة الرئيسية بأيقونة، ويفتح بملء الشاشة بدون شريط المتصفح، ويمكن أن يعمل بدون إنترنت إن فعّلت ذلك. لا يحتاج رفعًا إلى App Store أو Google Play، ولا رسوم مطوّر، ويُحدَّث فورًا عند نشر أي تعديل. لهذا هو الخيار الأسرع لأصحاب المتاجر والمشاريع الصغيرة في السعودية الذين يريدون «تطبيق جوال» بتكلفة موقع.
متى تختار PWA بدل تطبيق أصلي؟
اختر PWA إذا كان مشروعك: متجرًا إلكترونيًا، نظام حجوزات (عيادة، صالون، ملعب)، منيو مطعم، لوحة تحكم للموظفين، منصة دورات، أو تطبيقًا داخليًا لشركة. اختر تطبيقًا أصليًا إذا احتجت ميزات عميقة في الجهاز مثل البلوتوث، أو الظهور في متجر التطبيقات كقناة تسويق أساسية. ملاحظة واقعية: على آيفون تدعم Safari التثبيت من «مشاركة ← إضافة إلى الشاشة الرئيسية»، لكن بعض الميزات (مثل التنبيهات) لها قيود حسب إصدار iOS، فاختبر قبل أن تَعِد عملاءك بها.
١) ابنِ الموقع أولًا وتأكّد أنه ممتاز على الجوال
PWA لا يصلح موقعًا سيئًا. ابدأ في Lovable ببرومبت واضح، مثلًا: «ابنِ تطبيق حجوزات لصالون في الرياض باللغة العربية من اليمين لليسار، مصمم للجوال أولًا بعرض 375px، فيه: الخدمات والأسعار بالريال، اختيار الموعد، تسجيل برقم الجوال، وصفحة حجوزاتي». راجع المعاينة بمقاس الجوال: الأزرار كبيرة بما يكفي للإصبع، النصوص مقروءة، ولا يوجد تمرير أفقي.
٢) برومبت تفعيل التثبيت على الشاشة الرئيسية
اكتب في Lovable: «اجعل الموقع قابلًا للتثبيت على الجوال كتطبيق: أضف ملف manifest باسم التطبيق [اسم مشروعك] واسم قصير، ولون السمة، وعرض standalone، واتجاه RTL ولغة ar، وأيقونات بمقاسات 192 و512 وأيقونة Apple. لا أريد العمل بدون إنترنت الآن». هذا يكفي لمعظم المشاريع: أيقونة على الشاشة وفتح بملء الشاشة، بدون تعقيد ذاكرة التخزين المؤقت.
٣) العمل بدون إنترنت — فقط إذا احتجته فعلًا
إن أردت أن يفتح التطبيق بدون اتصال (مثل منيو، أذكار، دليل مرجعي) اطلب: «أضف دعم العمل بدون إنترنت عبر vite-plugin-pwa، مع جلب الصفحات من الشبكة أولًا، وعدم تفعيله في المعاينة أو داخل iframe، ورابط إيقاف ?sw=off». مهم: العمل بدون إنترنت يظهر فقط في النسخة المنشورة وليس في معاينة المحرّر، وإعداده بشكل خاطئ قد يجعل الزوار يرون نسخة قديمة، لذلك لا تفعّله إن لم يكن ضروريًا.
٤) صمّم أيقونة وشاشة بداية تليق بعلامتك
الأيقونة أول ما يراه المستخدم على جواله. استخدم شعارك على خلفية بلون واحد، بدون نصوص صغيرة، مع هامش آمن حول الشعار حتى لا يُقص في أندرويد. اجعل لون السمة (theme color) مطابقًا للون الهيدر ليبدو التطبيق متكاملًا عند الفتح.
٥) اختبر التثبيت على آيفون وأندرويد
انشر المشروع أولًا ثم افتح الرابط المنشور (وليس رابط المعاينة). على أندرويد في Chrome: القائمة ← «تثبيت التطبيق». على آيفون في Safari: زر المشاركة ← «إضافة إلى الشاشة الرئيسية». تحقق أن الاسم والأيقونة صحيحان، وأن التطبيق يفتح بدون شريط المتصفح، وأن تسجيل الدخول يبقى محفوظًا. إن غيّرت الأيقونة لاحقًا قد يحتاج من ثبّت التطبيق إلى حذفه وتثبيته من جديد.
٦) SEO لتطبيق PWA في السعودية
تطبيق PWA ما زال موقعًا تفهرسه جوجل، وهذه ميزته الكبرى على التطبيق الأصلي. استهدف عبارات يبحث بها السعوديون فعلًا مثل: «تصميم تطبيق جوال»، «عمل تطبيق لمتجري»، «تطبيق حجوزات»، «برمجة تطبيق بدون كود»، مع اسم المدينة (الرياض، جدة، الدمام) إن كانت خدمتك محلية. اكتب عنوانًا ووصفًا فريدين لكل صفحة، واستخدم H1 واحدًا يحتوي العبارة الرئيسية، واكتب الأسعار بالريال السعودي، وأضف صفحة «عن المشروع» وبيانات تواصل حقيقية. اطلب من Lovable: «أضف لكل صفحة عنوانًا ووصفًا ووسوم Open Graph ورابطًا أساسيًا canonical وخريطة موقع sitemap.xml».
٧) GEO: اجعل محركات الذكاء الاصطناعي تقتبس منك
GEO (تحسين الظهور في محركات الذكاء الاصطناعي مثل ChatGPT وGemini وPerplexity) يعتمد على محتوى واضح يسهل اقتباسه. ضع في أول كل صفحة إجابة مباشرة من جملتين، واستخدم عناوين على شكل أسئلة يسألها الناس، وأضف قسم أسئلة شائعة مع بيانات FAQ المنظمة، وبيانات Organization أو LocalBusiness، وملف llms.txt يلخّص موقعك. تجنّب الادعاءات غير الموثقة والأرقام المخترعة؛ محركات الذكاء الاصطناعي تفضّل المصادر الدقيقة والمحدّثة مع تاريخ آخر تحديث.
٨) الأداء والسرعة على شبكات الجوال
سرعة التحميل تؤثر على الترتيب وعلى قرار التثبيت. اطلب من Lovable: «حسّن الأداء: صور بصيغة WebP مع تحميل كسول، وخطوط محدودة، وعدم تحميل مكتبات ثقيلة في الصفحة الأولى». ثم اختبر الموقع المنشور في PageSpeed Insights بوضع الجوال وركّز على سرعة ظهور أكبر عنصر وثبات التخطيط.
أخطاء شائعة تجنّبها
تفعيل العمل بدون إنترنت بدون حاجة فيرى الزوار نسخة قديمة؛ اختبار التثبيت على رابط المعاينة بدل الرابط المنشور؛ أيقونة فيها نص صغير لا يُقرأ؛ نسيان dir=rtl فيظهر التطبيق معكوسًا؛ وعدم وجود صفحة تعمل عند انقطاع الإنترنت إن وعدت بذلك.
قائمة تحقّق قبل الإطلاق
الموقع ممتاز على الجوال بعرض 375px، ملف manifest بالاسم والأيقونات ولون السمة، التثبيت مجرّب على آيفون وأندرويد من الرابط المنشور، عنوان ووصف فريدان لكل صفحة، sitemap.xml مرسلة إلى Google Search Console، أسئلة شائعة ببيانات منظمة، أسعار بالريال وبيانات تواصل حقيقية، ونتيجة جيدة في PageSpeed على الجوال. عند اكتمالها، تطبيقك جاهز للإطلاق.
هل كان هذا المحتوى مفيداً؟
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.