O documento apresenta uma palestra sobre Progressive Web Apps (PWAs) com as seguintes informações essenciais: (1) define o que são PWAs e seu objetivo de criar aplicativos web melhores, nativos e responsivos; (2) demonstra como criar uma primeira PWA usando manifest.json, service workers e torná-la instalável; (3) discute como integrar PWAs em aplicativos Angular usando ferramentas como ng add.

2. MVP Conf 2019
PROGRESSIVE WEB APPS
State of Art

3. André
Baltieri
CEO do balta.io

4. Objetivos:
- Definição de PWA
- Dicas para um bom frontend
- UI/UX nas PWAs
- Saindo da mediocridade
MVP Conf 2019
Progressive Web Apps
State of Art

5. mas antes de
começar...

6. Siga @balta.io
nas Redes Sociais

7. Receba nossas novidades
Newsletter
https://go.balta.io/cadastro

8. Cursos alinhados ao mercado
Cancele quando quiser
Seja nosso
aluno!
Confira os cursos: http://balta.io/cursos

9. Antes de começar...
Dicas valiosas
- Separe o Front do Back!
- Não use os templates padrão do VS
- Use o sempre os CLIs
- O VS Code tem melhor suporte e adoção para Front
- Server Side Render/Angular Universal!
- Se não precisar de SEO, sirva arquivos estáticos
- TypeScript no Backend pode ser uma boa
- Use e abuse do Azure CDN
- UI/UX importam muito (Ionic/Framework 7/Quasar)

10. Revisando...
O que são PWAs?
- Um movimento
- Criar Apps Web melhores
- Feeling nativo
- Suporte Offline
- Instaláveis
- Seguras
- Responsivas
- Rápidas

11. Sua primeira
PWA
- manifest.json
- Service Worker
- Trabalha offline
- Servido via HTTPs

12. #demo
Sua Primeira PWA

13. #1
Manifest.json

14. #1
Manifest.json

16. #2
Service Worker

17. #2
Service Worker

18. #2
Service Worker

19. #3
Instalável

20. #3
Instalável

21. #3
Instalável

22. Beleza...
Mas e o Angular?
- ng add @angular/pwa

23. - ngsw-config.json

24. - angular-config.json
Beleza...
Mas e o Angular?

26. - index.html

27. #4
E Desktops?
- Tem nas versões mais recentes do Chrome
- Roda em Windows, Mac e Linux
- Não depende de Electron
- Tem todas as funcionalidades de um PWA

29. #5
UI/UX
- Peça fundamental
- I can`t believe is not native
- Utilize um Framework (Ionic/Quasar/Framework 7)
- Forneça UIs diferentes para Apple/Android

30. #6
Apple
- É a grande pedra no sapato
- Suporta “superficialmente” PWA
- Não demonstra muito interesse em melhorar isto
- Podemos viver sem ela

31. Dúvidas?
hello@balta.io

32. Material Selecionado
Cancele quando quiser
Cursos alinhados ao
mercado
Conteúdo novo TODO DIA!
https://balta.io
SEGUNDA
Vlog
TERÇA
Tutorial/Novas Aulas
QUARTA
Tutorial/Live Coding
QUINTA
Novas Aulas
SEXTA
Carreira Dev
SÁBADO
BaltaNews

33. Siga @balta.io
nas Redes Sociais

34. Receba esta palestra
https://mvpconf.balta.i
o

35. hello@balta.io
https://balta.io/