desmistificando progressive web apps - pwa
TRANSCRIPT
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
