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.

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.

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.

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.

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.

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.

Figura 6. Abrindo o menu do navegador

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

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.

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?

Curso

Sua primeira aplicaç�o