Artigos Vue.js Criando uma PWA com Vue.js

PWA é uma aplicação desenvolvida com tecnologias web (JavaScript, HTML, CSS), ou seja, é uma aplicação web que oferece ao usuário uma experiência de aplicação mobile independentemente da plataforma em que ele é usado. Quando acessado por um dispositivo móvel, ele pode aparecer para o usuário como um aplicativo mobile nativo.

Algumas vantagens a se destacar das PWA são:

  • Utilização de tecnologias web como JavaScript, HTML e CSS;
  • Utilização Offline;
  • Acesso a APIs nativas como câmera, GPS, microfone etc.;
  • Usabilidade muito parecida com aplicações mobile;
  • Uso de notificações push.

Criando uma PWA

Para criar um exemplo de PWA em Vue.js vamos utilizar o Quasar, que é um framework Vue.js. Para conhecê-lo melhor sugiro uma leitura no artigo de introdução ao Quasar.

Caso você ainda não tenha o Quasar instalado, vamos ver como é simples. Para instalá-lo execute o comando do Código 1 (utilizando o NPM) ou Código 2 (utilizando o Yarn).

npm install -g @quasar/cli
Código 1. Instalando Quasar usando NPM
yarn global add @quasar/cli
Código 2. Instalando Quasar usando Yarn

Depois de instalado, execute o comando do Código 3 para criar um projeto Quasar.

quasar create <nome-do-projeto>
Código 3. Criando um projeto Quasar

Agora entre na pasta do projeto e execute o comando do Código 4 para vermos o projeto rodando.

quasar dev -m pwa
Código 4. Iniciando a aplicação

Esse comando rodará nosso projeto e adicionará automaticamente as configurações necessárias de uma PWA.

Agora você deve ver o nosso projeto em uma aba do navegador (ele abre automaticamente), mas se isso não acontecer, abra uma nova aba e digite http://localhost:8080. A aparência da aplicação pode ser vista na Figura 1.

Aplicação sendo executada no navegador
Figura 1. Aplicação sendo executada no navegador

Pode parecer estranho a aparência ser de um projeto web normal, mas como foi falado no começo do artigo, a PWA é um projeto web, que quando acessado via mobile se “transforma” em uma PWA e traz experiências mais parecidas de um aplicativo mobile.

Para sabermos como o nosso projeto ficará em um dispositivo móvel, basta fazer o seguinte: na página do projeto aperte a tecla F12, que abrirá a ferramenta de desenvolvedor, como pode ser visto na Figura 2.

Ferramenta de desenvolvedor aberta no navegador
Figura 2. Ferramenta de desenvolvedor aberta no navegador

Depois clique no ícone que parece um celular, no canto superior esquerdo, ou então acione o atalho Ctrl + Shift + M. Com isso nosso projeto estará como se fosse em um dispositivo móvel como pode ser visto na Figura 3.

x
Figura 3. Aplicação aberta no navegador

Criando um formulário de cadastro

Agora que o nosso projeto foi criado, vamos criar uma tela simples de formulário utilizando os componentes do Quasar.

Abra o arquivo index.vue (src/pages/index.vue), apague o seu código e cole o Código 5.


  <template>
   <q-page class="q-pa-md">
     <q-card>
       <q-card-section>
         <div class="text-h6">Formulário de Cadastro</div>
       </q-card-section>
       <q-card-section>
         <q-form>
           <div class="row q-col-gutter-md">
             <div class="col-12 col-md-6 col-sm-12">
               <q-input outlined stack-label label="Nome Completo *" v-model="dados.nome_completo" />
             </div>
             <div class="col-12 col-md-6 col-sm-12">
               <q-input outlined stack-label label="E-mail *" v-model="dados.email" />
             </div>
             <div class="col-12 col-md-6 col-sm-12">
               <q-input outlined stack-label label="Telefone *" v-model="dados.telefone" />
             </div>
             <div class="col-12 col-md-6 col-sm-12">
               <q-select
                 outlined
                 stack-label
                 label="Sexo *"
                 :options="options"
                 v-model="dados.sexo"
               />
             </div>
           </div>
   
           <div class="q-mt-md">
             <q-btn
               label="Enviar"
               type="submit"
               color="primary"
               @click="enviar(dados)"
             />
             <q-btn
               label="Cancelar"
               type="reset"
               color="primary"
               flat
               class="q-ml-sm"
             />
           </div>
         </q-form>
       </q-card-section>
     </q-card>
   </q-page>
  </template>
   
  <script>
  import { defineComponent } from "vue";
   
  export default defineComponent({
   name: "PageIndex",
   data() {
     return {
       dados: {},
       options: ["Masculino", "Feminino", "Outros"],
     };
   },
   methods: {
     enviar(dados) {
       console.log(dados)
     },
   },
  });
  </script>
Código 5. Formulário utilizando os componentes do Quasar

Primeiro criamos nosso formulário com alguns campos básicos, como um input, um select e um botão de enviar que chama o método enviar. Na parte do script definimos o objeto do nosso formulário, as opções do select e o método enviar que será chamado quando o botão for clicado. Dentro desse método apenas mostramos os dados do formulário no console. Veja o formulário na Figura 4.

Formulário utilizando os componentes do Quasar
Figura 4. Formulário utilizando os componentes do Quasar

Pronto, a nossa tela está criada e já podemos simular e ver como ela fica em um dispositivo mobile. Nos próximos passos veremos como configurar a PWA e como fazer o deploy.

Configurando a PWA

Existem algumas configurações que podemos fazer para personalizar a PWA. Dentre as principais estão alterar o seu nome e o ícone.

Para isso abra o arquivo quasar.conf.js, vá até a parte da PWA -> manifest como mostra o Código 6.

manifest: {
  name: `Meu Primeiro PWA`,
  short_name: `Meu PWA`,
  description: `A Quasar Framework app`,
  display: 'standalone',
  orientation: 'portrait',
  background_color: '#ffffff',
  theme_color: '#027be3',
  icons: [
    {
       src: 'icons/icon-128x128.png',
       sizes: '128x128',
       type: 'image/png'
    },
    {
       src: 'icons/icon-192x192.png',
       sizes: '192x192',
       type: 'image/png'
    },
    {
       src: 'icons/icon-256x256.png',
       sizes: '256x256',
       type: 'image/png'
    },
    {
       src: 'icons/icon-384x384.png',
       sizes: '384x384',
       type: 'image/png'
    },
    {
       src: 'icons/icon-512x512.png',
       sizes: '512x512',
       type: 'image/png'
    }
  ]
}
Código 6. Parte do código do arquivo quasar.conf.js onde personalizamos o ícone e o nome do aplicativo

Em name temos o nome do App e short_name é o nome que aparecerá quando o usuário adicionar a PWA na tela inicial.

Em icons inserimos o diretório das imagens que aparecerão como ícone do App, localizadas na pasta public/icon. Para inserir os seus próprios ícones basta substituir as imagens dentro da pasta public/icon seguindo os mesmos nomes e resoluções das imagens substituídas, por exemplo a imagem icon-128x128.png deve ter 128 de largura por 128 de altura.

Existem alguns sites onlines que geram esses icons a partir de uma imagem, você pode utilizar o Simicart.

Podemos fazer algumas configurações adicionais em nosso projeto PWA no arquivo quasar.conf.js. Para saber mais sobre essas configurações, vale a pena conferir a documentação, que é bem explicativa e fácil de configurar.

Fazendo o deploy da PWA

Lembre-se que iniciamos o projeto com o comando quasar dev -m pwa. Com isso o Quasar já se encarregou de criar os arquivos de configuração necessários para o funcionamento da PWA. Note que tem uma pasta chamada src-pwa na raiz do projeto com alguns arquivos de configuração dentro.

Para criar o projeto para produção é só rodar o comando do Código 7 e o nosso projeto estará pronto para deploy.

quasar build -m pwa
Código 7. Preparando o projeto para deploy

Para publicar a PWA podemos utilizar qualquer servidor de hospedagem. No nosso caso usaremos um serviço gratuito de hospedagem para sites estáticos chamado Surge, que é bem simples e fácil. Rode o comando do Código 8 no seu terminal para instalá-lo.

npm install --global surge
Código 8. Instalando o Surge

Depois execute o comando do Código 9 para publicar o projeto.

surge
Código 9. Publicando o projeto

Ele deve pedir seu e-mail e senha para cadastro. Após inserir as informações, ele pedirá a pasta do projeto onde estão os arquivos para deploy. Coloque a pasta dist/pwa, como mostra a Figura 5.

Inserindo a pasta dist/pwa no terminal
Figura 5. Inserindo a pasta dist/pwa no terminal

Depois ele pede um domínio, no nosso caso digitamos meu-app.surge.sh, ou seja, o nome da sua aplicação mais .surge.sh. Como estamos usando o serviço gratuito, temos que ter o final como .surge.sh. Em seguida aperte enter e ele deve fazer o deploy.

Adicionando a PWA na tela inicial do celular

Acesse o seu aplicativo PWA pelo celular e depois clique nos três pontinhos no canto superior direito do navegador Chrome como mostra a Figura 6.

Abrindo o menu do navegador
Figura 6. Abrindo o menu do navegador

Depois clique em adicionar à tela inicial, conforme mostra a Figura 7.

Adicionando a PWA na tela inicial do celular
Figura 7. Adicionando a PWA na tela inicial do celular

Feito esses passos, já deve aparecer o ícone da sua PWA na tela inicial do seu celular e assim conseguimos acessá-lo como se fosse um aplicativo nativo, como mostra a Figura 8.

Formulário de cadastro
Figura 8. Formulário de cadastro

Conclusão

As PWA’s não vieram para substituir os aplicativos nativos, porém são uma ótima alternativa dependendo da aplicação que você precisa desenvolver. E se você possui algum conhecimento em Vue.js, desenvolver uma PWA com o Quasar é a melhor escolha entre as opções que existem.

Confira também

O que é Vue.js?

O que é Vue.js?

Curso
Sua primeira aplicação

Sua primeira aplicação

Curso
Apresentando o Node.js

Apresentando o Node.js

Vídeo