Desenvolvimento Web / Desenvolvimento Mobile

Veja como criar o seu primeiro Progressive Web Application e faça com que seu site se comporte como um aplicativo no smartphone

Sem precisar de um processo de deploy para Android ou iOS, com o PWA você consegue fazer com que sua página tenha o mesmo comportamento de app

Por Gustavo Web

Publicado por Gustavo Web
em 16/11/2018 às 09h24

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Salve salve moqueridos, atendendo mais um pedido do UpInside Play vamos abordar agora PWA que em tese é um tecnologia muito bacana e de fácil manutenção para que possamos incorporar nos nossos websites e fazer com que eles possam se comportar como aplicativos mobile e por sua vez ter acesso a recursos do dispositivo.

Nivelando Conhecimento

Se você ainda não sabe do que se trata, esse recurso basicamente tende a fazer o seguinte:

O aplicativo que você instalar nesse formato ele vai rodar sob um browser! Ou seja, um navegador comum... E aqui nos deparamos com 2 seguintes cenários.

O dispositivo: Todos os smartphones precisam disponibilizar as informações sobre o dispositivo para o browser. Com isso o browser passa a ter acesso a câmera, leitor de biometria, acelerômetro, bússola, geolocalização, dados de pagamento que podem estar configurados, nível de bateria, push notification...

O browser: Assim como o dispositivo tem que fornecer esses dados, os navegadores precisam de uma interface singular para que você possa acessar essas propriedades independente de plataforma, versão do sistema operacional ou até mesmo modelo. Quando os browsers estiverem aptos a trabalhar com essa tecnologia, através do javascript poderemos ter acesso aos dados de maneira muito fácil.

Não seria bacana mesmo você conseguir saber onde o seu visitante está (através da geolocalização) e mandar um alerta de uma promoção, avisar sobre um evento ou qualquer coisa que o seu sistema ou do seu cliente já forneça?

E se eu te falar que isso já é uma realidade? Hoje, os PWA's já possuem diversos recursos mas infelizmente ainda estão limitados a algumas versões de browsers, no android ele tem uma compatibilidade melhor e mesmo assim a configuração ainda é muito sensível...

Se você for procurar material de como colocar isso pra rodar, você vai encontrar aos montes! Mas cada um fala uma coisa, cada um coloca determinados itens como requisitos, para cada um você tem um problema que o outro não resolveu... E esse play eu trago para vocês de acordo com os meus estudos o que é necessário para você conseguir rodar a aplicação sem maiores problemas.

Requisitos

Há alguns requisitos que você deve cumprir para que seu app seja "válido". A princípio você não precisa alterar a sua estrutura atual do site para fazer ele funcionar... O que precisa ser feito é adicionar alguns arquivos a mais que será justamente responsável pela instalação, atualização e dados offline.

Manifest

O principal recurso é ter o arquivo manifest.json devidamente parametrizado na raiz do seu sistema. Esse arquivo contém o nome do aplicativo, a cor do browser, o modo de execução (em tela cheia por exemplo) e algumas outras informação. É um json bastante simples e você nem precisa criá-lo manualmente.

Para criar, você pode usar esse sistema aqui que automaticamente gera o arquivo para você e também pode fazer o upload da imagem e ele vai criar todas as miniaturas de acordo com as resoluções pré estabelecidas.

Depois disso você pode também querer testar se esse arquivo está válido e apto a ser aceito pelo dispositivo. Há uma ferramenta que você pode acessar para fazer o teste. Obrigatóriamente você deve ter sucesso nesse teste.

Imagens

Você deve informar um ícone do aplicativo! Há diversas resoluções que você pode setar para que não perca qualidade dependendo da resolução do dispositivo, densidade de pixels e etc... Mas se você informar uma única imagem sem setar as dimenções ela acaba ficando por padrão. No meu caso eu usei um icone de 512x512px com o logo da Up :)

Já a tela de splash é opcional você usar... Mas também dá um efeito bem legal na aplicação e você realmente começa a notar como funciona o PWA.

Dá uma olhada como ficou o splash do meu celular depois do projeto pronto.

Veja como criar o seu primeiro Progressive Web Application e faça com que seu site se comporte como um aplicativo no smartphone

Ambiente Seguro com Certificado SSL

Isso não é opcional :)

Para rodar o PWA você precisa obrigatóriamente estar dentro de um ambiente com https. No entanto que na aula eu faço o todo o desenvolvimento necessário em localhost mas na hora de testar no aplicativo, eu mando todos os arquivos para o meu servidor de hospedagem para que eu possa fazer o teste.

Um ponto a se lembrar aqui é de adicionar também um .htaccess para que possa sempre fazer o redirecionamento para o https e evitar problemas futuros.

Service Worker

Esse é o cara responsável por uma parte da mágica! Quando você faz a instalação do app no dispositivo, é disparado uma thread que pode ser capturado o evento de install e com isso já fazer o download para o cache das imagens, css, javascript e tudo o que for fixo ou com baixa quantidade de atualização.

É nesse ponto que você consegue fazer com que o conteúdo fique disponível de maneira offline. Uma vez no cache, quando não houver internet você pode usar esses arquivos para montar a navegação do usuário. E é claro que quando o acesso for reestabelecido você precisa solicitar a atualização do cache para ter o app sempre de acordo com o ambiente de produção.

Ele funciona como um requisito importante para o PWA e obrigatoriamente deve exisite... No site do Google você encontra trechos de código de como fazer o registro e quais as ações você deve capturar. No nosso caso, eu vou trabalhar com esses mesmo códigos, mas não vou implementar cada gatilho.

Veja que eles devem existir, mas não necessariamente devem ter ação! Isso fica para um assunto mais avançado.

Meta Tags

Temos meta tags específicas tanto para o Android quanto para o iOS! São bem simples de implementar e basicamente são apontadas para as imagens que criamos anteriormente de ícones e a tela de splash.

Testes

Depois de tudo devidamente parametrizado, obviamente que você precisa testar para saber se está tudo de acordo. Fazer testes diretamente no dispositivo, eu não encontrei nenhum material que auxiliasse no processo! Somente no navegador do desktop/notebook onde você tem a aba de desenvolvedores.

Você pode usar o Console para saber se algum caminho está errado ou algo do tipo. Será emitido um alerta no console que a gente já conhece da programação web que fazemos no nosso dia a dia...

Um pouco mais aprofundado sobre PWA é dentro da aba de desenvolvedores, você tem uma sessão de Applications e dentro dele uma parte que é destinada tanto ao Manifest quanto ao Service Worker.

Veja como criar o seu primeiro Progressive Web Application e faça com que seu site se comporte como um aplicativo no smartphone

Fora isso, você pode instalar um plugin no seu Google Chrome que ele vai de fato fazer uma analise bem aprofundada de todos os recursos para que o PWA funcione corretamente.

Ele vai analisar se dados offline são disponibilizados, a parte de performance (quanto tempo demora para ser renderizado os recursos), acessibilidade (se o seu design responsivo está dentro do esperado), boas práticas e até mesmo o SEO.

Se você quiser adicionar ele, faça uma pesquisa por LightHome for Google Chrome ou clique aqui :)

Feedback

Me conta aqui abaixo o que você achou desse conteúdo, se você reproduziu o exemplo e se teve sucesso :)

É uma tecnologia nova que eu acredito que ainda esteja em desenvolvimento mas que tem um futuro muito promissor.

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: