- 1. Introdução
- 2. Configuração do Manifesto e Ícone
- 3. Registro do Service Worker
- 4. Commit no GitHub
- 5. Extras
- 6. Contato
- 7. Nota
Um Progressive Web App (PWA) é um tipo de aplicação que oferece uma experiência similar à de um aplicativo nativo, mas funcionando diretamente no navegador. Ele é projetado para ser rápido, confiável e responsivo, proporcionando uma experiência mais interativa para os usuários, especialmente em dispositivos móveis.
- Acessibilidade offline: O PWA pode funcionar sem conexão com a internet, armazenando os dados no dispositivo.
- Experiência fluída: O uso de cache permite que o PWA seja carregado rapidamente.
- Instalação fácil: Ele pode ser "instalado" diretamente no dispositivo, sem a necessidade de passar pela loja de aplicativos.
O arquivo manifest.json é a chave para configurar um PWA. Ele contém informações sobre o aplicativo, como o nome, a URL de inicialização e os ícones a serem usados.
Aqui está um exemplo simples de como criar o manifesto:
{
"name": "Nome do seu aplicativo",
"short_name": "Nome curto do seu aplicativo",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{
"src": "/caminho/para/o/seu/icone-maskable.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
}
]
}Dicas:
- Substitua
"Nome do seu aplicativo"e"Nome curto do seu aplicativo"pelos nomes que representam o seu PWA. - Ajuste o caminho
"src"para apontar para o seu ícone "maskable".
O ícone "maskable" tem um formato que permite preencher completamente o espaço disponível, sem deixar bordas ou áreas vazias. Isso é útil para garantir que o ícone tenha um formato consistente em diferentes dispositivos.
- O ícone deve ser salvo em um tamanho adequado (ex: 512x512 pixels).
- Não se esqueça de usar a propriedade
"purpose": "maskable"no manifesto.
O Service Worker é um script essencial para o funcionamento offline do PWA. Ele permite o armazenamento em cache e o controle de recursos enquanto o aplicativo está offline. Para registrar o Service Worker, adicione o seguinte código ao seu arquivo HTML (por exemplo, index.html):
<!DOCTYPE html>
<html>
<head>
<!-- Seu código HTML normal aqui -->
<!-- Adicione este script para registrar o Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/caminho/para/o/seu/sw.js')
.then(registration => {
console.log('Service Worker registrado com sucesso!', registration.scope);
})
.catch(error => {
console.log('Falha ao registrar o Service Worker:', error);
});
});
}
</script>
</head>
<body>
<!-- Conteúdo do corpo do seu site aqui -->
</body>
</html>Certifique-se de substituir /caminho/para/o/seu/sw.js pelo caminho correto do seu arquivo sw.js.
Após realizar todas as modificações no seu projeto, faça o commit dos arquivos no seu repositório do GitHub. Isso garantirá que o seu PWA esteja configurado corretamente e pronto para ser usado pelos usuários.
Este projeto está licenciado sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- Feito por CanalQb no GitHub
- Visite o blog: canalqb.blogspot.com [https://canalqb.blogspot.com]
- 💸 Apoie o projeto via Bitcoin: 13Ve1k5ivByaCQ5yer6GoV84wAtf3kNava
- PIX: qrodrigob@gmail.com
Readme.md corrigido por ChatGPT
- {PWA}: Progressive Web App, um tipo de aplicativo da web que oferece uma experiência similar a um app nativo.
- {Service Worker}: Um script que ajuda a controlar o cache do seu aplicativo e funciona offline.
- {Manifesto}: Arquivo que define as configurações e propriedades do seu PWA, como nome, ícone e URLs.
Esse formato segue as instruções de estilo, incluindo:
- Emojis nos títulos para torná-los mais visuais e atrativos.
- Sumário com links clicáveis para facilitar a navegação.
- Explicações sobre termos técnicos em linguagem acessível e explicações claras no final do arquivo com a seção Nota.
Se precisar de mais alguma modificação ou esclarecimento, é só avisar!