SlideShare uma empresa Scribd logo
GoogleIO2017Extended
Nome: João Vitor Paes de Barros do Carmo
Gerente de Projetos e Arquiteto de Software no TJMT
GitHub: github.com/jvitor83
Twitter: twitter.com/jvitor83
Email: jvitor83@hotmail.com
Adivinhando
o futuro
desde 1966
Chuck Norris não
adivinha o futuro!
Ele fala pro futuro o
que ele tem que fazer!
Em 2019, 20% das grandes marcas
deverão abandonar seus aplicativos
móveis
Em 2019, 20% das grandes marcas
deverão abandonar seus aplicativos
móveis
As empresas vão se voltar
novamente para a web móvel ou
passar a usar abordagens como a
dos “PWA”
A vantagem para o usuário é a de
não ter que instalar vários apps
utilizados uma única vez na vida.
“As empresas vão parar de usar
aplicativos como o primeiro ponto
de contato da marca com seus
clientes”
Abandono
Cada passo custaaproximadamente 20% dos usuários
“Nosso maior erro
foi investir em HTML
5 ao invés de nos
concentrarmos na
linguagem nativa.
Ainda não estava
pronto.”
Zuckerberg
sobre2012
2012 - Repercussões
Se a web pode ser evoluída para incluir APIs
ausentes e obter melhor desempenho,
desenvolvedores não precisam ir além da web.
Sinto que a web será muito boa daqui
a 10 anos, e não haverá mais essa
tensão entre nativo e web que tanto
estamos debatendo atualmente.
2012 - Repercussões
Engenheiro do
A plataforma deve ser fácil e escalável
o suficiente para que times de
engenheiros “meros mortais” possam
alcançar bons resultados com ela.
2012 - Retratação
Com HTML5 é tão difícil de obter bons
resultados que você acaba perdendo
os benefícios de um desenvolvimento
veloz.
A polyfill is a piece of code
or plugin that provides the technology
that you, the developer, expect the
browser to provide natively.
2012 - Híbrido
2012 - Híbrido
2012 - Híbrido
PROS
• Desenvolve para a web,
roda em qualquer lugar
• Baixo custo no
desenvolvimento
CONS
• Desempenho ruim
• Testar para múltiplos
dispositivos não é tão fácil
2012 - Híbrido
2017: This project is not maintained anymore.
The last Crosswalk release was Crosswalk 23.
PRESENT
Estado do GAP
Até quando?
E agora, algo mudou?
E agora, algo mudou?
2016
• Tempo gasto pelos
usuários no PWA é de
3.5 minutos contra 70
segundos no Nativo
• Aumento de 3x mais no
tempo de permanência
• 40% maior
engajamento
• 3x menos tráfico de
dados
2016
• Aumento de 104% em
novos usuários em
todos os navegadores;
82% especialmente no
iOS
• Páginas são visitadas
2X mais por usuário
• Aumento de 74% no
tempo de permanência
2017
• Menos de 1MB no
armazenamento
• Aumento de mais de
30% na velocidade de
inicialização e na
navegação de forma
geral se comparado
com a versão nativa
• Redução de 70% no
tráfico de dados
Exemplos
• https://pwa.rocks/
• https://snapdrop.net/
• https://mobile.twitter.com
• https://m.aliexpress.com
Experiência do Usuário
Qualidade
Mas afinal, o que é PWA?
Progressivo - Funciona para qualquer usuário,
independentemente do navegador escolhido,
pois é criado com aprimoramento progressivo
como princípio fundamental.
Mas afinal, o que é PWA?
Responsivo - Se adequa a qualquer formato:
desktop, celular, tablet ou o que for inventado a
seguir.
Mas afinal, o que é PWA?
Independente de conectividade - Aprimorado
com service workers para trabalhar off-line ou
em redes de baixa qualidade.
Mas afinal, o que é PWA?
Semelhante a aplicativos - Parece com
aplicativos para os usuários, com interações e
navegação de estilo de aplicativos, pois é
criado no modelo de shell de aplicativo.
Mas afinal, o que é PWA?
Atual - Sempre atualizado graças ao processo
de atualização do service worker.
Mas afinal, o que é PWA?
Seguro - Fornecido via HTTPS para evitar
invasões e garantir que o conteúdo não seja
adulterado.
Mas afinal, o que é PWA?
Descobrível - Pode ser
identificado como
"aplicativo" graças aos
manifestos W3C e ao
escopo de registro do
service worker, que
permitem que os
mecanismos de
pesquisa os encontrem.
Mas afinal, o que é PWA?
Reenvolvente - Facilita o reengajamento com
recursos como Push Notification.
Mas afinal, o que é PWA?
Instalável - Permite que os usuários "guardem"
os aplicativos mais úteis em suas telas iniciais
sem precisar acessar uma loja de aplicativos.
Mas afinal, o que é PWA?
Linkável - Compartilhe
facilmente por URL, não
requer instalação complexa.
Mas afinal, o que é PWA?
Mas afinal, o que é PWA?
Iniciando com os requisitos da feature
“Add To Home Screen”
Comece progressivamente!
Comece progressivamente!
Se está na minha área de trabalho,
deve funcionar da mesma forma que
um bom aplicativo nativo.
Comece progressivamente!
Quais são os requisitos?
•Ter um arquivo de manifesto de app da Web com:
•um short_name (usado na tela inicial)
•um name (usado no banner)
•um ícone PNG de 144x144
•um start_url que é carregado
•um display (usado para esconder a interface do browser)
•Ter um service worker registrado no seu site.
•Ser exibido por HTTPS (um requisito para o uso de Service Workers).
•Ser visitado pelo menos duas vezes, com pelo menos cinco minutos entre
as visitas.
Lighthouse
Extensão do Google Chrome
chrome://flags/#bypass-app-banner-engagement-checks
chrome://flags/#enable-add-to-shelf (somente desktop)
Como testo?
Adendo
http://cubiq.org/add-to-home-screen
Naprática,comoatendo?
o Crie seu manifest.json
o Crie seu service-worker.js
o Hospede em HTTPS
Manifest
https://www.w3.org/TR/appmanifest/
Manifest-Compatibilidade
Manifest-Alternativas
https://github.com/joshbuchea/HEAD#browsers--platforms
https://github.com/GoogleChrome/pwacompat
http://realfavicongenerator.net
Manifest - Alternativas
AppShell
Offline/Cache
Offline/Cache
Offline/Cache
Offline/Cache–ServiceWorker
Offline/Cache–ServiceWorker
ServiceWorker-LifeCycle
ServiceWorker-LifeCycle
ServiceWorker-LifeCycle
ServiceWorker-LifeCycle
ServiceWorker
ServiceWorker-Funcionamento
ServiceWorker-Estratégias
ServiceWorker-Estratégias
ServiceWorker-Estratégias
ServiceWorker-Estratégias
ServiceWorker-Estratégias
ServiceWorker
Exemplo
ServiceWorker-Estratégias
Uma únicaestratégia nem sempre é a melhor!
MeuPWA
Desenvolvendo
ServiceWorker-Ferramentas
https://github.com/GoogleChrome/sw-precache
npm install --global sw-precache
sw-precache--config=sw-precache-config.js
sw-precache-config.js
MeuPWA
Publicar
ServiceWorker-Frameworks
ngsw-manifest.json
npm install –save-dev @angular/service-worker
ng set apps.0.serviceWorker=true
ng new project
ServiceWorker-Compatibilidade
ServiceWorker-Alternativas
Safari eEdge (Emdesenvolvimento)(Devemos fazer)
Service Worker (Mozilla Samples)
https://serviceworke.rs
Service Worker (CookBook)
https://jakearchibald.com/2014/offline-cookbook/
Service Worker - Links
Google developers
https://developers.google.com/web/fundamentals/getting-
started/primers/service-workers?hl=pt-br
Storage
localForage
https://localforage.github.io/localForage/
PushNotification
PushNotification
PushNotification
PushNotification
PushNotification-Funcionamento
PushNotification-Funcionamento
PushNotification-Compatibilidade
PushNotification-Alternativas
Safari eEdge (Emdesenvolvimento)Implementaçãocustomizada)
Urban Airship PushWoosh
OneSignal
DemaisAPIs
https://whatwebcando.today/
•Credential Manager API
•PaymentRequest API
•ShareAPI
•Web Bluetooth
•NFC
•Ambient light sensor
•Proximity Sensor
•Accelerometer,
magnetometer
and gyroscope
•Shape detection
https://caniuse.com
PWAvsNativo
Tradicionalmente teríamos que criar:
Desktop/Mobile Web + Nativo Android + Nativo iOS
A questão não é “PWA vs Nativo” e
sim “PWA vs(web+ nativo + nativo)”
Atualmente:
PWA + Nativo iOS (até queSafari implemente SW)
chrome://flags/#enable-improved-a2hs
“Add to home screen” aperfeiçoado!
Futuro – Add to Home Screen
Futuro–ServiceWorker
Futuro – Store?
Hosted Web Apps (and, in the future, Progressive Web
Apps) can be listed in the Windows 10 Store for better
discoverability and manageability.
Futuro – Store (Alternativas?)
Gera seu App a partir da Web
Gera seu App a partir do código
Apply the super-powers progressively
https://goo.gl/JJFP3h
Obrigado!
João Vitor Paes de Barros do Carmo
GitHub: github.com/jvitor83
Twitter: twitter.com/jvitor83
Email: jvitor83@hotmail.com

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Progressive apps
Progressive appsProgressive apps
Progressive apps
 
Desenvolvimento Mobile Web & Software Livre
Desenvolvimento Mobile Web & Software LivreDesenvolvimento Mobile Web & Software Livre
Desenvolvimento Mobile Web & Software Livre
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Startups com WordPress - Tirando a sua ideia do papel
Startups com WordPress - Tirando a sua ideia do papelStartups com WordPress - Tirando a sua ideia do papel
Startups com WordPress - Tirando a sua ideia do papel
 
Medindo o Desempenho de sua aplicação com as APIs de Web Performance
Medindo o Desempenho de sua aplicação com as APIs de Web PerformanceMedindo o Desempenho de sua aplicação com as APIs de Web Performance
Medindo o Desempenho de sua aplicação com as APIs de Web Performance
 
Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBH
 
PWA - Front in Floripa
PWA - Front in FloripaPWA - Front in Floripa
PWA - Front in Floripa
 
Dando vida ao sketch com Firebase
Dando vida ao sketch com FirebaseDando vida ao sketch com Firebase
Dando vida ao sketch com Firebase
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
 
Zabbix - Sou Dev, o que eu tenho a ver com isso? - André Déo (Comunidade Zabb...
Zabbix - Sou Dev, o que eu tenho a ver com isso? - André Déo (Comunidade Zabb...Zabbix - Sou Dev, o que eu tenho a ver com isso? - André Déo (Comunidade Zabb...
Zabbix - Sou Dev, o que eu tenho a ver com isso? - André Déo (Comunidade Zabb...
 

Semelhante a Google IO 2017 Extended - Cuiaba - Progressive Web Apps

Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 

Semelhante a Google IO 2017 Extended - Cuiaba - Progressive Web Apps (20)

Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
 
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
 
Pwa e o futuro do frontend
Pwa e o futuro do frontendPwa e o futuro do frontend
Pwa e o futuro do frontend
 
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
 
MVPConf - Azure Functions
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure Functions
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
 
Introdução ao WCM System
Introdução ao WCM SystemIntrodução ao WCM System
Introdução ao WCM System
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Controlando o Ciclo de Software e porque você deveria usar o VSTS
Controlando o Ciclo de Software e porque você deveria usar o VSTSControlando o Ciclo de Software e porque você deveria usar o VSTS
Controlando o Ciclo de Software e porque você deveria usar o VSTS
 
Selenium renato groffe + milton camara - mvp conf latam 2019
Selenium  renato groffe + milton camara - mvp conf latam 2019Selenium  renato groffe + milton camara - mvp conf latam 2019
Selenium renato groffe + milton camara - mvp conf latam 2019
 
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
 
7Masters - PWA - Publishing using Universal Windows Apps
7Masters - PWA - Publishing using Universal Windows Apps7Masters - PWA - Publishing using Universal Windows Apps
7Masters - PWA - Publishing using Universal Windows Apps
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 

Google IO 2017 Extended - Cuiaba - Progressive Web Apps

Notas do Editor

  1. Lento, mas o GAP diminui a cada versão do SO, cada versão do Cordova e a cada novo telefone (hardware melhor)
  2. Lento, mas o GAP diminui a cada versão do SO, cada versão do Cordova e a cada novo telefone (hardware melhor)
  3. Exemplo: Uma aplicação com o hamburger menu, normalmente nós temos a sensação de que pode-se com um gesto abrir
  4. Verifique se sua framework possui um suporte especializado
  5. Ultimamente temos muitas APIs para todos os tipos de necessidades
  6. Não precisamos mais desenvolver Nativo para ter a experiência de Nativo. Finalmente o GAP está se fechando! NÉ APPLE?