PT | EN
Publicado dia 11 de setembro de 2018

PWA no SoftDrops

| Tempo de leitura 2 minutos Tempo de leitura 2 minutos
PWA no SoftDrops

No SoftDrops do dia 5 de setembro, o desenvolvedor Ronaldo Hoch falou aos colegas sobre Progressive Web Apps, as PWAs. Essa tecnologia emergente diz respeito a aplicativos que são carregados como páginas da web ou sites comuns, tendo como particularidades a possibilidade de trabalhar offline, notificações push e acesso ao hardware – características tradicionalmente disponíveis apenas para aplicativos móveis nativos.

Características

De acordo com Ronaldo, a implementação de uma PWA é fácil, visto que utiliza somente um script. Além disso, com ela “não temos mais o downasaur, ou seja, mesmo que as condições de rede sejam incertas, a página irá carregar e estar disponível para o usuário”. O desenvolvedor também salientou que qualquer framework de front-end irá funcionar nas Progressive Web Apps, desde que em um navegador moderno, o que garante toda a facilidade e velocidade de um desenvolvimento web.

“Um exemplo da diferença entre PWAs e aplicativos, por exemplo, é que ao abrir um site desenvolvido com essa tecnologia, você receberá uma notificação para que o adicione à tela inicial do seu celular. Se você aceitar, o download começará e serão baixados todos os recursos que o programador adicionou ao site e que são importantes para que ele rode corretamente. O aplicativo ficará junto aos outros, na lista de aplicativos, e funcionará também offline“, explica Ronaldo.

Instalação

Para instalar uma PWA, o desenvolvedor destacou a necessidade de um navegador moderno que suporte o web worker – no site Can I Use é possível acessar uma lista com todos eles. “Aí, quem faz a mágica são os services workes, scripts que rodam em threads diferentes do thread principal e, por isso, contribuem para que a aplicação não trave em algumas operações“, afirma Ronaldo.

Dentro do service worker, que por segurança roda somente em HTTPS e localhost, encontra-se o Manifest.json, um arquivo de configuração que fornece dados para o PWA, como ícones, cor de fundo, cor do navegador, entre outros, definindo como o site é exibido para o usuário. Para exemplificar, o desenvolvedor mostrou aos colegas um site que criou em PWA e explorou seu código fonte.

PWA no SoftDrops 4PWA no SoftDrops 3

Foto do autor

Micaela L. Rossetti

Estrategista Digital, especialista em Marketing Digital e Branding. É graduada em Jornalismo (UCS), Mestre em Comunicação Social (PUCRS) e tem MBA em Gestão de Projetos (PUCRS). Especialista em Growth Marketing, Search Engine Marketing, Inbound Marketing e Content Marketing.

Quer saber mais sobre
Design, Estratégia e Tecnologia?