PWA, a web virando app

O objetivo é primeiramente falar sobre Apps e o que tem acontecido com eles nos últimos anos, depois vamos focar no que são Progressive Web Apps, quais são as motivações por trás desse conjunto de técnicas, suas vantagens, desvantagens e por fim, vamos pensar um pouco sobre o futuro da Web.

Transcript

1. PWA, a web virando app Jullia Saad
2. Jullia Saad Desenvolvedora Front-end @julliasaad
4. 87% do tempo em apps
5. zero é o nº médio de apps que um usuário instala por mês
6. WEB X APP
7. Progressive Web Apps novo nível de cuidado com a qualidade da experiência do usuário
8. Um PWA deve ser
9. Progressivo para qualquer usuário, em qualquer navegador
10. Responsivo feito para qualquer dispositivo: desktop, tablet e mobile
11. Conexão funciona mesmo se o usuário estiver offline
12. App-like o usuário se sente em um app nativo
13. Atualizado o browser simplesmente irá detectar e atualizar automaticamente, caso necessário
14. Seguro somente com HTTPS
15. Engajável através de Push Notifications
16. Instalável é possível adicionar um ícone na tela principal do smartphone com apenas um clique
17. Quero aprender
18. Construindo um PWA O que preciso para construir?
19. App Shell HTML + CSS + JavaScript mínimos para gerar a UI
20. HTML + CSS + JS
21. Service Worker
22. Push Notifications
23. Ciclo do Service Worker
24. Conexão segura entre sites e usuários HTTPS
25. Web App Manifest JSON que permite controlar como o aplicativo web ou site é exibido
26. <link rel="manifest" href="/manifest.json"> { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
27. Cases
28. Twitter Lite PWA 65% de aumento de páginas por sessão 75% de aumento de Tweets enviados 20% de diminuição da taxa de rejeição
37. Mais cases https://developers.google.com/web/showcase/
38. Para quem quer aprender
39. Google | Progressive Web Apps Progressive Web Apps Summit 2016 Palestra do Sérgio Lopes — Front In Sampa 2015 Palestra do Jake Archibald — BrazilJS 2016
40. Referências http://www.smartinsights.com/mobile-marketing/mobile-marketing-an alytics/mobile-marketing-statistics/ https://wearesocial.com/special-reports/digital-in-2017-global-overview https://medium.com/tableless/introdu%C3%A7%C3%A3o-aos-progressive -web-apps-ad47ba24cddb https://developers.google.com/web/progressive-web-apps/ https://github.com/hemanth/awesome-pwa https://developers.googlecom/web/showcase/2017/twitter
41. Até mais e obrigada pelos pelos peixes!