O documento apresenta o conceito de Progressive Web Apps (PWA) e suas funcionalidades, comparando-os a aplicativos nativos. Gustavo Bellini Bigardi destaca as vantagens da utilização do Ionic para desenvolvimento de PWAs e a possibilidade de encapsulá-los em aplicativos universais do Windows. Além disso, menciona que a tecnologia PWA é suportada em navegadores modernos, permitindo acesso a diversas APIs do dispositivo.

1. 7Masters - PWA
GUSTAVO BELLINI BIGARDI
https://about.me/gbbigardi
FINAMAX
PROGRESSIVE WEB APPS
Disponibilizando seu PWA como uma aplicação nativa Windows

2. 7Masters - PWA
• Programador Sr @ Finamax
• Desenvolvedor a mais de 12 anos
• Trabalho principalmente com .NET
• Atuo também com Javascript, Java
e outros tipos de magia negra.
Gustavo Bellini Bigardi
7Masters - PWA

3. 7Masters - PWA
Progressive Web apps – Por que?
"Um Progressive Web App usa recursos web
modernos para oferecer uma experiência de
usuário semelhante a uma aplicação".

4. 7Masters - PWA
Progressive Web apps – Por que?
Basicamente, temos um aplicativo web, que
fornece parte dos recursos de um aplicativo
nativo, sem a necessidade de instalação ou
publicação na App Store.

5. 7Masters - PWA
Suporte da tecnologia
Temos diversos recursos de um aplicativo nativo disponíveis,
através da API do browser, sendo:
● Localização
● Orientação de tela
● Câmera e Microfone
● Vibração
● Sensor de luminosidade
● Status da bateria
● Status da rede de dados (Móvel ou Wifi)
● Bônus: Push Notifications!

6. 7Masters - PWA
O Ionic provê toda estrutura e componentes para a
construção de aplicativos híbridos, que é a mesma
utilizada para a construção de um PWA.
Além disso, o Ionic já permite que um mesmo aplicativo
desenvolvido como PWA seja compilado e publicado
para Android e iOS, com um mínimo de ajustes.
Ionic

7. 7Masters - PWA
Um dos pontos positivos do Ionic é ele fornecer
já uma estrutura para a aplicação feita em Angular 2 / 4.
O Angular é um framework com uma curva de aprendizado
baixa, onde o desenvolvedor mais iniciante pode rapidamente
desenvolver aplicações utilizando seus conhecimentos de
HTML, CSS e Javascript.
O Ionic provê uma coleção de componentes próprios para
mobile, que adaptam sua aparência conforme o sistema
operacional.
Angular

8. 7Masters - PWA
Para acessar uma
aplicação PWA,
precisamos abrir um
browser com suporte
e navegar até a URL
daquela aplicação.
Acessando sua aplicação PWA...

9. 7Masters - PWA
Em um dispositivo
Android, com o Chrome,
temos a notificação para
adicionar o PWA na tela
inicial e abrir o mesmo
como uma aplicação, com
suporte Off-line.
...no Android...

10. 7Masters - PWA
No iOS, ainda não temos
esse suporte... Mas já
temos suporte ao
ServiceWorker, o que é
são ótimas notícias, já
que antes não tínhamos
nada.
...no iOS... Ops, não ainda...

11. 7Masters - PWA

12. 7Masters - PWA
...mas e no Windows?

13. 7Masters - PWA

14. 7Masters - PWA
Podemos “encapsular” aplicações PWA dentro de
uma Universal App do Windows, de modo que
esta ainda gerencie os arquivos Off-line, como é
feito no Android quando fixamos na tela inicial.
Universal Windows Platform

15. 7Masters - PWA
Com isso, ganhamos recursos como o Windows
App Sandboxing, para execução com segurança,
e acesso completo as APIs do Windows Runtime
(WinRT), onde podemos:
Controlar a câmera, recursos do usuário como
calendário, contatos, acesso a Cortana, entre
outros.
Universal Windows Platform

16. 7Masters - PWA
DEMO o/

17. 7Masters - PWA
DEMO o/
https://github.com/gustavobigardi/7masters-pwa-uwp

18. 7Masters - PWA
DEMO o/
https://github.com/gustavobigardi/demo-jundev-openday-wpa

19. 7Masters - PWA
Alguma
Dúvida?
Muito
obrigado!