️ DESPRECADO ️

Nuxt 3 funciona con Vite, que hoy tiene un increíble complemento PWA propio, con soporte de Nuxt.

Como ha surgido una mejor solución, este módulo ya no se mantendrá.

Considere usar Vite PWA para Nuxt 3 con Vite PWA Assets Generator en su lugar.

Como mantenedor principal (@kevinmarrec), quiero agradecer a todos los contribuyentes y usuarios que confiaron en este proyecto.

Nuxt 3 PWA

Solución PWA de configuración cero para Nuxt 3

imagen

Estado del módulo oficial

Este módulo no es oficial pero pretende convertirse en la próxima versión del módulo oficial de Nuxt PWA.

Configuración

Agregue la dependencia @kevinmarrec/nuxt-pwa a su proyecto:

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

Edite su archivo nuxt.config.ts para agregar el módulo PWA:

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

Configuración

Como este módulo intenta ser compatible con Nuxt 2 PWA para facilitar la migración, aún puede usar la documentación de https://pwa.nuxtjs.org para la mayoría de las funciones.

Si desea que su aplicación se pueda instalar en desarrollo , debe configurar la opción pwa.workbox.enabled en true en su nuxt.config , ya que solo está habilitada para producción de forma predeterminada:

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

Si necesita un trabajador de servicio de caja de trabajo personalizado, puede especificar la ruta a su trabajador con la opción pwa.workbox.templatePath , puede usar alias de ruta como ~ y @ .

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

Para personalizarlo, puede consultar el valor predeterminado de este módulo aquí, así como el valor predeterminado de Nuxt 2 y la documentación de Workbox.

Componibles

usePWAIcon (tamaño, opciones)

Puede usar usePWAIcon para obtener las URL de los íconos de su PWA y usarlo en su aplicación.

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