Aula 6 - Prática PWA II

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração 
de Sistemas Móveis
Geraldo Gomes da Cruz Júnior
Pesquisador Especialista - Zup Innovation / Itaú
Gestão & Pesquisa - ISITICs
Professor - Fac. SENAC & UNINASSAU
D.r. em andamento em Inteligência Computacional - UFPE
M.e. em Modelagem e Inteligência Computacional - UFRPE
geraldoj8@gmail.com | http://lattes.cnpq.br/8427111818390371
Desenvolvimento e Integração de 
Sistemas Móveis
Prática PWA
II
mailto:geraldoj8@gmail.com
http://lattes.cnpq.br/8427111818390371
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Projetos Integradores
• Hoje: Prática PWA focada nos projetos do PI;
• Próxima Aula: Acompanhamento dos Projetos;
• Próxima próxima aula: Acompanhamento dos Projetos;
• Próxima próxima próxima aula: Apresentação dos Projetos!
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Como Desenvolver um PWA? 
● Service workers (Use Cache!) <3;
● Manifest;
● Icons;
● Https;
● Páginas responsivas;
● Url Inicial offline;
● Metadados para instalação home screen.
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Vamos Precisar de um Ícone...
https://appicon.co/
https://appicon.co/
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Como Montar um Service Worker?
PWA Builder
PWA.tools takes data from your site and uses that to generate 
cross-platform Progressive Web Apps
https://www.pwabuilder.com/
https://www.pwabuilder.com/
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Outra Ferramenta para Ajudar no Manifest?
App Manifest
https://app-manifest.firebaseapp.com/
The Web App Manifest is a JSON document that provides application
metadata for Progressive Web Apps. You can use the form to generate
the JSON file and optionally upload an app icon.
https://app-manifest.firebaseapp.com/
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
O que Posso Fazer a Mais?
Iframes: https://www.youtube.com/
https://www.youtube.com/
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
O que Posso Fazer a Mais?
Iframes: https://www.google.com/maps
https://www.google.com/maps
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
O que Posso Fazer a Mais?
Google My Maps: https://www.google.com/maps/d/u/0/?hl=pt-BR
https://www.google.com/maps/d/u/0/?hl=pt-BR
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
O que Posso Fazer a Mais?
• <a href="https://www.mozilla.com">Mozilla</a>
• <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
• <a href="tel:+49.157.0156">+49 157 0156</a>
• <a href="" download="my_painting.png">Download my painting</a>
• <a href="geo:37.786971,-122.399677;u=35">open map</a>
• <a 
href="sms://+14035550185?body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20
me.">Send a SMS message</a>
• https://wa.me/15551234567?text=I'm%20interested%20in%20your%20car%20for%20sale
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
O que Posso Fazer a Mais?
https://whatwebcando.today/
What Web Can Do?
Can I rely on the Web Platform features to build my app?
An overview of the device integration HTML5 APIs
https://whatwebcando.today/
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Prática II
O desafio aqui é construir uma 1ª versão do PWA do seu PI!
1º Formem times de até 3 pessoas! - “Ah, mas meu PI são 5 pessoas”, então um time de 3 e um time de 2 pessoas...;
2º Pensem/façam um esboço do que vão querer implementar como PWA. “Ah, mas meu PI será em React!”, sem problemas,
aqui é só uma prática de PWA, então independente da tecnologia do PI, você terá que fazer essa entrega ;)
3º Caso deseje, pode utilizar algum template como referência;
4º Garanta que seu projeto está responsivo, com manifest.json e servisse-worker.js alinhados;
5º Utilize recursos do HTML 5 para enriquecer o seu projeto (Links para e-mail, contato, endereço, sms, iframes..);
6º Utilize algum recurso do (https://whatwebcando.today/);
7º Otimize as suas imagens (https://www.iloveimg.com/compress-image/compress-png);
8º Crie o ícone do seu projeto e o gere em diferentes tamanhos (https://appicon.co/);
9º Suba seu projeto no Netlify e rode uma auditoria do lighthouse/Audits para verificar o que falta para se tornar um PWA;
10º Utilize o PWA Builder (https://www.pwabuilder.com/) ou o projeto disponibilizado no classroom para lhe ajudar como
referência;
11º Audite seu projeto no lighthouse/Audits para verificar se já está sendo considerado um PWA, se não, corrija!
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
O que Devemos Reter?
• Como desenvolver um PWA;
• Práticas PWA.
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Ata
Nome, Telefone e E-mail! 
Por favor ;)
Prática PWA
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração de 
Sistemas Móveis
Dúvidas ou Sugestões?
“O maior erro que você pode cometer, é o de ficar o tempo
todo com medo de cometer algum erro.” - Elbert Hubbard
?
?
?
https://www.pensador.com/autor/elbert_hubbard/
Prof. Geraldo Gomes
geraldoj8@gmail.com | geraldogjunior@fac.pe.senac.br
Desenvolvimento e Integração 
de Sistemas Móveis
Geraldo Gomes da Cruz Júnior
Pesquisador Especialista - Zup Innovation / Itaú
Gestão & Pesquisa - ISITICs
Professor - Fac. SENAC & UNINASSAU
D.r. em andamento em Inteligência Computacional - UFPE
M.e. em Modelagem e Inteligência Computacional - UFRPE
geraldoj8@gmail.com | http://lattes.cnpq.br/8427111818390371
Desenvolvimento e Integração de 
Sistemas Móveis
Prática PWA
II
Por hoje é isso...
Obrigado pela Atenção!
mailto:geraldoj8@gmail.com
http://lattes.cnpq.br/8427111818390371