️ موقوف ️

يتم تشغيل Nuxt 3 بواسطة Vite الذي يمتلك اليوم مكونًا إضافيًا رائعًا لـ PWA بمفرده، مع دعم Nuxt.

ومع ظهور حل أفضل، فلن تتم صيانة هذه الوحدة بعد الآن.

فكر في استخدام Vite PWA لـ Nuxt 3 مع Vite PWA Assets Generator بدلاً من ذلك.

بصفتي المشرف الرئيسي (@kevinmarrec)، أود أن أشكر جميع المساهمين والمستخدمين الذين وثقوا في هذا المشروع.

نوكست 3 بوا

حل Zero config PWA لـ Nuxt 3

حالة الوحدة الرسمية

هذه الوحدة غير رسمية ولكنها تهدف إلى أن تصبح التكرار التالي لوحدة Nuxt PWA الرسمية.

يثبت

أضف تبعية @kevinmarrec/nuxt-pwa إلى مشروعك:

 # Using Yarn
yarn add -D @kevinmarrec/nuxt-pwa
# Using NPM
npm install -D @kevinmarrec/nuxt-pwa
# Using PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

قم بتحرير ملف nuxt.config.ts الخاص بك لإضافة وحدة PWA:

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ]
} )

إعدادات

نظرًا لأن هذه الوحدة تحاول أن تكون متوافقة مع Nuxt 2 PWA لسهولة الترحيل، فلا يزال بإمكانك استخدام وثائق https://pwa.nuxtjs.org لمعظم الميزات.

إذا كنت تريد أن يكون تطبيقك قابلاً للتثبيت أثناء التطوير ، فأنت بحاجة إلى ضبط خيار pwa.workbox.enabled على true في nuxt.config ، حيث إنه ممكن للإنتاج فقط بشكل افتراضي:

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      enabled : true
    }
  }
} )

إذا كنت بحاجة إلى عامل خدمة مخصص لصندوق العمل، فيمكنك تحديد المسار إلى العامل الخاص بك باستخدام خيار pwa.workbox.templatePath ، ويمكنك استخدام الأسماء المستعارة للمسار مثل ~ و @ .

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      templatePath : '~/path/to/your/worker.js'
    }
  }
} )

لتخصيصها، يمكنك التحقق من الإعداد الافتراضي لهذه الوحدة هنا، بالإضافة إلى Nuxt 2 الافتراضي ووثائق Workbox.

المواد المركبة

استخدمPWAIcon (الحجم والخيارات)

يمكنك استخدام usePWAIcon للحصول على عناوين url لأيقونات PWA الخاصة بك واستخدامها في تطبيقك.

 const icon = usePWAIcon ( 512 ) // /assets/icons/512x512.png
const icon = usePWAIcon ( 512 , { maskable : true } ) // /assets/icons/512x512.maskable.png