كيفية تحويل موقعك إلى تطبيق ويب متقدم (PWA) باستخدام Web App Manifest

مرحبًا بكم في مدونة التقني للمعلوميات، في هذا المقال الشيق، سنأخذك في رحلة تقنية مميزة، نضيف خلالها لمسة من السحر على موقعك، ونجعل زوارك يشعرون وكأنهم يستخدمون تطبيقًا حقيقيًا على هواتفهم!

نعم، سنتحدث عن تحويل موقعك إلى تطبيق ويب متقدم (Progressive Web App - PWA) باستخدام ملف صغير ولكنه قوي يُدعى Web App Manifest. وسنُسهّل المهمة أكثر من خلال أداة توليد الكود الخاصة بنا التي تساعدك في إنشاء هذا الملف بسهولة دون الحاجة لرفع ملفات أو تعقيدات.

ما هو Web App Manifest؟

هو ببساطة ملف بصيغة JSON يحتوي على معلومات وبيانات حول تطبيق الويب مثل:

• اسم التطبيق
• أيقونات التطبيق
• الألوان
• الشاشة الرئيسية
• نمط العرض
• والمزيد...

بفضل هذا الملف، يستطيع المتصفح عرض موقعك على شكل تطبيق قابل للتثبيت على الشاشة الرئيسية للمستخدم، مما يمنحه تجربة مشابهة جدًا لتطبيقات Android وiOS.

مميزات تحويل موقعك إلى PWA

تطبيقات الويب التقدمية (PWA) تمثل الجيل الجديد من المواقع الذكية، حيث تجمع بين أفضل ميزات المواقع والتطبيقات الأصلية. بفضل تقنيات حديثة مثل Service Workers وWeb App Manifest، توفر PWA تجربة سلسة، سريعة، وقابلة للتثبيت على الأجهزة كما لو كانت تطبيقًا حقيقيًا، دون الحاجة إلى متاجر التطبيقات التقليدية.

• إمكانية التثبيت على الشاشة الرئيسية
• تجربة استخدام تشبه التطبيقات الأصلية
• أداء أسرع وواجهة محسّنة
• تخصيص الألوان والأيقونات حسب علامتك التجارية
• يعمل في وضع عدم الاتصال (عند إضافة Service Worker)

خطوات إضافة Web App Manifest إلى موقعك

1. توجة إلى لوحة التحكم في blogger
2. الذهاب إلى قسم المظهر
3. بجانب تخصيص اختر تعديل html
4. ابحث عن الوسم <body/>
5. أعلاه مباشرة الصق الكود التالي
6. استخدم مولد كود Manifest

JavaScript Code

<!-- زر "ثبت التطبيق" بأيقونة Android، يظهر مرة واحدة -->
<style>
  #installBtn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff5722;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9999;
    transition: 0.3s ease;
  }

  #installBtn:hover {
    background-color: #e64a19;
  }

  #installBtn svg {
    width: 22px;
    height: 22px;
  }
</style>

<button id="installBtn" style="display:none;">
  <!-- أيقونة Android -->
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.61 15.15C16.15 15.15 15.77 14.78 15.77 14.32S16.15 13.5 16.61 13.5H16.61C17.07 13.5 17.45 13.86 17.45 14.32C17.45 14.78 17.07 15.15 16.61 15.15M7.41 15.15C6.95 15.15 6.57 14.78 6.57 14.32C6.57 13.86 6.95 13.5 7.41 13.5H7.41C7.87 13.5 8.24 13.86 8.24 14.32C8.24 14.78 7.87 15.15 7.41 15.15M16.91 10.14L18.58 7.26C18.67 7.09 18.61 6.88 18.45 6.79C18.28 6.69 18.07 6.75 18 6.92L16.29 9.83C14.95 9.22 13.5 8.9 12 8.91C10.47 8.91 9 9.24 7.73 9.82L6.04 6.91C5.95 6.74 5.74 6.68 5.57 6.78C5.4 6.87 5.35 7.08 5.44 7.25L7.1 10.13C4.25 11.69 2.29 14.58 2 18H22C21.72 14.59 19.77 11.7 16.91 10.14H16.91Z" fill="#FFFFFF"/>
</svg>
  ثبت التطبيق
</button>

<script>
  function setCookie(name, value, days) {
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/';
  }

  function getCookie(name) {
    return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1];
  }

  let deferredPrompt;
  const installBtn = document.getElementById('installBtn');

  if (!getCookie('installPromptShown')) {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      deferredPrompt = e;
      installBtn.style.display = 'flex';
    });

    installBtn.addEventListener('click', () => {
      if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('تم التثبيت');
          } else {
            console.log('رفض التثبيت');
          }
          deferredPrompt = null;
          installBtn.style.display = 'none';
        });
      }
      setCookie('installPromptShown', 'yes', 30); // مرة كل 30 يوم
    });
  }
</script>
  

مولد كود Manifest

باستخدام مولد كود Manifest التالي، يمكنك بسهولة إنشاء كود خاص لمدونتك.

1. قم بتعديل المدخلات حسب موقعك.
2. ارفع ايقونات التطبيق
3. اختر ألوان التطبيق الرئيسية
4. اضغط زر إنشاء
5. انسخ الكود الناتج
6. الصقه أسفل وسم <head> مباشرة
7. لا تنسى الضغط على زر حفظ القالب

اسم التطبيق (name) الاسم القصير (short_name) رابط البداية (start_url) لون الخلفية (background_color) لون الثيم (theme_color) رابط أيقونة 192x192 (icon 1 src) رابط أيقونة 512x512 (icon 2 src)

خاتمة

تحويل موقعك إلى تطبيق ويب متقدم هو خطوة ذكية نحو تقديم تجربة احترافية لزوارك، دون الحاجة لبناء تطبيق فعلي. ومع ملف Web App Manifest البسيط، يمكنك أن تترك انطباعًا رائعًا واحترافيًا.

هل جربت إضافة PWA إلى موقعك من قبل؟ شاركنا تجربتك في التعليقات ولا تنس مشاركة المقال مع من يهتم بتطوير المواقع!