Transferir como PDF, PPTX
![// /js/sw.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/index.html',
'/js/app.js',
'/css/styles.css',
'/images/avatar/profile/01.jpg'
]);
})
);
});
VERSIONAMENTO DE CACHE](https://image.slidesharecdn.com/armazenamentos-offline-apis-para-pwa-170626021843/85/Armazenamentos-offline-ap-is-para-pwa-26-320.jpg)
![CACHE FIRST
npm i sw-precache -g
sw-precache
—config=precache-config.js
--verbose
USE SW-PRECACHE
module.exports = {
staticFileGlobs: [
'app/css/**.css',
'app/**.html',
'app/images/**.*',
'app/js/**.js'
],
stripPrefix: 'app/',
runtimeCaching: [{
handler: 'cacheFirst'
}]
};](https://image.slidesharecdn.com/armazenamentos-offline-apis-para-pwa-170626021843/85/Armazenamentos-offline-ap-is-para-pwa-40-320.jpg)
![{
"name": "Offline App Presentation",
"short_name": "OfflineAPp",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "Testing our Offline App Presentation",
"icons": [{
"src": “images/touch/icon-168.png",
"sizes": "168x168",
"type": "image/png"
}],
"related_applications": [{
"platform": "web"
}, {
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=offapp"
}]
}](https://image.slidesharecdn.com/armazenamentos-offline-apis-para-pwa-170626021843/85/Armazenamentos-offline-ap-is-para-pwa-43-320.jpg)
![self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification(
'Hello, World.', {
body: 'notification test!',
icon: '/images/icon-512x512.png',
image: '/images/body-notification.jpg',
vibrate: [
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450,
110, 200, 110, 170, 40, 500
],
sound: 'starWarsPing.mp3'
}
);
event.waitUntil(promiseChain);
});](https://image.slidesharecdn.com/armazenamentos-offline-apis-para-pwa-170626021843/85/Armazenamentos-offline-ap-is-para-pwa-51-320.jpg)
Carregado porEduardo Matos
Armazenamentos offline-ap is-para-pwa
1. O documento discute como criar aplicações progressivas para a web (PWA) que sejam confiáveis, rápidas e engajantes. 2. É explicado como usar caches e service workers para fornecer experiências offline e melhorar o desempenho. 3. Também são abordadas notificações push e manifestos da web para tornar as PWAs mais engajantes.
![[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...](https://cdn.slidesharecdn.com/ss_thumbnails/erickmelo-webjump-201023142336-thumbnail.jpg?width=640&height=640&fit=bounds)
![Progressive Web Apps [pt_BR]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170306202026-thumbnail.jpg?width=640&height=640&fit=bounds)
Armazenamentos offline-ap is-para-pwa
- 1. ARMAZENAMENTO OFFLINE APIS PARAPROGRESSIVE WEB APPS
- 2.
- 3. a maior plataformade contratação de serviços do Brasil
- 5. VAMOS FALAR SOBREINTERNET?
- 6.
- 7.
- 8. NETFLIX ISP SPEEDINDEX
- 9. 53% dos consumidoresperdem a paciência e desistem de acessar o site após apenas três segundos. A expectativa do consumidor (afirmação feita por 79% dos entrevistados) é de encontrar as informações que deseja instantaneamente. http://exame.abril.com.br/marketing/quer-posicionar-bem-a-marca-entao-de-um-jeito-no-seu-site-movel/
- 10. Mais da metadedeles (56%) preferem comprar em sites móveis ou apps que permitem salvar preferências— entre consumidores entre 18 e 34 anos, esse número sobe para 64%. http://exame.abril.com.br/marketing/quer-posicionar-bem-a-marca-entao-de-um-jeito-no-seu-site-movel/
- 11. 68% consideram 6segundos um tempo de carregamento aceitável, mas que até 3 segundos era o “ponto ideal”. https://www.tecmundo.com.br/apps/81635-paciencia-brasileiro-apps-lentos-dura-somente-3-segundos.htm
- 12. 3 segundos erao “ponto ideal”
- 14. COMO ISSO DEVERIA IMPACTARNOSSO DESENVOLVIMENTO?
- 15.
- 16. Progressive Web Appsé a experiência do usuário ao alcance da web sendo Confiável, Rápida e Engajante.
- 17. TÁ, E COMOFAZ?
- 18. CONFIÁVEL • Carrega quaseque instantaneamente; • Independe das condições de conexão com a internet; • Honestidade com relação à conectividade.
- 19. APPLICATION CACHE CACHE DEARQUIVOS NO BROWSER
- 20. <html manifest="manifest.appcache"> CACHE MANIFEST #version 1 CACHE: http://jsexperience2017.imasters.com.br/images/logo.jpg http://jsexperience2017.imasters.com.br/palestrantes/01.jpg http://jsexperience2017.imasters.com.br/palestrantes/02.jpg NETWORK: https://facebook.com/sdk.js FALLBACK: index.html offline.html
- 21.
- 22. if ('serviceWorker' innavigator) { navigator.serviceWorker.register('/js/sw.js') .then(reg => { if(reg.installing) { console.log('Service worker installing'); } else if(reg.waiting) { console.log('Service worker installed'); } else if(reg.active) { console.log('Service worker active'); } }).catch(error => { console.error('Registration failed with', error); }); };
- 23. navigator.serviceWorker.register('/js/sw.js') .then(reg => { reg.addEventListener('updatefound',() => { const newServiceWorker = reg.installing; newServiceWorker.addEventListener('statechange', () => { if (newServiceWorker.state == 'activated') { console.info('SW is active!'); } }) }); }) .catch(error => error)
- 25. CACHE API CACHE PROGRAMÁTICO DEARQUIVOS NO BROWSER
- 26. // /js/sw.js self.addEventListener('install', event=> { event.waitUntil( caches.open('v1').then(cache => { return cache.addAll([ '/index.html', '/js/app.js', '/css/styles.css', '/images/avatar/profile/01.jpg' ]); }) ); }); VERSIONAMENTO DE CACHE
- 28. ANTES DE SERVICE WORKERS DEPOISDE SERVICE WORKERS
- 29. INTERCEPTAÇÃO DE REQUEST QUALQUERREQUEST PASSA PELO EVENTO DE FETCH
- 30. self.addEventListener('fetch', event =>{ event.respondWith(caches.open('v1').then(cache => { return cache.match(event.request) .then(cached => { if (cached) return cached; throw new Error('No cache founded'); }) .catch(error => { return fetch(event.request) .then(response => { cache.put(event.request, response.clone()); return response; }).catch(error => caches.match('offline.html')); }) }) ); });
- 33. RÁPIDA • JavaScript performático; •Interações fluídas e com sensação de velocidade; • Cache First.
- 34. document.write( '<script src="https://js.com/script.js"></script>' ); JS PERFORMÁTICO https://developers.google.com/web/updates/2016/08/removing-document-write NOT •38% de redução em conexão 2G; • 21% de redução até o first paint;
- 35.
- 36. document.addEventListener('DOMContentLoaded', (event) =>{ navigator.geolocation.getCurrentPosition(success, error); Notification.requestPermission((result) => { resolve(result); }); }); EVITE JS PERFORMÁTICO https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/display-a-notification • Apenas use esses recursos quando o usuário precisar; • Exiba notificações somente quando necessário;
- 37. document.addEventListener( 'touchstart', onTouchStart, { passive: true}); INTERAÇÕES FLUÍDAS https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
- 38.
- 39. CACHE FIRST self.addEventListener('fetch', event=> { event.respondWith(caches.open('v1').then(cache => { return cache.match(event.request) .then(cached => { if (cached) return cached; //…
- 40. CACHE FIRST npm isw-precache -g sw-precache —config=precache-config.js --verbose USE SW-PRECACHE module.exports = { staticFileGlobs: [ 'app/css/**.css', 'app/**.html', 'app/images/**.*', 'app/js/**.js' ], stripPrefix: 'app/', runtimeCaching: [{ handler: 'cacheFirst' }] };
- 41. ENGAJANTE • Web AppManifest; • Push Notifications;
- 42. WEB APP MANIFEST <linkrel="manifest" href="/manifest.json">
- 43. { "name": "Offline AppPresentation", "short_name": "OfflineAPp", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "Testing our Offline App Presentation", "icons": [{ "src": “images/touch/icon-168.png", "sizes": "168x168", "type": "image/png" }], "related_applications": [{ "platform": "web" }, { "platform": "play", "url": "https://play.google.com/store/apps/details?id=offapp" }] }
- 46. window.addEventListener('beforeinstallprompt', function(e) { e.userChoice.then(function(choiceResult){ console.log(choiceResult.outcome); if(choiceResult.outcome == 'dismissed') { console.log('Sad, but user cancelled home screen install'); } else { console.log('Yes! User added to home screen'); } }); });
- 47. WEB APP MANIFEST •Ter um web app manifest com: • short_name (usado na home screen); • name (usado no banner de instalação); • um ícone png de 144x144; • “start_url” que o app é carregado. • Ter um service worker registrado em seu site; • Servido com HTTPS (pra usar Service Worker isso já é um requisito); • Foi visitado pelo menos duas vezes, em pelo menos 5 minutos entre as visitas CRITÉRIOS PRA EXIBIÇÃO DO BANNER DE INSTALAÇÃO DO WEB APP
- 48.
- 49. function askPermission() { returnnew Promise((resolve, reject) => { const permissionResult = Notification.requestPermission((result) => { resolve(result); }); if (permissionResult) { permissionResult.then(resolve, reject); } }) .then((permissionResult) => { if (permissionResult !== 'granted') { throw new Error('Fail on granted permission.'); } }); }
- 50. function subscribeUserToPush() { returngetSWRegistration() .then((registration) => { const subscribeOptions = { userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array( 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9- SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U' ) }; return registration.pushManager.subscribe(subscribeOptions); }) .then((pushSubscription) => { console.log('Received: ', JSON.stringify(pushSubscription)); return pushSubscription; }); }
- 51. self.addEventListener('push', function(event) { constpromiseChain = self.registration.showNotification( 'Hello, World.', { body: 'notification test!', icon: '/images/icon-512x512.png', image: '/images/body-notification.jpg', vibrate: [ 500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40, 500 ], sound: 'starWarsPing.mp3' } ); event.waitUntil(promiseChain); });
- 52.
- 53. TESTE A NOTADO SEU PWA
- 54. npm install -glighthouse lighthouse https://www.google.com TESTE A NOTA DO SEU PWA
- 55.
- 56.
- 57. PWA É PROGRESSIVO USE EABUSE PENSANDO QUE FOI FEITO PRA WEB TESTE SE AS API’S ESTÃO DISPONÍVEIS NO BROWSER
- 58.
- 59.
- 60.