التصنيف: تطوير الويب (Web Development) - شروحات تقنية (Tutorials)

يا هلا بيك يا بشمهندس! زمان وأنت قاعد بتكتب كود تطبيق الويب بتاعك بـ (React)، أكيد جه في بالك في يوم من الأيام وقلك العميل أو المدير: "بقولك إيه، مش هعرف أنزل التطبيق ده من متجر التطبيقات (App Store أو Google Play)؟" أو تلاقي اليوزر بيكره يفتح المتصفح وكل شوية يدخل على الـ URL. وجع القلب ده بقى، والعقدة بتاعة إنك تعمل تطبيق موبايل بـ (Native Code) زي (Swift أو Kotlin) عشان بس تعمل تطبيق شغال، كلفك وقت وفلوس كتير صح؟

الحل السحري اللي هينقذك من الليلة دي كلها هو بناء تطبيقات الويب التقدمية (Progressive Web Apps - PWA). في المقال ده، هناخد رحلة خطوة بخطوة عشان نحول تطبيق (React) عادي شغال بـ (Vite) لتطبيق موبايل (Installable App) بكل المقاييس، وبأسرع أداء ممكن تتخيله. ربط حزام الأمان، ويلا بينا نبسط المعلومة!

يعني ايه PWA وليه لازم تستخدم Vite؟

زمان، عشان تعمل تطبيق موبايل، كنت مضطر تبني (Native App) لكل منصة. بعدين ظهرت حلول زي (React Native) و (Flutter). بس فيه حل تالت أذكى وأرخص بكتير وهو الـ (PWA). دي باختصار تقنية بتخلي موقع الويب بتاعك يتصرف كأنه تطبيق موبايل حقيقي؛ بيشتغل من غير نت (Offline)، بيتبعت عليه إشعارات (Push Notifications)، وبيتعمله تثبيت على شاشة الموبايل الرئيسية (Home Screen) من غير ما تعدي على المتاجر وتدفع رسوم.

ليه اخترنا (Vite) بالتحديد؟ لأن (Vite) مبني على أداة البناء الخارقة (Rollup) وسريع جداً في الـ (Bundling) ومناسب جداً للـ (Modern Web Development). ومع الإضافات (Plugins) المتوفرة للـ (PWA)، الموضوع بقى بياخد دقايق معدودة بدل ساعات من الإعدادات المعقدة اللي كانت موجودة زمان مع (Webpack).

الخطوة الأولى: تجهيز مشروع React مع Vite

أول حاجة هنعملها هي إننا نفتح التيرمينال (Terminal) ونعمل مشروع جديد بـ (Vite) ونختار (React). اكتب الكود ده:

npm create vite@latest my-pwa-app -- --template react
cd my-pwa-app
npm install

بعد ما المشروع ينزل، محتاجين نثبت الإضافة السحرية اللي هتظبط لنا الـ (Service Workers) والـ (Manifest) أوتوماتيك من غير وجع دماغ. الإضافة دي اسمها (Vite PWA Plugin). هنثبتها كـ (Dev Dependency) بالأمر ده:

npm i vite-plugin-pwa -D

الخطوة الثانية: إعداد ملف vite.config.js والـ Manifest

عشان نخلي المتصفح يفهم إن التطبيق ده يقدر يتحول لـ (PWA)، لازم نظبط ملف التكوين (Configuration File). الـ (Manifest) هو عبارة عن ملف JSON بيوصف تطبيقك: اسمه، أيقوناته، ألوانه، وطريقة فتحه. افتح ملف vite.config.js وعدله بالشكل ده:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: 'تطبيقي التقني الخارق',
        short_name: 'تطبيقي',
        description: 'تطبيق PWA مصمم باحترافية باستخدام Vite و React',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

الاضافة دي عظيمة جداً لأنها بتعمل (Generate) للـ (Manifest) والـ (Service Worker) أوتوماتيك وقت البناء (Build Time).

الخطوة الثالثة: فهم ودور الـ Service Workers في الـ Offline Mode

قلب الـ (PWA) النابض هو الـ (Service Worker). ده عبارة عن ملف (JavaScript) بيشتغل في الخلفية (Background) بعيد عن صفحة الويب بتاعتك. هو المسؤول عن تخزين الملفات مؤقتاً (Caching) في ذاكرة المتصفح، وعشان كده لما اليوزر يفقد الإنترنت (Offline)، الـ (Service Worker) بيتدخل ويعرض له البيانات من الـ (Cache) كأن النت شغال عادي جداً!

مع إعدادات الـ registerType: 'autoUpdate' اللي كتبناها في الخطوة اللي فاتت، أي تحديث هتعمله على الكود وتعمله (Deploy)، الـ (Service Worker) هياخد باله وهيثمّن التحديث ده أوتوماتيك لليوزر من غير ما يحتاج يعمل (Hard Refresh).

الخطوة الرابعة: اختبار التطبيق وبنائه (Production Build)

عشان نتاكد إن الشغل تمام، محتاجين نعمل (Build) للمشروع ونشغله محلياً. اكتب الأوامر دي في التيرمينال:

npm run build
npm run preview

افتح المتصفح على اللينك اللي هيطلعلك، وافتح الـ (DevTools) ومن تبويب (Application) ادخل على (Manifest) و (Service Workers). هتلاقي المتصفح بيأكدلك إن التطبيق جاهز للتثبيت (Installable) وأن الـ (Service Worker) شغال وشايف شغله تمام.

خاتمة ونصيحة من أخ

بناء تطبيقات اليمين واليسار مبقاش رفاهية، واليوزر بقى بيدعو للسرعة وسهولة الوصول. تقنية الـ (PWA) مع قوة وسرعة (Vite و React) بتديك ميزة تنافسية رهيبة، بتوفر عليك وقت وتكلفة تطوير تطبيقات الموبايل التقليدية في بداية مشاريعك. نصيحتي ليك يا بشمهندس: متكتفش نفسك بالمعلومات النظرية، افتح اللابتوب حالا، طبق الخطوات دي، وجرب ترفع مشروعك على (Vercel) أو (Netlify) واختبره على موبايلك الحقيقي، وساعتها هتحس بمتعة الإنجاز الحقيقي. بالتوفيق، واستانونا في مقالات تقنية تانية دسمة!