nuxt pwa module

️ TIDAK DIGUNAKAN lagi ️

Nuxt 3 didukung oleh Vite yang saat ini memiliki plugin PWA yang luar biasa, dengan dukungan Nuxt.

Karena solusi yang lebih baik telah muncul, itulah sebabnya modul ini tidak dipertahankan lagi.

Pertimbangkan untuk menggunakan Vite PWA untuk Nuxt 3 dengan Vite PWA Assets Generator sebagai gantinya.

Sebagai pengelola utama (@kevinmarrec), saya ingin mengucapkan terima kasih kepada seluruh kontributor & pengguna yang mempercayai proyek ini.

Nomor 3 PWA

Solusi PWA tanpa konfigurasi untuk Nuxt 3

Modul status resmi

Modul ini tidak resmi tetapi bertujuan untuk menjadi iterasi berikutnya dari modul resmi Nuxt PWA.

Pengaturan

Tambahkan ketergantungan @kevinmarrec/nuxt-pwa ke proyek Anda:

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

Edit file nuxt.config.ts Anda untuk menambahkan modul PWA :

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

Konfigurasi

Karena modul ini mencoba mematuhi PWA Nuxt 2 untuk memudahkan migrasi, Anda masih dapat menggunakan dokumentasi https://pwa.nuxtjs.org untuk sebagian besar fitur.

Jika Anda ingin aplikasi Anda dapat diinstal dalam development , Anda perlu menyetel opsi pwa.workbox.enabled ke true di nuxt.config Anda, karena ini hanya diaktifkan untuk produksi secara default:

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

Jika Anda memerlukan pekerja layanan kotak kerja khusus, Anda dapat menentukan jalur ke pekerja Anda dengan opsi pwa.workbox.templatePath , Anda dapat menggunakan alias jalur seperti ~ dan @ .

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

Untuk menyesuaikannya, Anda dapat memeriksa default modul ini di sini, serta default Nuxt 2 dan Dokumentasi Kotak Kerja.

Komposable

usePWAIcon (ukuran, opsi)

Anda dapat menggunakan usePWAIcon untuk mendapatkan url ikon PWA Anda, dan menggunakannya di aplikasi Anda.

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

Alternatifnya, Anda bisa memanfaatkan ukuran yang tersedia dengan TypeScript menggunakan string alih-alih parameter ukuran number :

Perkembangan

Pastikan untuk menginstal dependensi:

pnpm install

Mulai server pengembangan di http://localhost:3000 :

pnpm dev

Contoh

Bangun & mulai contoh di http://localhost:3000 :

pnpm example:build
pnpm example:start

Lisensi

Dibuat dengan ❤️

Diterbitkan di bawah Lisensi MIT.