12/2017 - Ministrei palestra com o tema: “Aplicativos Móveis: PWA, Instants Apps. Vamos entender?”, durante o Alagoas Developers, realizado na Faculdade da Cidade de Maceió - FACIMA.

1. Aplicativos Móveis:
PWA, Instants Apps.
Vamos entender?
Pedro Barros

2. Vamos nos conhecer!?

3. ● Desenvolvedor em Unimed Maceió;
● Formado Técnico em Informática;
● Graduado em Análise e
Desenvolvimento de Sistemas;
● Pós-graduando em Engenharia de
Software.
I love new knowledges
Pedro Barros Redes sociais
pedroebarros
ped.barros
pedbarros
pedbarros
20 anos

4. Venham participar também!!

5. Qual o cenário atual?
● Buscar o app na Loja Virtual ou clicar em um
link no rodapé de um website que você já está
navegando;
● Verificar se tem espaço no smartphone;
● Efetuar o download (2G, 3G, 4G, Wi-Fi, etc);
● Iniciar o processo de instalação;
● Cadastrar quando é necessário;
● Utilizar praticamente a mesma coisa que
estava utilizando...;
● Compartilhar conteúdo via print-screen em
redes sociais.

6. O que há de novo para
os aplicativos móveis?

7. Mas antes, vamos saber
um pouco de algumas
coisas....

8. ➔ Nativo
➔ Híbrido
➔ Web App
Quais as opções para
desenvolver um
aplicativo?

9. Híbrido
• Se comporta como um aplicativo
nativo, mas é uma aplicação web;

10. Híbrido
● Característica multiplataforma:
Se desenvolve apenas uma vez
e executa em diferentes
plataformas;

11. Híbrido
•Essencialmente desenvolvidos
em HTML5 + CSS3 + JS com a
utilização de algum framework;

14. Alguns apps híbridos...

15. Nativo
• Desenvolvido específico para
cada plataforma:
- Android: Java/Kotlin (Android
Studio)
- iOS: Objective-C / Swift
(XCode)
- Windows Phone: C# (Visual
Studio)

16. Nativo
● Cada plataforma apresenta suas
próprias ferramentas e
elementos de interface, então
um APP nativo explora todas as
potencialidades da
plataforma;

17. Nativo
• Não possuem nenhum
problema/limitação;

18. Alguns apps nativos...

19. 80%de TODO tempo gasto em um smartphone é utilizando até 5 apps
66% 57,5% 32,4% 20,4% 12,3%
Julho 2017

20. Qual seria o cenário dos meus sonhos?
● Acabar com a instalação dos
aplicativos nos devices;
● Aplicativos web com uma experiência
agradável;
● Segurança dos dados;
● Suporte Offline
● Sempre atualizado;
● Utilização de links para compartilhar
conteúdo.

21. Vamos analisar...
O que há de novo sobre
os aplicativos móveis?

22. Então, apresento a vocês as
PROGRESSIVE WEB APPS

23. O QUE É PWA?
Progressive Web App usa a modernidade da web
possibilitando uma experiência de um aplicativo nativo.
Addy Osmani - Engineering Manager at Google

24. Jobs já tinha uma visão desde 2007...
Vocês já tem tudo o que precisam se querem saber
como desenvolver aplicativos para o iPhone hoje:
basta usar os padrões modernos da web.

25. ● Instaláveis
● Responsivo
● Visual Appficado
● Offline
● Seguro (https)
● Indexável
● Linkável
● Features:
○ Splash Screen
○ Push Notification
○ Geolocation
○ BackgroundSync
○ Vibration
PWA

26. Como funciona?

27. Service Workers
● É um script que seu navegador executa em
segundo plano;
● Tem um ciclo de vida totalmente separado
da página da Web;
● É baseado em código JavaScript puro;
● Trabalhar Offiline.

28. https://jakearchibald.github.io/isserviceworkerready/

29. Flipkart
● Maior e-commerce da Índia;
● 400% a mais tempo utilizando o site (PWA);
● 3x mais tempo gasto no site
● 40% maior taxa de reengancamento
● 3x menor uso de dados
https://developers.google.com/web/showcase/2016/flipkart

30. Konga
● Um site de comércio eletrônico líder na Nigéria
● 92% a menos no gasto dos dados móveis para
carregar a tela inicial;
● 82% a menos no gasto dos dados móveis para
concluir a primeira transação;
https://developers.google.com/web/showcase/2016/konga

31. https://pwa.rocks/

32. E COMO FAZ?

33. service-worker.js

34. E COMO REGISTRAR ESSE SW?

35. Mais simples que dormir...

36. E PARA DAR “O ROSTO” DE UM
APP?

37. Simples, simples, simples...
Web App Manifest

38. Starter PWA at Dev Alagoas

39. Starter PWA at Dev Alagoas

40. Starter PWA at Dev Alagoas

41. Então quer dizer que
chegou o FIM dos apps?

43. Instant Apps

44. O que são Instant Apps?
● Introduzido no Google I/O 2016 (lançamento em
2017)
● Executados em resposta ao lançamento de um URL;
● Não há necessidade de instalação;
● Funciona Android 6.0 (nível de API 23) ou versão
posterior;
● Torna possível a utilização de apenas uma única
feature de um app.
● “Apps as features”

45. Será necessário instalar 60mb
em um aplicativo para utilizar
apenas uma funcionalidade?

46. Recebe a URL
Não tem o app instalado,
abre Play Store Abre o app

47. Recebe a URL Abre o app

48. Quem utiliza?
● Vimeo
● Jet
● Dotlop
● Onefootball
● Realtor
● NyTimes Crossword
● Periscope
● Viki (um serviço de transmissão de vídeo para televisão e filmes
asiáticos)
Uses case by Google

49. Como funciona os Instant Apps?
Tipos de módulos:
● Base Feature Module:
○ Contém recursos compartilhados (temas, estilos, resources e
activities/fragments);
○ Este módulo sempre estará presente independentemente da
funcionalidade solicitada pelo usuário.
● Feature Module:
○ Contém todo o código específico de uma feature
○ Representa uma funcionalidade do aplicativo

50. Como funciona os Instant Apps?
Tipos de módulos:
● App Module:
○ Responsável por gerar o APK instalável;
○ Pode conter código e recursos específicos para este tipo de APK.
● Instant App Module:
○ É um invólucro para todos os Feature Modules do projeto;
○ Não deve conter código ou resources;
○ Responsável por gerar os APKs do Instant App.

51. Funcionalidade 1
Funcionalidade 2
Funcionalidade 3
PROJETO ANDROID
PROJETO ANDROID
+ Instant APKs
Módulo
Funcionalidade 1
Módulo
Funcionalidade 2
Módulo
Funcionalidade 3
ESTRUTURA DO PROJETO
Base Feature Module
Atenção: Cada módulo deve
ter no máximo 4 MB de
tamanho.

52. Mesma experiência, antes e depois da instalação

53. Requisitos para iniciar Instant Apps
● Android Studio 3.0 ou superior
● Android SDK 6.0 ou superior
● Android SDK Build Tools 26.x ou superior
● Android SDK Tools 25.x ou superior
● Android SDK Platform Tools 25.x ou superior
● Android Support Library (latest)
● Android Repository (latest)
● Instant Apps Development SDK.

54. Como podemos iniciar um projeto
utilizando instant apps?

59. httpS://pedro.dev.al/hello

61. Rodando o Instant App

62. Rodando o Instant App

63. ● https://github.com/pedbarros/pwa-dev-al
● https://github.com/pedbarros/instantapps-dev-al
Projetos

64. Referências
● https://developers.google.com/web/progressive-web-apps/
● https://medium.com/tableless/introdu%C3%A7%C3%A3o-aos-pr
ogressive-web-apps-ad47ba24cddb
● https://jakearchibald.github.io/isserviceworkerready/
● https://brasil.uxdesign.cc/o-que-s%C3%A3o-progressive-web-a
pps-86e1b5306051
● https://en.wikipedia.org/wiki/Progressive_web_app
● https://developer.android.com/topic/instant-apps/index.html?h
l=pt-br
● https://www.tecmundo.com.br/google/104990-android-instant
-apps-use-aplicativos-realizar-download.htm