Baixar para ler offline
![service-worker.js
var cacheVersion = 'pedro01';
self.addEventListener ('install', function (event) {
});
console .log('[SW] Install' );
event.waitUntil(
);
caches.open(cacheVersion )
.then(function (cache) {
console .log('[SW] Carregando application shell' );
return cache.addAll(filesToCache );
})
var filesToCache = [
"index.html" ,
"css/materialize.css" ,
"css/style.css" ,
"js/init.js" ,
"js/materialize.js"
];
self.addEventListener ('activate', function (event) {
});
console .log('[SW] Activate' );
event.waitUntil(
);
caches.keys().then(function (keyList) {
return Promise.all(keyList.map(function (key) {
}));
})
if (key !== cacheVersion ) {
console .log('[SW] Removendo cache antigo' , key);
return caches.delete(key);
}
self.addEventListener ('fetch', function (event) {
});
console.log('[SW] Fetch' , event.request.url);
event.respondWith (
caches.match(event.request).then(function (response) {
return response
})
);Application Shell
|| fetch(event.request);
Offline First](https://image.slidesharecdn.com/opoderdaspwas-arahackerday-190710234531/85/O-poder-das-Progressive-Web-Apps-32-320.jpg)
Carregado porPedro Edson Silva Barros
O poder das Progressive Web Apps
O documento discute as Progressive Web Apps (PWAs) e seus benefícios. Ele descreve como as PWAs podem fornecer uma experiência semelhante à de um aplicativo nativo usando tecnologias da web como service workers e o manifesto da web app. Exemplos de empresas que tiveram sucesso com PWAs são apresentados, mostrando melhorias como maior tempo de uso do site, taxa de reengajamento e menor uso de dados.
![[MTC 2021] Regressão visual com applitools, appium e amazon aws device farm -...](https://cdn.slidesharecdn.com/ss_thumbnails/regressovisualcomapplitoolsappiumeamazonawsdevicefarm-luiseduardopinheiropedrosa-210804112837-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)
O poder das Progressive Web Apps
- 1. O poder das PROGRESSIVEWEB APPS Pedro Barros
- 2.
- 3. Pedro Barros -21 anos Maceió/AL ● Desenvolvedor em Unimed Maceió; ● Formado Técnico em Informática; ● Graduado em Análise e Desenvolvimento de Sistemas; ● Pós-graduando em Engenharia de Software. Redes sociais pedroebarros ped.barros pedbarros pedbarros
- 4. O design responsivoindica uma técnica de design web para a criação de sites capazes de se adaptar automaticamente ao dispositivo com o qual eles são exibidos (computadores com diferentes resoluções, tablets, smartphones, telefones celulares, web tv ), minimizando a necessidade do usuário redimensionar e percorrer o conteúdo. https://it.wikipedia.org/wiki/Design_responsivo
- 10. Qual o cenárioatual? ● Buscar o app na Loja Virtual ou clicar em um link no rodapé de um website que você já está navegando; ● Verificar se tem espaço no smartphone; ● Efetuar o download (2G, 3G, 4G, Wi-Fi, etc); ● Iniciar o processo de instalação; ● Cadastrar quando é necessário; ● Utilizar praticamente a mesma coisa que estava utilizando...; ● Compartilhar conteúdo via print-screen em redes sociais.
- 11. 80%de TODO tempogasto em um smartphone é utilizando até 5 apps 66% 57,5% 32,4% 20,4% 12,3% Julho 2017
- 12. De acordo como Comscore Mobile App Report, mais de 50% dos usuários de smartphones da América, não baixam nenhum aplicativo por mês. Isso significa, que o tempo em que nosso telefone costumava ser preenchido com aplicativos está desaparecendo lentamente! https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report
- 13. Qual seria ocenário dos meus sonhos? ● Acabar com a instalação dos aplicativos nos devices; ● Aplicativos web com uma experiência agradável; ● Segurança dos dados; ● Suporte Offline ● Sempre atualizado; ● Utilização de links para compartilhar conteúdo.
- 14. Progressive Web Appusa a modernidade da web possibilitando uma experiência de um aplicativo nativo. Addy Osmani - Engineering Manager at Google
- 15. Jobs já tinhauma visão desde 2007... Vocês já tem tudo o que precisam se querem saber como desenvolver aplicativos para o iPhone hoje: basta usar os padrões modernos da web.
- 16. As PWAs sãoformadas por: ● API abertas da WEB; ● Service Workers; ● Web Manifest; ● Boas práticas (acessibilidade, UX, responsividade, performance, etc).
- 17.
- 18. PWA ● Instaláveis ● Responsivo ●Visual Appficado ● Offline ● Seguro (https) ● Indexável ● Linkável ● Features: ○ Splash Screen ○ Push Notification ○ Geolocation ○ BackgroundSync ○ Vibration
- 19. Service Workers ● Éum script que seu navegador executa em segundo plano; ● Tem um ciclo de vida totalmente separado da página da Web; ● É baseado em código JavaScript puro; ● Interceptar requisições; ● Controle do cache; ● Trabalhar Offline.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Flipkart ● Maior e-commerceda Índia; ● 400% a mais tempo utilizando o site (PWA); ● 3x mais tempo gasto no site ● 40% maior taxa de reengajamento ● 3x menor uso de dados https://developers.google.com/web/showcase/2016/flipkart
- 26. Konga ● Um sitede comércio eletrônico líder na Nigéria ● 92% a menos no gasto dos dados móveis para carregar a tela inicial; ● 82% a menos no gasto dos dados móveis para concluir a primeira transação; https://developers.google.com/web/showcase/2016/konga
- 27.
- 28.
- 30. Navegadores que não suportamService Workers simplesmente não saberá de sua existência
- 31. Mais simples quedormir... if ('serviceWorker' in navigator) { } navigator.serviceWorker .register('/service-worker.js') .then(function (retorno) { console.log('Sucesso!'); }) .catch(function (error) { console.log('Error:'+ error); });
- 32. service-worker.js var cacheVersion ='pedro01'; self.addEventListener ('install', function (event) { }); console .log('[SW] Install' ); event.waitUntil( ); caches.open(cacheVersion ) .then(function (cache) { console .log('[SW] Carregando application shell' ); return cache.addAll(filesToCache ); }) var filesToCache = [ "index.html" , "css/materialize.css" , "css/style.css" , "js/init.js" , "js/materialize.js" ]; self.addEventListener ('activate', function (event) { }); console .log('[SW] Activate' ); event.waitUntil( ); caches.keys().then(function (keyList) { return Promise.all(keyList.map(function (key) { })); }) if (key !== cacheVersion ) { console .log('[SW] Removendo cache antigo' , key); return caches.delete(key); } self.addEventListener ('fetch', function (event) { }); console.log('[SW] Fetch' , event.request.url); event.respondWith ( caches.match(event.request).then(function (response) { return response }) );Application Shell || fetch(event.request); Offline First
- 34. E PARA DAR“O ROSTO” DE UM APP?
- 35. Web App Manifest Simples,simples, simples...
- 36. Seu amigo “Lighthouse” npminstall -g lighthouse lighthouse https://arahackerday-4ca60.firebaseapp.com
- 37. Agilize seu tempocom o Web App Manifest Generator https://app-manifest.firebaseapp.com/
- 38. Deixe os carasfazerem por você https://www.pwabuilder.com/
- 39.
- 42.
- 43.
- 44.
- 45. PWA é “só”WEB e mobile?
- 46. Elas estão desbravandotudo! https://maps.google.com?force=pwa
- 47. O que vocêestá esperando?
- 48. Referências ● https://developers.google.com/web/progressive-web-apps/ ● https://medium.com/tableless/introdu%C3%A7%C3%A3o-aos-pr ogressive-web-apps-ad47ba24cddb ●https://jakearchibald.github.io/isserviceworkerready/ ● https://brasil.uxdesign.cc/o-que-s%C3%A3o-progressive-we b-apps-86e1b5306051 ● https://en.wikipedia.org/wiki/Progressive_web_app
- 50. Perguntas O que asPWAs são compostas? R: API abertas da WEB; Service Workers; Web Manifest; Boas práticas (acessibilidade, UX, responsividade, performance, etc). Qual o principal objetivo das PWA? R: Garantir uma ótima usabilidade para os usuários, podendo que o mesmo possa sentir está dentro de uma aplicação nativa, mas utilizando o melhor da web.
- 51. Perguntas O que acontecese o navegador não suportar os Service Workers? R: Não afetará em nada, eles simplesmente não irão usufruir do seu “poder”. Cite 03 características de uma PWA R: Instaláveis Linkável Offline Responsivo Visual Appficado Seguro (https) Indexável
- 52. Perguntas Para que serveo Web App Manifest? R: Fornecer informações sobre o aplicativo, propiciando aos usuários um acesso mais rápido e uma experiência enriquecida.