04 e 05
de outubro
São Paulo - Brasil
< Voltar ao blog

Progressive Web Apps: melhorando a experiência do usuário utilizando tecnologias Web

19 de setembro de 2016

Você já ouviu falar em Progressive Web Apps? As vantagens técnicas são justamente poder utilizar tecnologias Web para entregar para os usuários do seu produto uma experiência tão boa quanto a que ele tem em um aplicativo instalando via loja. Outras vantagens são com relação às melhores práticas de organização de código, markup, preocupação com performance, assim como técnicas de UX e design responsivo. Saiba mais conferindo esta entrevista que fizemos com o Juarez Filho, Google Developer Expert, que palestrará na #Webbr2016 sobre essa tecnologia:

1) O que são Progressive Web Apps?
Aplicações Web Progressivas ou PWAs, como são geralmente chamadas, trazem a combinação das novas tecnologias que podemos usar em sites e do que temos disponível em aplicativos nativos com o objetivo de tornar a experiência do usuário mais envolvente, segura e rápida. “Instant Loading”, “Add to Home Screen”, “Push Notifications”, “Service Workers” e “App Shell” são alguns dos termos que encontramos no desenvolvimento desse aplicativos. Na verdade, essa resposta é uma tradução adaptada do site https://developers.google.com/, mas eu costumo dizer que PWA é um conjunto de práticas para proporcionar aos seus usuários uma melhor experiência usando Tecnologias Web.
2) Quais são as principais vantagens para os usuários?
A principal vantagem para os usuários é ter uma experiência semelhante a de um aplicativo nativo desenvolvido usando tecnologias Web. Para deixar mais claro, confira os tópicos abaixo:
– O acesso ao conteúdo é instantâneo, basta navegar até a url desejada e usufruir da experiência, enquanto em aplicativos nativos, você precisa achar o app na loja, fazer o download, aceitar as permissões, instalar e só então acessar o conteúdo.
– Ver o aplicativo carregando de uma forma rápida e responsiva é o esperado pela maioria dos usuários e podemos prover isso de uma forma muito interessante utilizando Service Workers
– Com a possibilidade de incluir um ícone de um aplicativo web na tela inicial do dispositivo, os usuários não saberão a diferença entre aplicativo nativo ou web, com isso conseguiremos um melhor engajamento e uma utilização mais constante do que se estes usuários tivessem que acessar o navegador.
3) Quais são as principais vantagens técnicas?
As vantagens técnicas são justamente poder utilizar Tecnologias Web para entregar para os usuários do seu produto uma experiência tão boa quanto a que ele tem em um aplicativo instalando via loja.
Web App Manifest https://w3c.github.io/, Push API https://www.w3.org/TR/push-, Notification API https://notifications.spec. e Service Workers https://w3c.github.io/ são as especificações técnicas que utilizamos para conseguir entregar essa incrível experiência para nossos usuários, claro que ainda temos outros fatores relacionados à melhores práticas de organização de código, markup, preocupação com performance, assim como técnicas de UX e design responsivo.
4) Como que funciona a tecnologia Service Worker?
Não é uma tarefa fácil explicar como funciona o Service Worker de uma forma resumida, pois é possível fazer bastante coisa com ele, mas primeiro vamos a uma definição que eu curto bastante:
“Um Service Worker é um script que é executado pelo navegador em background (em segundo plano), separado da página web, abrindo inúmeras possibilidades para recursos que não precisam de uma página web ou interação do usuário.”
Utilizamos Service Workers para disponibilizar o funcionamento offline dos nossos aplicativos web, possibilitar o recebimento de notificações através do Push Notifications e também usar a funcionalidade de Background Sync. Cada uma dessas funcionalidades existe uma configuração, eu recomendo a leitura do post: Service Worker: A revolução da plataforma Web (https://braziljs.org/blog/) para se aprofundar no assunto.
5) Que dicas você daria para o desenvolvedor que está conhecendo o Progressive Web Apps e os materiais didáticos recomendados para o aprendizado dessa tecnologia?
Se você está pensando em migrar seus websites ou aplicativos web para PWAs eu recomendo este Codelab criado pela equipe do Google que explica passo a passo como fazer a migração para uma PWA https://codelabs.developers. Infelizmente ainda temos pouco conteúdo relacionado à PWAs em Português, mas estamos trabalhando para mudar essa realidade. Que tal me seguir no Twitter @juarezpaf e ficar por dentro das novidades?
Você ainda encontra muito conteúdo bacana no site https://developers.google.com/ que é uma área do site do Google para Desenvolvedores específica para PWAs.
Se você tiver qualquer dúvida fique à vontade para me enviar uma mensagem via Twitter (@juarezpaf) e não esqueça de me contar sobre suas aventura criando experiências incríveis com as PWAs.

Leia Também

Inscrições

Faça a sua inscrição e fique por dentro das inovações e tendências Web com os melhores palestrantes nacionais e internacionais!

A Web.br é o local perfeito para trocar experiências e ficar por dentro das novidades do mercado.

30 E 31 DE OUTUBRO

Nós podemos ter a Web que queremos!

segundo lote

Assine a
newsletter

 

Fique por dentro das novidades do evento!

Cadastre-se na nossa Newsletter e receba atualizações de agenda, novos palestrantes, informações sobre inscrições e muito mais!

Seja um
patrocinador:

A sua empresa deseja patrocinar ou apoiar a edição 2018 da conferência Web.br? Fale com a gente!

organização

Centro de Estudos sobre Tecnologias Web Acesse o site do NIC.br Acesse o site do CGI.br

Iniciativa convidada

Acesse o site do W3C
Imagem do rodapé