nuxt pwa module

️ DEPRECADO ️

Nuxt 3 é desenvolvido por Vite que hoje possui um incrível plugin PWA próprio, com suporte Nuxt.

Como surgiu uma solução melhor, é por isso que este módulo não será mais mantido.

Considere usar o Vite PWA para Nuxt 3 com o Vite PWA Assets Generator.

Como principal mantenedor (@kevinmarrec), quero agradecer a todos os contribuidores e usuários que confiaram neste projeto.

Novo 3 PWA

Solução PWA de configuração zero para Nuxt 3

Estado do módulo oficial

Este módulo não é oficial , mas pretende se tornar a próxima iteração do módulo oficial Nuxt PWA.

Configurar

Adicione a dependência @kevinmarrec/nuxt-pwa ao seu projeto:

 # 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 seu arquivo nuxt.config.ts para adicionar o módulo PWA:

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

Configuração

Como este módulo tenta ser compatível com Nuxt 2 PWA para fácil migração, você ainda pode usar a documentação https://pwa.nuxtjs.org para a maioria dos recursos.

Se você deseja que seu aplicativo seja instalável em desenvolvimento , você precisa definir a opção pwa.workbox.enabled como true em seu nuxt.config , pois ele só está habilitado para produção por padrão:

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

Se precisar de um trabalhador de serviço de caixa de trabalho personalizado, você pode especificar o caminho para seu trabalhador com a opção pwa.workbox.templatePath , você pode usar aliases de caminho como ~ e @ .

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

Para customizá-lo, você pode verificar o padrão deste módulo aqui, bem como o padrão do Nuxt 2 e a documentação do Workbox.

Combináveis

usePWAIcon (tamanho, opções)

Você pode usar usePWAIcon para obter URLs de ícones do seu PWA e usá-los em seu aplicativo.

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

Alternativamente, você pode se beneficiar dos tamanhos disponíveis com Typescript usando uma string em vez do parâmetro de tamanho number :

Desenvolvimento

Certifique-se de instalar as dependências:

pnpm install

Inicie o servidor de desenvolvimento em http://localhost:3000 :

pnpm dev

Exemplo

Crie e inicie o exemplo em http://localhost:3000 :

pnpm example:build
pnpm example:start

Licença

Feito com ❤️

Publicado sob a licença MIT.