Slide 1
Slide 1 text
Construindo Progressive Web Apps
Slide 2
Slide 2 text
Roger Albino
rogeralbino.com.br
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Confiável
Slide 5
Slide 5 text
Rápido
Slide 6
Slide 6 text
Envolvente
Slide 7
Slide 7 text
Progressive
Web
App
Slide 8
Slide 8 text
PWA
Web
Slide 9
Slide 9 text
Apps Híbridos Não são
PWAs
Slide 10
Slide 10 text
Seguro (https)
Slide 11
Slide 11 text
Compartilhável
(via URL)
https://pokedex.org/
https://pokedex.org/#/pokemon/1
https://pokedex.org/#/pokemon/2
Slide 12
Slide 12 text
Encontrável
Slide 13
Slide 13 text
Responsivo
Slide 14
Slide 14 text
PWA
App
♥
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
App
• Câmera / Galeria de Fotos
• Microfone
• Geolocalização
• Contatos
• Bluetooth
• Outros…
• Push Notifications
• Icone de acesso
• Splash Screen
• Processos rodando em
Background (service
workers)
• Offline
Slide 17
Slide 17 text
É só Mobile?
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Meu PWA é instalável?
Slide 20
Slide 20 text
Add to Home-screen no
Android
https://developers.google.com/web/fundamentals/app-install-banners/?hl=pt-br
Slide 21
Slide 21 text
Add to Home-screen no
iOS
Slide 22
Slide 22 text
Add to Home-screen no
Desktop
Slide 23
Slide 23 text
Mas e as lojas de aplicativos?
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-store
Slide 27
Slide 27 text
Mas já tem tudo isso
funcionando?
Slide 28
Slide 28 text
PWA
Progressive
Slide 29
Slide 29 text
PWA
QR Code
Cod: 10346
Slide 30
Slide 30 text
PWA
Javascript
Slide 31
Slide 31 text
Independente da
conexão
Slide 32
Slide 32 text
Progressive
Web
App
Slide 33
Slide 33 text
Progressive
Web
App
Slide 34
Slide 34 text
Progressive
Web
App
Slide 35
Slide 35 text
PWA vs Nativo
Slide 36
Slide 36 text
Instalável
Nativo
Slide 37
Slide 37 text
Mais familiar
para o usuário
Nativo
Slide 38
Slide 38 text
Melhor uso
do hardware
Nativo
Slide 39
Slide 39 text
Mais rápido
(UI carregada quase
instantaneamente)
Nativo
Slide 40
Slide 40 text
Envolvente
(push notifications)
Nativo
Slide 41
Slide 41 text
Recursos que somente
APPs Nativas tem
Nativo
Slide 42
Slide 42 text
Nativo
Recursos que somente
APPs Nativas tem
Por enquanto…
Slide 43
Slide 43 text
PWA
O Poder da Web
Slide 44
Slide 44 text
O Mesmo código para
(web, iOS, android, desktop…)
PWA
Slide 45
Slide 45 text
Tecnologias que a gente
já conhece
(HTML, CSS e JS)
PWA
Slide 46
Slide 46 text
Com poderes que antes só
conseguíamos ter com APPs
nativas.
PWA
Slide 47
Slide 47 text
Testar o seu PWA
Lighthouse
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Alguns exemplos
interessantes
pwa.rocks
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
// index.html
...
...
Slide 54
Slide 54 text
// index.html
...
...
...
Slide 55
Slide 55 text
// index.html
...
...
...
...
Slide 56
Slide 56 text
// index.html
...
...
...
...
Slide 57
Slide 57 text
// index.html
...
...
...
...
Slide 58
Slide 58 text
...
...
// index.html
Slide 59
Slide 59 text
{
"name": “My PWA”,
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
// manifest.json
Slide 60
Slide 60 text
{
"name": “My PWA”,
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
// manifest.json
Slide 61
Slide 61 text
// index.html
...
...
Slide 62
Slide 62 text
// index.html
...
...
Slide 63
Slide 63 text
Service Workers
• Não acessa o DOM
• Roda em background (mesmo com o
APP fechado)
• Apenas um para várias abas do
navegador
• Exigem HTTPS (ou localhost)
• Só intercepta requests do mesmo
domínio
Slide 64
Slide 64 text
// app.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js')
.then(function() { console.log('Service
Worker Registered'); });
}
Slide 65
Slide 65 text
// service-worker.js
var dataCacheName = 'weatherData-v1';
var cacheName = 'weatherPWA-step-8-1';
var filesToCache = [
'/',
'/index.html',
'/scripts/app.js',
'/styles/inline.css',
'/images/clear.png',
'/images/cloudy-scattered-showers.png',
'/images/cloudy.png',
'/images/fog.png',
'/images/ic_add_white_24px.svg',
'/images/ic_refresh_white_24px.svg',
'/images/partly-cloudy.png',
'/images/rain.png',
'/images/scattered-showers.png',
'/images/sleet.png',
'/images/snow.png',
'/images/thunderstorm.png',
'/images/wind.png'
];
Slide 66
Slide 66 text
// service-worker.js
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app
shell');
return cache.addAll(filesToCache);
})
);
});
Slide 67
Slide 67 text
// service-worker.js
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
Slide 68
Slide 68 text
// service-worker.js
self.addEventListener('fetch', function(e) {
console.log('[Service Worker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
Slide 69
Slide 69 text
Frameworks
Slide 70
Slide 70 text
Angular
ng add @angular/pwa --project *project-name*
Slide 71
Slide 71 text
Vue.js
Slide 72
Slide 72 text
ReactJS with CRA (create-react-app)
// serviceWorker.unregister();
serviceWorker.register();
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/
workbox-sw.js');
Slide 75
Slide 75 text
workbox.routing.registerRoute(
// Cache CSS files
/.*\.css/,
// Use cache but update in the background ASAP
workbox.strategies.staleWhileRevalidate({
// Use a custom cache name
cacheName: 'css-cache',
})
);
Slide 76
Slide 76 text
workbox.routing.registerRoute(
// Cache image files
/.*\.(?:png|jpg|jpeg|svg|gif)/,
// Use the cache if it's available
workbox.strategies.cacheFirst({
// Use a custom cache name
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
// Cache only 20 images
maxEntries: 20,
// Cache for a maximum of a week
maxAgeSeconds: 7 * 24 * 60 * 60,
})
],
})
);
Slide 77
Slide 77 text
workbox.googleAnalytics.initialize();
Slide 78
Slide 78 text
No content