SlideShare uma empresa Scribd logo
1 de 18
PWA
Progressive Web
Applications
Jackson Veroneze
Software Developer
jackson@jacksonveroneze.com
https://jacksonveroneze.com
https://br.linkedin.com/in/jacksonveroneze
Autores
Mario Mendonça
Software Developer
mario.mendonca@gmail.com
https://br.linkedin.com/in/mario-mendonca
Aplicações CLI
Aplicações Desktop
Aplicações Web
Aplicações Mobile
Por que gostamos dos aplicativos Mobile?
Usamos aplicativos de celular todos os dias, e repetidas vezes ao dia – utilitários,
redes sociais, aplicativos de mensagens, tocadores de música.
Não precisa abrir um navegador, digitar uma URL, se autenticar e por aí vai. Basta
clicar em um ícone na Home que está tudo pronto.
Além disso, o aplicativo é mais rápido normalmente, trabalha offline e envia
notificações.
O que é ruim nas Apps Mobile?
Não são facilmente linkáveis, ou seja, não tem como eu enviar um link do
Facebook, de uma postagem da Web e você ver no seu telefone.
Não são indexadas pelos mecanismos de busca do Google, o que pode impactar
diretamente a visibilidade da sua app, ficando restrita apenas ao marketplace.
Por fim temos a instalação e atualização dos aplicativos, que muitas vezes são
muito custosos.
O que é ruim nas Web Mobile Apps?
Os websites mobile continuam lentos, pesados, e muitas vezes travam o
navegador no meio da navegação.
Facebook e o Google já começaram a preparar iniciativas para driblar esse
problema, como o Facebook Instant Articles e o Google Accelerated Mobile
Pages.
Mas esse tipo de iniciativa não resolve o problema, apenas o contorna.
Não tem notificações.
Não trabalham offline.
PWA - A Salvação?
Ele começa como uma simples aba no Chrome e se torna “progressivamente
mais app” à medida em que você engaja e interage com ele. Até chegar ao ponto
onde basta você adicionar o Web App à sua página inicial e pronto: ele passa a
adquirir funções que antes eram exclusivas de aplicativos nativos: geolocalização,
notificações, uso offline, etc..
“É uma aplicação Web com performance, animações,
notificações, instalável, trabalhando offline, linkável,
indexável e de fácil atualização.”
“Esses aplicativos não são entregues
através da App Store, eles são apenas
websites que tomaram a dose certa
de vitaminas.”
As vantagens para o usuário
Exemplo: O Shopping
Imagine você visitando o shopping pela primeira vez e talvez a única vez. Para
efetuar o pagamento do estacionamento você necessita usar o app do shopping.
Pensando num app nativo, precisaria ir até a loja de aplicativos do seu SO e
instalá-lo. Para utilizar, provavelmente, apenas uma vez.
Agora imagine a mesma situação, porém, para efetuar o pagamento você precisa
acessar apenas uma url em seu browser e progressivamente ele vai se tornando
um app, sem necessidade de instalação.
Características
Progressivos: funcionam para todos os usuários, independentemente da escolha de navegador, pois são
criados com aprimoramento progressivo como princípio central.
Responsivos: ajustam-se a qualquer formato: computador, dispositivo móvel, tablet ou o que quer que
esteja por vir.
Independentes de conectividade: aprimorados para usar service workers para funcionar off-line ou em
redes de baixa qualidade.
Semelhantes a um app: o usuário sente que está usando um app, com interações e navegação no
mesmo estilo de apps, pois eles são criados no modelo app shell.
Atualizados: sempre atualizados, graças ao processo de atualização do service worker.
Características
Seguros: veiculados por HTTPS para impedir o rastreamento e assegurar que o conteúdo não foi
adulterado.
Detectáveis: são identificáveis como "aplicativos" graças ao escopo de registro do service worker e
manifestos W3C, permitindo que mecanismos de pesquisa os encontrem.
Reengajados: facilitam o reengajamento por meio de recursos como notificações push.
Instaláveis: permitem que os usuários "salvem" os apps que consideram mais úteis na sua tela inicial
sem a inconveniência de ter que usar uma loja de apps.
Vinculáveis por link: compartilhamento fácil por meio de URL, sem a exigência de instalações
complexas.
Criar atalho
Service worker
Status SSL
Heurística de frequência
de acessos
Será que a moda pega?
Tecnologicamente falando: não é todo navegador que suporta as tecnologias e
frameworks necessários para que um aplicativo web progressivo funcione a 100%
de suas capacidades. Mas isso é só uma questão de tempo; toda tecnologia
acaba empurrando os limites das plataformas onde ela roda.
Exemplos
https://sergiolopes.github.io/shopping/
https://paperplanes.world/
https://task-list-5944f.firebaseapp.com/
https://pwa.rocks/
Referências
http://arquiteturadeinformacao.com/mobile/o-que-sao-progressive-web-apps/
https://codelabs.developers.google.com/codelabs/your-first-pwapp-
pt/index.html?index=..%2F..%2Findex#0
http://blog.balta.io/2016/10/10/pwa-por-onde-comecar/
http://hipsters.tech/progressive-web-apps-hipsters-03/

Mais conteúdo relacionado

Mais procurados

Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q eSua web app nao precisa ser necessariamente mais rapida, mas parecer q e
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e
Alexandre Magno Teles Zimerer
 
ASP.NET Single Page Application
ASP.NET Single Page ApplicationASP.NET Single Page Application
ASP.NET Single Page Application
Alberto Monteiro
 

Mais procurados (20)

Desenvolvimento web e mobile ifce
Desenvolvimento web e mobile   ifceDesenvolvimento web e mobile   ifce
Desenvolvimento web e mobile ifce
 
Dando vida ao sketch com Firebase
Dando vida ao sketch com FirebaseDando vida ao sketch com Firebase
Dando vida ao sketch com Firebase
 
Aplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudAplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test Cloud
 
Palestra sobre PWA
Palestra sobre PWAPalestra sobre PWA
Palestra sobre PWA
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
PWA - Front in Floripa
PWA - Front in FloripaPWA - Front in Floripa
PWA - Front in Floripa
 
Como criar um aplicativo
Como criar um aplicativoComo criar um aplicativo
Como criar um aplicativo
 
Mobile
MobileMobile
Mobile
 
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
 
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
 
Mobile Marketing - Agência Mateada
Mobile Marketing - Agência MateadaMobile Marketing - Agência Mateada
Mobile Marketing - Agência Mateada
 
Aula 3 fabricas
Aula 3   fabricasAula 3   fabricas
Aula 3 fabricas
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
 
Polymer Starter Kit
Polymer Starter KitPolymer Starter Kit
Polymer Starter Kit
 
Java Script
Java ScriptJava Script
Java Script
 
Progressive Web Apps (PWA)
Progressive Web Apps (PWA)Progressive Web Apps (PWA)
Progressive Web Apps (PWA)
 
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q eSua web app nao precisa ser necessariamente mais rapida, mas parecer q e
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e
 
Responsividade e html5
Responsividade e html5Responsividade e html5
Responsividade e html5
 
Como Criar Um Blog
Como Criar Um BlogComo Criar Um Blog
Como Criar Um Blog
 
ASP.NET Single Page Application
ASP.NET Single Page ApplicationASP.NET Single Page Application
ASP.NET Single Page Application
 

Destaque

Destaque (8)

Web socket - Trazendo soquetes para a web
Web socket - Trazendo soquetes para a webWeb socket - Trazendo soquetes para a web
Web socket - Trazendo soquetes para a web
 
Web components
Web componentsWeb components
Web components
 
Web components
Web componentsWeb components
Web components
 
Vanilla js
Vanilla jsVanilla js
Vanilla js
 
If bom é if morto
If bom é if mortoIf bom é if morto
If bom é if morto
 
Conhecendo a API Geolocation
Conhecendo a API GeolocationConhecendo a API Geolocation
Conhecendo a API Geolocation
 
Vanilla JS
Vanilla JSVanilla JS
Vanilla JS
 
Web socket - Trazendo soquetes para a web
Web socket - Trazendo soquetes para a webWeb socket - Trazendo soquetes para a web
Web socket - Trazendo soquetes para a web
 

Semelhante a Progressive apps

Tecnologias básicas da web x.0
Tecnologias básicas da web x.0Tecnologias básicas da web x.0
Tecnologias básicas da web x.0
Diego Almeida Gava
 
Tecnologias básicas da Web X.0
Tecnologias básicas da Web X.0 Tecnologias básicas da Web X.0
Tecnologias básicas da Web X.0
Diego Almeida Gava
 
Tecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do FacebookTecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do Facebook
Diego Almeida Gava
 
Aplicativos para dispositivos móveis
Aplicativos para dispositivos móveisAplicativos para dispositivos móveis
Aplicativos para dispositivos móveis
Ygor Castro
 
Tecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do FacebookTecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do Facebook
Diego Almeida Gava
 

Semelhante a Progressive apps (20)

Classificação de Aplicativos para Moveis
Classificação de Aplicativos para MoveisClassificação de Aplicativos para Moveis
Classificação de Aplicativos para Moveis
 
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...
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Apresentação 3 de asoso
Apresentação 3 de asosoApresentação 3 de asoso
Apresentação 3 de asoso
 
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
 
Enterprise App Stores
Enterprise App StoresEnterprise App Stores
Enterprise App Stores
 
Tecnologias básicas da web x.0
Tecnologias básicas da web x.0Tecnologias básicas da web x.0
Tecnologias básicas da web x.0
 
Tecnologias básicas da Web X.0
Tecnologias básicas da Web X.0 Tecnologias básicas da Web X.0
Tecnologias básicas da Web X.0
 
Mobile Dev - Aplicativos
Mobile Dev - AplicativosMobile Dev - Aplicativos
Mobile Dev - Aplicativos
 
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
 
Tecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do FacebookTecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do Facebook
 
Loja de Aplicativos e Portal do Desenvolvedor
Loja de Aplicativos e Portal do DesenvolvedorLoja de Aplicativos e Portal do Desenvolvedor
Loja de Aplicativos e Portal do Desenvolvedor
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
 
Aplicativos para dispositivos móveis
Aplicativos para dispositivos móveisAplicativos para dispositivos móveis
Aplicativos para dispositivos móveis
 
[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ê...
 
Marketplace Conference 2018 - PWA: O Futuro dos Aplicativos Mobile Clique p...
Marketplace Conference 2018 -  PWA: O Futuro dos Aplicativos Mobile  Clique p...Marketplace Conference 2018 -  PWA: O Futuro dos Aplicativos Mobile  Clique p...
Marketplace Conference 2018 - PWA: O Futuro dos Aplicativos Mobile Clique p...
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
 
Apresentação 3 de asoso (1)
Apresentação 3 de asoso (1)Apresentação 3 de asoso (1)
Apresentação 3 de asoso (1)
 
Tecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do FacebookTecnologias Básicas da Web X.0 API do Facebook
Tecnologias Básicas da Web X.0 API do Facebook
 
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
 

Mais de Jackson Veroneze

Mais de Jackson Veroneze (8)

Angular 4 - Introdução
Angular 4 - IntroduçãoAngular 4 - Introdução
Angular 4 - Introdução
 
Regex javascript
Regex   javascriptRegex   javascript
Regex javascript
 
Map, filter e reduce
Map, filter e reduceMap, filter e reduce
Map, filter e reduce
 
Expressões Regulares - Final
Expressões Regulares - FinalExpressões Regulares - Final
Expressões Regulares - Final
 
Integração Contínua
Integração ContínuaIntegração Contínua
Integração Contínua
 
Expressões Regulares - Parte II
Expressões Regulares - Parte IIExpressões Regulares - Parte II
Expressões Regulares - Parte II
 
Expressões Regulares - Introdução
Expressões Regulares - IntroduçãoExpressões Regulares - Introdução
Expressões Regulares - Introdução
 
GULP - Automatizador de tarefas
GULP - Automatizador de tarefasGULP - Automatizador de tarefas
GULP - Automatizador de tarefas
 

Progressive apps

  • 7. Por que gostamos dos aplicativos Mobile? Usamos aplicativos de celular todos os dias, e repetidas vezes ao dia – utilitários, redes sociais, aplicativos de mensagens, tocadores de música. Não precisa abrir um navegador, digitar uma URL, se autenticar e por aí vai. Basta clicar em um ícone na Home que está tudo pronto. Além disso, o aplicativo é mais rápido normalmente, trabalha offline e envia notificações.
  • 8. O que é ruim nas Apps Mobile? Não são facilmente linkáveis, ou seja, não tem como eu enviar um link do Facebook, de uma postagem da Web e você ver no seu telefone. Não são indexadas pelos mecanismos de busca do Google, o que pode impactar diretamente a visibilidade da sua app, ficando restrita apenas ao marketplace. Por fim temos a instalação e atualização dos aplicativos, que muitas vezes são muito custosos.
  • 9. O que é ruim nas Web Mobile Apps? Os websites mobile continuam lentos, pesados, e muitas vezes travam o navegador no meio da navegação. Facebook e o Google já começaram a preparar iniciativas para driblar esse problema, como o Facebook Instant Articles e o Google Accelerated Mobile Pages. Mas esse tipo de iniciativa não resolve o problema, apenas o contorna. Não tem notificações. Não trabalham offline.
  • 10. PWA - A Salvação? Ele começa como uma simples aba no Chrome e se torna “progressivamente mais app” à medida em que você engaja e interage com ele. Até chegar ao ponto onde basta você adicionar o Web App à sua página inicial e pronto: ele passa a adquirir funções que antes eram exclusivas de aplicativos nativos: geolocalização, notificações, uso offline, etc.. “É uma aplicação Web com performance, animações, notificações, instalável, trabalhando offline, linkável, indexável e de fácil atualização.”
  • 11. “Esses aplicativos não são entregues através da App Store, eles são apenas websites que tomaram a dose certa de vitaminas.”
  • 12. As vantagens para o usuário Exemplo: O Shopping Imagine você visitando o shopping pela primeira vez e talvez a única vez. Para efetuar o pagamento do estacionamento você necessita usar o app do shopping. Pensando num app nativo, precisaria ir até a loja de aplicativos do seu SO e instalá-lo. Para utilizar, provavelmente, apenas uma vez. Agora imagine a mesma situação, porém, para efetuar o pagamento você precisa acessar apenas uma url em seu browser e progressivamente ele vai se tornando um app, sem necessidade de instalação.
  • 13. Características Progressivos: funcionam para todos os usuários, independentemente da escolha de navegador, pois são criados com aprimoramento progressivo como princípio central. Responsivos: ajustam-se a qualquer formato: computador, dispositivo móvel, tablet ou o que quer que esteja por vir. Independentes de conectividade: aprimorados para usar service workers para funcionar off-line ou em redes de baixa qualidade. Semelhantes a um app: o usuário sente que está usando um app, com interações e navegação no mesmo estilo de apps, pois eles são criados no modelo app shell. Atualizados: sempre atualizados, graças ao processo de atualização do service worker.
  • 14. Características Seguros: veiculados por HTTPS para impedir o rastreamento e assegurar que o conteúdo não foi adulterado. Detectáveis: são identificáveis como "aplicativos" graças ao escopo de registro do service worker e manifestos W3C, permitindo que mecanismos de pesquisa os encontrem. Reengajados: facilitam o reengajamento por meio de recursos como notificações push. Instaláveis: permitem que os usuários "salvem" os apps que consideram mais úteis na sua tela inicial sem a inconveniência de ter que usar uma loja de apps. Vinculáveis por link: compartilhamento fácil por meio de URL, sem a exigência de instalações complexas.
  • 15. Criar atalho Service worker Status SSL Heurística de frequência de acessos
  • 16. Será que a moda pega? Tecnologicamente falando: não é todo navegador que suporta as tecnologias e frameworks necessários para que um aplicativo web progressivo funcione a 100% de suas capacidades. Mas isso é só uma questão de tempo; toda tecnologia acaba empurrando os limites das plataformas onde ela roda.