PWA - Progressive Web App tornou-se uma alternativa para a dependência de desenvolvimento de aplicativos nativos, sempre tivemos duas plataformas que dominavam o mercado (iOS e Android), quando uma empresa quisesse criar uma aplicativo para sua empresa, precisava criar um para cada plataforma e depois publicar em cada loja (Play Store e App Store), com o uso do PWA o desenvolvimento torna-se híbrido, a empresa pode pegar seu site construído nas principais tecnologias de mercado, e seguindo um checklist poderá oferecer este website/sistema como se fosse um aplicativo sem precisar publicar em uma Play Store (tornar ele instalável, usando recursos do seu smartphone).
Cabe salientar que PWA está ganhando espaço cada vez mais no mercado, grandes empresa estão usando, algumas dela como Twitter, Uber, Tinder, Pinterest, Hulu, entre outras, não vou descrever aqui as vantagens ou desvantagens de cada desenvolvimento, apenas vou focar no uso desta tecnologia pode ser simples, neste artigo vou ensinar alguns passos para a mágica acontecer.
1 - O website/sistema tem que ter um certificado digital, rodar em HTTPS
Hoje é quase um requisito de segurança rodar em https, os navegadores informam uma mensagem "Não seguro" quando o site não está rodando em https, e outro beneficio hoje que os principais provedores de hospedagem já fornecem certificado de graça (Let’s Encrypt).
2 - O website/sistema tem que ser Responsivo
Para atender todas as plataformas, deve adaptar-se em todos os dispositivos móveis, confira nosso outro artigo sobre este assunto aqui.
3 - Criar um arquivo manifest.json
Neste arquivo terá algumas propriedades de configuração para seu PWA, você pode configurar todos os parâmetros necessários, confira na documentação aqui. Segue abaixo o exemplo que fizemos para nosso site.
{
"name": "Teraware Soluções em Software",
"short_name": "Teraware Soluções em Software",
"start_url": "https://portal.teraware.com.br",
"display": "standalone",
"theme_color": "#FFFFFF",
"background_color": "#F2A022",
"orientation": "portrait-primary",
"description": "Somos uma empresa de desenvolvimento de softwares sob medida. Atualmente trabalhamos em projetos de transformação digital focados em sistemas/softwares com empresas dos mais variados ramos de atividades, nosso princípio básico é desenvolver softwares adaptados ao processo de cada cliente, focado em desenvolver e entregar soluções tecnológicas.",
"icons": [{
"src": "assets/img/logo/logo-tw48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "assets/img/logo/logo-tw72x72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "assets/img/logo/logo-tw96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "assets/img/logo/logo-tw144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "assets/img/logo/logo-tw168x168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "assets/img/logo/logo-tw192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "assets/img/logo/logo-tw512x512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
4 - Testar seu website/sistema no Lighthouse
É uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web. Ele pode ser executado como extensão do Chrome, ela serve para informar os pontos que você precisa melhorar/implementar para sua PWA.
5 - Registrar Service Worker PWA
Para seu aplicativo funcionar quando o usuário estiver offline, você precisa registrar um Service Worker, o usuário terá a mesma experiência que um aplicativo nativo, você poderá deixar em cache/cópia das informações necessárias para seu funcionamento sem uma mensagem de offline.
Autor: Pedro Godinho - Linkedin
Fonte Link: https://web.dev/progressive-web-apps/
