desmistificando progressive web apps - pwa

Stefan Horochovec• Co-Founder e Chief Technology Officer

Kepha – Digital Business Experts

• Co-Founder e Arquiteto de SoluçõesPreviseme – HelpDesk

• Especialista em Engenharia de Software e Gestão de Projetos;

• Instrutor/Professor/Palestrante/Autor;

• Twitter: @horochovec• Github: @horochovec• Blogs: http://www.horochovec.com.br/

2016

2017

Cenário Mobile

Número de usuários (milhões)

0

500

1000

1500

2000

2500

2007 2008 2009 2010 2011 2012 2013 2014 2015

Mobile x Desktop

Mobile Desktop

Source: comScore Mobile Metrix, June 2015

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

de TODO tempo gasto em um smarphone é utilizando até 5 aplicativos

Progressive Web Apps

Aplicações via browser• Cross-Platform x Cross-Browser;

• Deploy Facilitado;

• Atualização facilitada;

• Disponível para mecanismos de pesquisas (aka Google);

• Compartilhamento de Links de forma rápida;

• Possibilidade de Bookmarks – “Talvez”;

Cenário Atual – Aplicativos• Descobrir que o aplicativo existe na Loja Virtual ou clicar em um link no rodapé

de um website que você já está navegando;

• Efetuar o download (2G, 3G, 4G, Wi-Fi, Lie-Fi, etc);

• Se cadastrar quando necessário;

• Visualizar praticamente a mesma coisa que você já estava visualizando....

• Compartilhar conteúdo via print-screen em redes sociais, ou integrações com novos privilégios;

Cenário ”Esperado”• Não ter a necessidade de instalar MAIS um aplicativo em seu device;

• Aplicações Web com maior responsividade;

• Segurança nas informações;

• Independência de conexão - Suporte off-line;

• Always updated;

• SEO-friendly;

• Compartilhamento de conteúdo (Links);

Grandes vantagens de Apps• Ícone na Home-screen – “Talvez ?”;

• Splash Screen – Agregando valor a marca;

• Suporte off-line – “Nem sempre....”;

• Push Notification;

• Acesso ao hardware do dispositivo;

Como reverter as grandes vantagens de uma aplicação

instalada via Loja Virtual?

Progressive Web Apps X Aplicações Nativas• Permite instalação no device através de seu navegador;

• Funciona perfeitamente bem sem conexões ou com conexões lentas;

• Push Notifications;

• Splash Screens;

• Renderização em 60fps;

• Segurança garantida pois só funciona via httpS;

OK! Como eu faço isso?!?

Receita para uma Progressive Web App• Application Shell;

• App Manifest;

• Service Workers;

• httpS;

App Manifest• Arquivo de configuração escrito em JSON;

• Responsável por configurar:• Nome do aplicativo na home;

• Iconografia;

• SplashScreen;

• Theme Color;

• Full Screen;

• Orientação da tela;

App Manifest{

"name": "Nome do aplicativo", "short_name": "Nome reduzido", "icons": [{

”src": "images/icons/icon-128x128.png","sizes": "128x128","type": "image/png”

}],"start_url": "/index.html", "display": ”fullscreen", "background_color": "#3E4EB8", "theme_color": "#2F3BA2”

}

Service Workers• Javascript que é executado em background no dispositivo móvel;

Registro Service Worker<script>if ('serviceWorker' in navigator) {

navigator.serviceWorker.register(’service-worker.js’, {scope: ’/’

}).then(() => console.log('service worker instalado')).catch(err => console.log('Erro', err));

}</script>

Event Listeners - installthis.addEventListener('install', function(event){

event.waitUntil(caches.open('tdc-first-cache').then(function(cache) {

return cache.addAll(['./build/main.js', './build/main.css’

]); }).then(function() {

console.log('Service worker ativo, e cache pré-definido');})

);});

Event Listeners - activatethis.addEventListener('activate', function(event) {

console.log('[ServiceWorker] Activate');event.waitUntil(

caches.keys().then(function(keyList) {return Promise.all(keyList.map(function(key) {

if (key !== 'tdc-first-cache') { console.log('[ServiceWorker] Removido', key);return caches.delete(key);

}}));

}));

});

Event Listeners – fetch (Requisições HTTP)this.addEventListener(’fetch', function(event){

event.respondWith(caches.match(event.request).then(function(response) {

return response || fetch(event.request); })

);});

Notificationsif ('Notification' in window) {

Notification.requestPermission(function(result) { console.log('Notification status: ', result)

});

if (Notification.permission == 'granted’) {navigator.serviceWorker.getRegistration().then(function(registration) {

var message = { body : 'Mensagem do corpo',

} registration.showNotification('Teste', message);

}); }

}

Notifications

HTTPS

Confiável Integridade Privacidade

Progressive Web Apps

Experiência do usuário

Confiável Rápida Envolvente

Experiência do usuário

Confiável

Experiência do usuário

Rápida

53% dos usuários abandonam um site que demora mais que 3 segundos para carregar

Experiência do usuário

Envolvente

• Ícone na home-screen;• Full-screen;• Themas;• Orientação;• Notificações;

Konga.com

stefan@kepha.com.br