|
Site - SEO Resolvendo Maskable | |
| @CanalQb | ||
Como resolver esse problema
Para resolver problemas relacionados ao uso de ícones maskable em PWA (Progressive Web Apps) no Blogger, você precisará de dois arquivos e um local para hospedar esses arquivos externamente, já que o Blogger não permite hospedagem direta.
Utilizarei uma conta no GitHub, mas você pode escolher outra plataforma de hospedagem em nuvem que preferir ou que seja mais viável para seu caso.
Este guia não inclui a criação de contas ou explicações detalhadas sobre hospedagem; isso pode ser abordado em outro tópico. Tenha em mente que é necessário um local em nuvem para armazenar os arquivos.
A primeira coisa é criar o arquivo manifest.json
O arquivo manifest.json é um arquivo de configuração que define informações básicas do PWA, incluindo o ícone a ser exibido na tela inicial do dispositivo. O manifesto deve estar na raiz do seu projeto para ser corretamente identificado pelo navegador.
Segue um exemplo de conteúdo para o arquivo manifest.json:
{
"name": "Nome do seu aplicativo",
"short_name": "Nome curto do seu aplicativo",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{
"src": "http://caminho/para/o/seu/icone-maskable.png",
"type": "image/png",
"sizes": "320x320",
"purpose": "maskable"
}
]
}
Substitua "Nome do seu aplicativo", "Nome curto do seu aplicativo" e o caminho do ícone ("http://caminho/para/o/seu/icone-maskable.png") pelos valores correspondentes ao seu projeto e pela URL correta do seu ícone maskable hospedado.
A segunda parte é criar um arquivo ICO chamado Maskable
O ícone "maskable" é um ícone especialmente criado para preencher todo o espaço disponível no formato do ícone, evitando áreas em branco nas bordas. Isso proporciona uma aparência mais uniforme e profissional ao instalar o aplicativo em diferentes dispositivos.
Garanta que o ícone maskable esteja disponível no caminho especificado no manifest.json. Salve o ícone com as dimensões recomendadas (por exemplo, 512x512 pixels) e inclua a propriedade "purpose": "maskable" no manifesto.
Para criar um ícone maskable conforme as especificações atuais, você pode utilizar a ferramenta oficial: https://bit.ly/43RMBy7
Registro do Service Worker na sua página HTML
Para que o PWA funcione corretamente, é necessário registrar um Service Worker, um script que gerencia o cache e permite funcionalidades offline. Inclua o script de registro do Service Worker na seção <head> do seu arquivo HTML principal (por exemplo, index.html):
<!-- Adicione este script para registrar o Service Worker -->
<link rel="manifest" href="/caminho/para/manifest.json">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('http://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>
Substitua http://caminho/para/o/seu/sw.js pelo endereço correto onde seu Service Worker estará hospedado.
Criando o arquivo Service Worker (sw.js)
Abra um editor de texto (como Bloco de Notas, Visual Studio Code ou Sublime Text) e crie um arquivo chamado sw.js.
O conteúdo básico do sw.js pode seguir este exemplo simplificado, adaptando os caminhos conforme sua estrutura:
const CACHE_NAME = 'meu-cache-v1';
const CACHE_FILES = [
'/index.html',
'/styles.css',
'/script.js',
'/imagem.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(CACHE_FILES);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});
Atualize o array CACHE_FILES para incluir os arquivos e recursos estáticos que deseja armazenar em cache no seu PWA, como o arquivo HTML principal, folhas de estilo, scripts e imagens.
Depois de criar e configurar o arquivo sw.js, faça o upload para a pasta do seu projeto na plataforma de hospedagem (como GitHub) e atualize o link no script de registro do Service Worker no seu HTML para o caminho correto.
Este processo garantirá que seu PWA funcione corretamente no Blogger, aproveitando os recursos de cache offline e a integração do manifest para melhorar a experiência do usuário.