Vue Academy · درس

إعداد vite-plugin-pwa

إعداد الإضافة، وخيارات manifest، والأيقونات، ولقطات الشاشة، وأنماط العرض، والنطاق

إعداد vite-plugin-pwa درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هو PWA

يضيف Progressive Web App إمكانية التثبيت، ودعم العمل دون اتصال، وميزات شبيهة بالتطبيقات الأصلية إلى تطبيق الويب، وذلك عبر service worker وweb app manifest. وتؤتمت vite-plugin-pwa توصيل كليهما ضمن بنية Vue + Vite.

تثبيت الإضافة

ثبّت vite-plugin-pwa كتبعية للتطوير. وهي تستخدم Workbox في الخلفية لإنشاء service worker.

npm install -D vite-plugin-pwa

إضافة VitePWA إلى الإضافات

استورد VitePWA وأضفه إلى مصفوفة إضافات Vite. ومرّر الخيارات إلى استدعاء الدالة الوحيد لها.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [vue(), VitePWA({ /* options */ })]
});

registerType

يتحكم registerType في سلوك التحديث. يفعّل "autoUpdate" service workers الجديدة فورًا، بينما يتيح لك "prompt" مطالبة المستخدم قبل إعادة التحميل.

VitePWA({
  registerType: "autoUpdate"
});

خيارات manifest

يصبح الكائن manifest هو web app manifest. ومن حقوله الأساسية name وshort_name وtheme_color وicons.

VitePWA({
  manifest: {
    name: "My Vue App",
    short_name: "VueApp",
    theme_color: "#42b883"
  }
});

مصفوفة icons

وفّر أحجامًا متعددة للأيقونات حتى يختار نظام التشغيل الحجم المناسب للشاشة الرئيسية وشاشة البداية. وأدرج أيقونة maskable للأشكال المتكيفة.

manifest: {
  icons: [
    { src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
    { src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
    { src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
  ]
}

إعداد Workbox

يُعدِّل الخيار workbox إعداد service worker المُنشأ، مثل الملفات التي يجب تخزينها مسبقًا وأي قواعد للتخزين المؤقت أثناء التشغيل.

VitePWA({
  workbox: {
    globPatterns: ["**/*.{js,css,html,png,svg}"]
  }
});

injectRegister auto

يحقن injectRegister: "auto" تلقائيًا التعليمات البرمجية التي تسجّل service worker، لذلك لا تحتاج إلى كتابة منطق التسجيل يدويًا.

VitePWA({
  registerType: "autoUpdate",
  injectRegister: "auto"
});

استخدام وحدة التسجيل الافتراضية

للتحديثات القائمة على المطالبة، استورد الوحدة الافتراضية registerSW في ملف الدخول واربطها بعمليات الاستدعاء الراجعة الخاصة بها.

import { registerSW } from "virtual:pwa-register";

const updateSW = registerSW({
  onNeedRefresh() { /* show update toast */ },
  onOfflineReady() { /* show ready toast */ }
});

التمكين في بيئة التطوير

يعمل service worker في بيئة الإنتاج فقط افتراضيًا. فعّل devOptions لاختبار سلوك PWA أثناء التطوير.

VitePWA({
  devOptions: { enabled: true }
});

التحقق من التثبيت

بعد البناء والتقديم، افتح تبويب Application في Chrome DevTools. ينبغي أن ترى manifest وقد حُلّل، وservice worker نشطًا، وطلب تثبيت متاحًا في شريط العناوين.

تحقق سريع

ماذا يفعل injectRegister: "auto"؟

مراجعة

أضف VitePWA إلى مصفوفة إضافات Vite مع registerType (autoUpdate أو prompt)، وmanifest (name وshort_name وtheme_color ومصفوفة icons)، وخيارات workbox. استخدم injectRegister: "auto" لتسجيل service worker تلقائيًا، أو الوحدة virtual:pwa-register للتحديثات القائمة على المطالبة.

الأسئلة الشائعة

هل درس «إعداد vite-plugin-pwa» مجاني؟

نعم — نص درس «إعداد vite-plugin-pwa» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد vite-plugin-pwa»؟

إعداد الإضافة، وخيارات manifest، والأيقونات، ولقطات الشاشة، وأنماط العرض، والنطاق تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إعداد vite-plugin-pwa»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy