SlideShare uma empresa Scribd logo
PROGRESSIVE
WEB
APPS
@paolo_almeida
PAOLOALMEIDA
Pushing code at @BrasilCT
O QUE É PWA?
A Progressive Web App uses modern web
capabilities to deliver an app-like user experience.
Addy Osmani.
NATIVE APP
Performance
Features Nativas
Monetização
Store
Animações fluídas
WEB APP
Instaláveis
Responsivo
Visual Appficado
Offline
Seguro (https)
Indexável
Linkável
Features:
● Splash Screen
● Push Notification
● Geolocation
● BackgroundSync
● Vibration
● Credentials Manager
Único
E COMO FAZ?
<html>
+
.css{}
+
Js()
Show
me the
code!
Colocar gif adicionando a home screen
UAU!
Ai que burro...
E o usuário saberá disso?
O Google pensou nisso...
MAS SÓ NO
CHROME?
E no novo IE?
#case 1
https://sergiolopes.github.io/shopping/
#case 2
https://devcast.github.io/fila-de-espera/
FUTURO
#Imsoexcited
#sóvem
#Deusnocomando
#tamojunto
#tudoapp
OBRIGADO
@paolo_almeida
paoloaomeida.github.io

Mais conteúdo relacionado

Mais procurados

Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
Emerson Thompson
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
Renato Bongiorno Bonfanti
 
Master App - Porque menos é mais!
Master App - Porque menos é mais!Master App - Porque menos é mais!
Master App - Porque menos é mais!
Rodrigo Serradura
 
PROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEBPROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEB
Hebert Silva
 
PWA - Front in Floripa
PWA - Front in FloripaPWA - Front in Floripa
PWA - Front in Floripa
Luís Felipe Souza
 
Pwa (progressive web app)
Pwa (progressive web app)Pwa (progressive web app)
Pwa (progressive web app)
GeorgiaAntunes
 
Polymer Starter Kit
Polymer Starter KitPolymer Starter Kit
Polymer Starter Kit
Evaldo Barbosa
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
Gustavo Costa
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
 
Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]
Evandro Santos
 
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
Vinícius Lourenço
 
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
Leonardo Velozo
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
Rômulo Zoch
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
Diego Eis
 
Tchelinux: Go Web!
Tchelinux:  Go Web!Tchelinux:  Go Web!
Tchelinux: Go Web!
Lucas L.
 
Como Criar Um Blog
Como Criar Um BlogComo Criar Um Blog
Como Criar Um Blog
Paulo Henrique
 
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 ...
tdc-globalcode
 
FirefoxOS - a web como plataforma
FirefoxOS - a web como plataformaFirefoxOS - a web como plataforma
FirefoxOS - a web como plataforma
Guilherme Farias
 

Mais procurados (20)

Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
 
Master App - Porque menos é mais!
Master App - Porque menos é mais!Master App - Porque menos é mais!
Master App - Porque menos é mais!
 
PROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEBPROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEB
 
PWA - Front in Floripa
PWA - Front in FloripaPWA - Front in Floripa
PWA - Front in Floripa
 
Pwa (progressive web app)
Pwa (progressive web app)Pwa (progressive web app)
Pwa (progressive web app)
 
Polymer Starter Kit
Polymer Starter KitPolymer Starter Kit
Polymer Starter Kit
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]
 
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
 
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
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Tchelinux: Go Web!
Tchelinux:  Go Web!Tchelinux:  Go Web!
Tchelinux: Go Web!
 
Como Criar Um Blog
Como Criar Um BlogComo Criar Um Blog
Como Criar Um Blog
 
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 ...
 
FirefoxOS - a web como plataforma
FirefoxOS - a web como plataformaFirefoxOS - a web como plataforma
FirefoxOS - a web como plataforma
 

Semelhante a Progressive Web Apps

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?
Pedro Edson Silva Barros
 
O poder das Progressive Web Apps
O poder das Progressive Web AppsO poder das Progressive Web Apps
O poder das Progressive Web Apps
Pedro Edson Silva Barros
 
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
Thiago Colares
 
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
João Vitor Paes de Barros do Ca
 
Desenvolvimento Mobile Web & Software Livre
Desenvolvimento Mobile Web & Software LivreDesenvolvimento Mobile Web & Software Livre
Desenvolvimento Mobile Web & Software Livre
Bruno Fernandes "PorKaria"
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
Campus Party Brasil
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
Campus Party Brasil
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
Pedro Edson Silva Barros
 
Integração e entrega contínua de produtos? Que venha o eXtreme Programming!
Integração e entrega contínua de produtos? Que venha o eXtreme Programming!Integração e entrega contínua de produtos? Que venha o eXtreme Programming!
Integração e entrega contínua de produtos? Que venha o eXtreme Programming!
Daniel Wildt
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
Joelmir Ribacki
 
Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011
Bruno Fernandes "PorKaria"
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
Rafael Neri
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
INdT
 
Webapp já posso invistir nisso ? FISL12
Webapp já posso invistir nisso ? FISL12Webapp já posso invistir nisso ? FISL12
Webapp já posso invistir nisso ? FISL12
Bruno Fernandes "PorKaria"
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Henrique Dezani
 
Mobile Dev - Aplicativos
Mobile Dev - AplicativosMobile Dev - Aplicativos
Mobile Dev - Aplicativos
Alex Espirito Santo
 
Desenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHPDesenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHP
Bruno Fernandes "PorKaria"
 
iOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de AplicaçõesiOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de Aplicações
Rui Barroca
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
Renato Melo
 
Ux for Developers - Build Better Products
Ux for Developers - Build Better ProductsUx for Developers - Build Better Products
Ux for Developers - Build Better Products
Pedro Marques
 

Semelhante a Progressive Web Apps (20)

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?
 
O poder das Progressive Web Apps
O poder das Progressive Web AppsO poder das Progressive Web Apps
O poder das Progressive Web Apps
 
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
 
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
 
Desenvolvimento Mobile Web & Software Livre
Desenvolvimento Mobile Web & Software LivreDesenvolvimento Mobile Web & Software Livre
Desenvolvimento Mobile Web & Software Livre
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
 
Integração e entrega contínua de produtos? Que venha o eXtreme Programming!
Integração e entrega contínua de produtos? Que venha o eXtreme Programming!Integração e entrega contínua de produtos? Que venha o eXtreme Programming!
Integração e entrega contínua de produtos? Que venha o eXtreme Programming!
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
 
Webapp já posso invistir nisso ? FISL12
Webapp já posso invistir nisso ? FISL12Webapp já posso invistir nisso ? FISL12
Webapp já posso invistir nisso ? FISL12
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
 
Mobile Dev - Aplicativos
Mobile Dev - AplicativosMobile Dev - Aplicativos
Mobile Dev - Aplicativos
 
Desenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHPDesenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHP
 
iOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de AplicaçõesiOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de Aplicações
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
 
Ux for Developers - Build Better Products
Ux for Developers - Build Better ProductsUx for Developers - Build Better Products
Ux for Developers - Build Better Products
 

Último

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 

Último (7)

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 

Progressive Web Apps