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

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.