เลิกใช้แล้ว

Nuxt 3 ขับเคลื่อนโดย Vite ซึ่งปัจจุบันมีปลั๊กอิน PWA ที่น่าทึ่งในตัวเขาเอง พร้อมการรองรับ Nuxt

เนื่องจากมีวิธีแก้ปัญหาที่ดีกว่าเกิดขึ้น นั่นคือสาเหตุที่โมดูลนี้ไม่ได้รับการบำรุงรักษาอีกต่อไป

พิจารณาใช้ Vite PWA สำหรับ Nuxt 3 กับ Vite PWA Assets Generator แทน

ในฐานะผู้ดูแลหลัก (@kevinmarrec) ฉันอยากจะขอบคุณผู้มีส่วนร่วมและผู้ใช้ทุกคนที่ไว้วางใจในโครงการนี้

หน่วยที่ 3 กปภ

โซลูชัน 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 และเอกสารประกอบเวิร์กบ็อกซ์

คอมโพสิต

usePWAIcon (ขนาด, ตัวเลือก)

คุณสามารถใช้ usePWAIcon เพื่อรับ URL ไอคอนของ PWA ของคุณและใช้ในแอปของคุณได้

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