Progressive Web App (PWA) Roadshow
Rio de Janeiro, 08 de abril de 2017.
O Rio de Janeiro foi uma das paradas do PWA Roadshow, organizado pela Google, que também aconteceu em São Paulo no dia 05/04 e que dependendo do dia que você ler este post no México dia 12/04.
O evento teve como proposta mostrar diversos conteúdos que propõe uma melhor experiência na web e foi dividido em 3 partes: Talks, Codelabs e Sessão de perguntas.
Talks
Iniciando pontualmente as 9:30 com o Robert Nyman falando o que são PWAs, porque elas melhoram as experiência na web e como você pode começar a desenvolver. Mostrou também alguns números bem interessantes sobre quantos apps os usuários baixam em um mês, tempo perdido no processo até de fato utilizar o app instalado, trazendo alguns números que mostram o benefício e real utilização de uma Progressive Web app, além de exemplos e alguns cases.
Os usuários gastam mais tempo navegando em apps nativos (87% do tempo) do que em web apps (13% do tempo). Por outro lado, um usuário comum instala em média ZERO apps por mês, enquanto visita mais de 100 web apps no mesmo período. Web apps têm uma capacidade de alcance maior que os native apps, mas não conseguem “prender” o usuário.
Depois foi a vez do Pete LePage mostrar algumas estratégias e técnicas de como servir o conteúdo de uma PWA offline utilizando service workers, quais os ganhos, em que isso impacta na performance e como fazer de várias maneiras, utilizando ferramentas open-source.
Na sequência veio o Alberto Medina, mostrando o porque utilizar HTTPS, os impactos em segurança, desempenho, algumas funcionalidades que melhoram a experiência na web e em como você pode obter o certificado.
O Pete LePage e o Sam Dutton sobem ao palco, dessa vez para mostrar como você pode manter seu usuário engajado utilizando PWAs instaláveis e utilizando push notifications. Momento interessante da apresentação foi quando o Sam mostrou diferentes maneiras de como se obter permissões do usuário de forma não intrusiva, deixando o poder de escolha em suas mãos.
Na parte da tarde houveram talks sobre diversos conteúdos e ferramentas, além de discussões sobre boas práticas e performance. Aqui vai um breve resumo de cada um:
Como melhorar a experiência de compras na internet utilizando a Web Payments API com exemplos, aplicações e código de como fazer.
Apresentaram também o que são Accelerated Mobile Pages ou AMP e como você pode servir o seu conteúdo de uma maneira mais rápida e eficiente de acordo com sua necessidade.
Outra api que também apareceu foi a Credential Management API com uma proposta de autenticação de usuários com apenas um clique (ou tap), onde será possível escolher realizar uma autenticação com alguma conta já salva no aparelho
A ferramenta de análise Lighthouse foi apresentada como um todo, desde a extensão até a CLI. E em como você pode obter uma melhoria na sua aplicação seguindo as recomendações.
Codelabs
O Codelabs foi a parte prática do evento e durante 1hr e 30min todo mundo colocou a mão na massa. Seguindo o tutorial era possível criar uma progressive web app, disponibiliza-la offline utilizando service workers, enviar e testar push notifications, realizar uma análise com o Lighthouse e publicar sua aplicação no Firebase.
Sessão de perguntas
No final do evento, os participantes puderam realizar perguntas ou envia-la através do Twitter sobre qualquer tipo de conteúdo Google. Tiveram perguntas sobre outras APIS, estratégias, dúvidas técnicas, brincadeiras, memes, etc. Todo mundo interagiu e os palestrantes foram bastante abertos a tirar todas as dúvidas.
Caso você tenha o interesse em acompanhar mais sobre o que rolou no evento, aqui tem tudo que foi compartilhado no Twitter com a hashtag #PWARio.
Conclusão
Todas as talks foram bem rápidas e diretas ao conteúdo, abordando desde o porque até o como de uma maneira simples e fácil de entender. O Codelabs, por outro lado, foi um pouco diferente do que esperado por alguns participantes, que imaginaram que seria um live code. Porém o conteúdo foi disponibilizado através do Github e cada um fazia na sua máquina seguindo os passos que estavam no link que foi compartilhado.
Por ter chegado mais cedo, consegui ganhar uma camisa do evento, mas alguns participantes que chegaram mais próximo do início das palestras, não tiveram a mesma sorte pois o número era limitado e aparentemente tinham mais pessoas que camisas disponíveis.
A localização as vezes pode ser um ponto decisivo para se ir a um evento e esse aconteceu em um Hotel no bairro de Copacabana, com várias opções para refeição próximas, contando com uma vista excelente e bem tranquilo de se conseguir Uber ou táxi.
O único ponto que deixou a desejar foi a internet. Algumas pessoas tiveram problemas para se conectar na hora do Codelabs, justamente no momento que se fazia necessário uma melhor qualidade de conexão. Alguns participantes, eu incluso, acabaram recorrendo ao pacote de dados do celular, resolvendo parte dos problemas de conexão.
Para quem já estava estudando PWAs a absorção do material pode ter sido mais tranquila, talvez quem não viesse acompanhando ao receber essa quantidade de informação fica difícil de digerir tão rápido.
O evento foi importante principalmente para saber que a direção dos estudos está certa! Todo o material foi disponibilizado, faça bom proveito!
**Progressive Web Apps ** docs.google.com
Instant Loading and Offline docs.google.com
HTTPS docs.google.com
Engagement docs.google.com
Tooling docs.google.com
Wrap Up docs.google.com
Code Labs Code Labsdocs.google.com
Links
Alguns links que foram compartilhados durante o evento e que podem ajudar no aprendizado:
- https://events.withgoogle.com/pwa-roadshow-latin-america/
- https://www.w3.org/Payments/
- https://googlechrome.github.io/samples/paymentrequest/
- https://codelabs.developers.google.com/codelabs/your-first-pwapp/
- https://ampbyexample.com/
- https://www.ampproject.org/docs/reference/components/dynamic/amp-install-serviceworker
- https://github.com/ampproject/amp-publisher-sample/tree/master/amp-pwa
- https://www.ampproject.org/
- https://developers.google.com/web/updates/2016/04/credential-management-api
- https://developers.google.com/web/tools/lighthouse/
- https://codelabs.developers.google.com/?cat=Web
- https://codelabs.developers.google.com/codelabs/push-notifications/index.html
- https://developers.google.com/web/fundamentals/security/
Cheers! 🍺