PWA: Uma introdução

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

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

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

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.

Estado do GAP
Até quando?
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.

Responsivo - Se adequa a qualquer formato:
desktop, celular, tablet ou o que for inventado a
seguir.

Independente de conectividade - Aprimorado
com service workers para trabalhar off-line ou
em redes de baixa qualidade.

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.

Atual - Sempre atualizado graças ao processo
de atualização do service worker.

Seguro - Fornecido via HTTPS para evitar
invasões e garantir que o conteúdo não seja
adulterado.

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.

Reenvolvente - Facilita o reengajamento com
recursos como Push Notification.

Instalável - Permite que os usuários "guardem"
os aplicativos mais úteis em suas telas iniciais
sem precisar acessar uma loja de aplicativos.

Linkável - Compartilhe
facilmente por URL, não
requer instalação complexa.

Iniciando com os requisitos da feature
“Add To Home Screen”
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-Alternativas
https://github.com/joshbuchea/HEAD#browsers--platforms

https://github.com/GoogleChrome/pwacompat
http://realfavicongenerator.net
Manifest - Alternativas

ServiceWorker-Estratégias
Uma únicaestratégia nem sempre é a melhor!

ServiceWorker-Ferramentas
https://github.com/GoogleChrome/sw-precache
npm install --global sw-precache
sw-precache--config=sw-precache-config.js
sw-precache-config.js

ServiceWorker-Frameworks
ngsw-manifest.json
npm install –save-dev @angular/service-worker
ng set apps.0.serviceWorker=true
ng new project

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-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 – 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

PWA: Uma introdução

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a PWA: Uma introdução

Semelhante a PWA: Uma introdução (20)

PWA: Uma introdução

Notas do Editor