Progressive Web Apps (PWAs) são aplicações da web que utilizam recursos modernos dos navegadores para fornecer uma experiência semelhante à de aplicativos nativos, como trabalhar offline, notificações push e adicionar a tela inicial. O Ionic Framework pode ser usado para criar PWAs com um "feeling" de aplicativo móvel na web. Service workers permitem recursos como trabalhar offline e notificações push em PWAs.

2. Progressive Web Apps

3. https://goo.gl/CppxC1

4. Quem sou?
• Microsoft MVP desde 2013
• Desenvolvedor Web desde 2005
• Atuação em projetos nacionais e internacionais
• Atuação em projetos pequenos, médios e grandes
• Consultor independente desde 2012
• Fundador do balta.io
http://andrebaltieri.net/
contato@andrebaltieri.net

5. http://balta.io/
http://bit.ly/asp-net-cast
http://bit.ly/software-em-contexto
http://mvp.microsoft.com

6. Agenda
• O que são as PWA?
• Ionic Framework
• Otimizando o App Progressivamente

7. Progressive Web Apps
O que são? Como nascem? O que comem?

8. • Não é um Framework ou uma Tool
• Uma aplicação Web
• Utilizando Recursos mais modernos do Browser
• Trabalhar Offline
• Adicionar ao Desktop
• Vibrar
• Push Notification
• Geolocalização
• Camera
• Experiência mais “nativa”
• Aplicação melhora progressivamente
PWA

9. REFLEXÃO
Por que mantivemos a Web assim tanto tempo?

10. • Trabalhar Offline
• Possível há um bom tempo, com uso do Application Cache do HTML 5
• Adicionar ao Desktop
• Possível há um bom tempo, mesmo antes do Manifest.json
• Vibrar
• Possível manualmente, basta segurar seu telefone ou laptop e sacudir
• Push Notification
• Também não é tão novo
• Geolocalização
• Possível há um bom tempo com HTMl 5
• Camera
• Possível há um bom tempo com HTML 5
Futuro ou Presente?

11. Já usamos isto antes…
• Alguns recursos até já utilizamos

13. PWA
União dos poderes…

14. • É tudo Web (Dev e Deploy são fáceis)
• SEO e Indexação
• Linkável
• Atualização tranquila
• Funciona no Mobile/Desktop
• Recursos citados anteriormente (Push, Offline, etc)
Quais as vantagens

15. • Geolocalização
• Câmera
• Microfone
• Vibração
• Orientação de tela
• Acesso ao acelerômetro e búlsola
• Bateria
• Rede
Recursos (Cada vez chegando mais)

16. Progressive Web Apps
O lado ruim

17. • Você não está nas lojas
• Suporte dos Navegadores
• Nem todos recursos do device disponíveis
• iOS limitado
• Comunicação com weareables e outros devices externos
Pontos negativos

18. Progressive Web Apps
O futuro

19. • Cada dia devices com maiores capacidades
• Cada dia browser (Leia Chrome) com novas capacidades
• Aguardando a Apple melhorar o suporte...
O futuro

20. • Não tem suporte a gestos
• Não tem feeling nativo
• É apenas uma adaptação
É responsivo mas…

21. • Roda offline
• Adiciona a tela inicial
• Suporta Desktop/Mobile
Porém…

22. Ionic
A framework to rule them all

23. • Inicialmente um framework Mobile
• Suporte a Desktop
• Cria Apps Híbridas (APK)
• Cria Apps Web
• Feeling mobile na Web
Ionic

24. • Ótimo “feeling” de um App Mobile
• Service Worker
• Manifest
Ionic e PWA

25. • npm install –g ionic cordova
• ionic start tdc blank
• cd tdc
• ionic cordova platform add browser
• ionic serve --lab
• ionic build --prod --aot
Startup

26. DEMO
Entregando uma melhor experiência na UI

28. DEMO
Manifest

29. DEMO
Adicionando a Tela Inicial

30. DEMO
Geolocalização

31. DEMO
Câmera

32. Um service worker é um script que seu navegador
executa em segundo plano, separado da página da
Web, possibilitando recursos que não precisam de
uma página da Web ou de interação do usuário.
Matt Gaunt
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=pt-br
Service Workers

33. DEMO
Push Notification

34. http://balta.io/

35. http://bit.ly/baltaio-curso-aspnetcore

36. Obrigado