Hoje veremos uma combinação bastante interessante entre o Vue.js e o Quasar Framework para a construção de Progressive Web Apps (PWA). E diferente da maioria dos artigos que vemos na internet apenas explicando o que são os PWA’s, veremos na prática como fazer o nosso com facilidade e poucas configurações.

Falando um pouco sobre os PWAs…

Em resumo, é uma aplicação web que através de algumas tecnologias faz com que tenhamos uma experiência muito próxima de aplicativos móveis. Algumas das funcionalidades que os PWAs permitem são:

• Notificação Push

• Tela de abertura

• Funcionamento offline

• Acesso a câmera, galeria, localização e contatos

• Ícone na tela inicial do smartphone

• Publicação na Playstore (leia mais sobre neste artigo )

Se parece tanto com um aplicativo pra que eu preciso de um PWA?

O PWA ajuda com que haja maior engajamento e conversão do seu app ou produto, diferente de quando se tem um App nativo ou Híbrido que tenha que ser baixado na loja oficial e posteriormente instalado. No momento que o cliente acessa o seu site ele já tem de cara todas as funcionalidades, e caso seja de sua escolha, pode optar por salvar o app no ​​seu aparelho.

Outra vantagem do PWA é usar uma mesma aplicação tanto para celulares Android quanto iOS. Isso facilita no processo de atualização do aplicativo também.

Existem alguns exemplos bem interessantes de PWA, vejamos alguns:

• 2048game

• Twitter

• Pinterest

• Trivago

E o que é o Quasar Framework?

Press enter or click to view image in full size

http://quasar.dev/

O Quasar é um framework baseado em Vue.js , então se você já possui conhecimento em Vue.js você pode aumentar sua produtividade com os recursos que ele trás para o desenvolvedor.

Ele permite que o desenvolvedor utilize uma mesma estrutura de código e pode ser distribuído em diferentes plataformas. Seu CLI de última geração nos possibilita exportar a aplicação como:

• SPAs ( aplicativos de página única )

• SSR ( aplicativo renderizado no lado do servidor )

• PWAs ( Progressive Web App )

• BEX ( extensão de Broswer )

• Aplicativos móveis ( Android , iOS ) utilizando Cordova ou Capacitor

• Aplicativos de desktop multiplataforma ( Windows , Mac , Linux ) utilizando Electron

Caramba, muita coisa não?
Mas calma, que apesar de parecer complexo o Quasar cuida de grande parte da configuração para gente. Nosso foco Será Quase that Totalmente em Construir Nossa Aplicação Como se estivesse Trabalhando APENAS COM Vue.js .

Preparando o ambiente

Sem mais enrolação, vamos ao que interessa!

Primeiro de tudo precisamos ter o Node.js instalado com versão 12 ou superior. Sempre utilizar versões LTS do Node.js!

O download pode ser feito diretamente no site: https://nodejs.org/en/

Após a instalação, é possível verificar no seu terminal a versão instalada através do comando:

$ node -v

E o terminal deverá exibir algo como:

Press enter or click to view image in full size

versão do node.js instalada

Com o node.js instalado, agora precisamos instalar o Quasar CLI. Existem diversas maneiras de utilizar o Quasar, mas é através do seu CLI(Command Line Interface) que temos os melhores recursos.

Para realizar a instalação utilizamos um dos seguintes comandos:

$ yarn global add @quasar/cli # or $ npm install -g @quasar/cli

E para verificar a versão do Quasar CLI instalada utilizamos o comando:

$ quasar -v

O terminal deverá exibir algo como:

Agora nosso ambiente está pronto para iniciarmos o desenvolvimento do nosso projeto com Quasar.

Criando projeto

Para criar nosso projeto base iremos utilizar um comando do Quasar CLI no terminal:

$ quasar create projeto-quasar

[Atualização]

Agora o Quasar Framework está na versão 2.x que utiliza Vue.js 3, então para criar o projeto com Vue.js 2 precisamos utilizar o comando:

$ quasar create -b v1 projeto-quasar

Ao executar o comando o CLI do Quasar irá solicitar o preenchimento de algumas alternativas. Deixe mais ou menos assim:

Press enter or click to view image in full size

Ao finalizar a instalação, iremos acessar o diretório criado projeto-quasar e executar outro comando para criar a estrutura básica para o PWA:

$ quasar mode add pwa

E aguardamos a finalização da instalação.

Podemos agora visualizar no nosso editor que o projeto possui uma pasta src e outra src-pwa. Todas as configurações referentes a service-worker estarão na pasta src-pwa.

O próximo passo é executar nosso projeto no ambiente local. Mas antes disso temos que ter em mente que o pwa funciona apenas em ambiente https e o quasar facilita essa configuração no arquivo quasar.conf.js. Dentro das configurações do devServer iremos alterar o https para true:

devServer: {
  https: true,
  port: 8080,
  open: true // opens browser window automatically
},

Com a configuração realizada, podemos executar o comando no terminal que levanta o ambiente local junto com o modo que desejamos que o projeto seja executado, que no nosso caso é o PWA:

$ quasar dev -m pwa

Em nosso terminal será exibido que o Dev mod é o pwa:

Não se assuste se o navegador exibir essa tela com a mensagem “Sua conexão não é particular”. Isso é normal pois não estamos usando um certificado no nosso modo https. Basta clicar em avançado e clicar em “Ir para localhost (não seguro)“.

Se você tiver um celular em mãos, conectado no mesmo wi-fi, é possível até mesmo visualizar no seu celular acessando o ip da sua máquina no navegador, dessa forma: https://IP-DA-SUA-MAQUINA:8080 . Então será possível ter uma visão de fato de como estará o pwa no dispositivo móvel:

Configurações adicionais

Além das configurações dos arquivos de service-worker no diretório src-pwa, também temos a possibilidade de fazer algumas configurações do nosso pwa no arquivo quasar.conf.js no objeto pwa:

Press enter or click to view image in full size

Para mais informações sobre essas configurações acesse o link da documentação que cada ponto é bem explicado e você pode utilizar conforme sua necessidade: https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa

Irei alterar apenas o theme_color para que a parte onde fica a url do navegador tenha uma cor diferenciada 😉. Colocaremos a cor da kovi: #FF3759

Gerando build da aplicação

Após finalizar as alterações, iremos agora gerar o diretório final contendo a aplicação minificada e pronta para ir pra produção. Para isso mais uma vez iremos utilizar um comando do Quasar CLI dentro do diretório do nosso projeto. Como estamos querendo gerar um pwa, então o comando de build também terá o modo pwa:

$ quasar build -m pwa

Ao final da build o CLI mostra um resumo dos arquivos gerados(que por sinal, é super compacto):

Após esse processo, como é mostrado no CLI no parâmetro Output folder, foi gerada uma pasta dist contendo outra pasta pwa. A pasta pwa é onde ficam todos os arquivos necessários para implantar em produção.

Publicando PWA em um serviço gratuito de sites estáticos

Existem diversas ferramentas e serviços para publicar sites estáticos de forma gratuita na internet. Eu gosto bastante do serviço do surge.sh por ser simples e fácil.

Basta você instalar e fazer a configuração inicial para poder usar. Para isso consulte a documentação de instalação, tem até um vídeo para auxiliar =).

Como eu já tenho instalado e configurado na minha máquina, irei acessar o diretório dist/pwa dentro do nosso projeto e executar o simples comando:

$ surge

Ele irá solicitar algumas informações como:

• project: o local onde está a build para ser publicada. Se endereço estiver na pasta dist/pwa do seu projeto basta pressionar enter.
• domain: endereço onde nossa build será publicada. Como estamos utilizando o serviço gratuito, teremos que ter o final como surge.sh. Eu irei publicar no endereço kovipwa.surge.sh, e depois de escolhido ele não estará mais disponível para outros usuários.

Será feito o upload para os servidores do surge e ao final uma mensagem de sucesso será exibida com uma url para que possamos acessar nosso app:

Press enter or click to view image in full size

Agora o nosso pwa está disponível no endereço https://kovipwa.surge.sh . Não se esqueça que precisa estar em HTTPS para que o PWA funcione.

Acessando no dispositivo móvel, o app aparece com a parte de cima do navegador com a cor que configuramos no theme_color e além disso depois de alguns segundos pergunta se o usuário quer fazer a instalação do aplicativo no seu celular:

Press enter or click to view image in full size

Após adicionar o aplicativo na tela inicial, podemos acessar como se fosse um aplicativo Android / iOS e sua aparência também muda ficando sem a barra de navegação superior do navegador:

Bem legal né?

Conclusão

Utilizar o Quasar Framework para desenvolvimento multi-plataforma é sem dúvida a melhor escolha dentre os frameworks existentes. E se você já possui o conhecimento básico a intermediário de Vue.js ele só irá melhorar sua performance e produtividade.

Na Kovi já estamos utilizando o Quasar em diversos produtos e vem se adaptando muito bem à todas as nossas necessidades no front-end.