Site - SEO Resolvendo Maskable - Não funciona para Blogger
|
Site - SEO Resolvendo Maskable | |
| Canal Qb | ||
Como resolver esse problema
Precisamos de 2 arquivos e um local para hospedar, no meu caso como é Blogger, preciso fazer isso externamente.
Vou usar uma conta no Github https://github.com/, você pode escolher onde achar melhor ou mais viavel.
Eu não vou ensinar a criar uma conta, nem como hospedar, isso pode ficar para outro topico, mas tenha em mente que você precisa de uma pasta em nuvem.
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 ser colocado na raiz do seu projeto.
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"}]}
Certifique-se de substituir "Nome do seu aplicativo", "Nome curto do seu aplicativo" e "/caminho/para/o/seu/icone-maskable.png" pelos valores relevantes para o seu aplicativo e pelo caminho correto para o ícone "maskable".
A segunda parte é criar um arquivo ICO chamado Maskable
O ícone "maskable" é um ícone projetado para preencher todo o espaço disponível no formato do ícone, sem deixar espaços em branco nas bordas. Isso proporciona uma aparência mais consistente e agradável ao instalar o aplicativo em diferentes dispositivos.
Certifique-se de que o ícone "maskable" esteja disponível no caminho especificado no manifesto. Salve o ícone com as dimensões corretas (por exemplo, 512x512 pixels) e inclua a propriedade "purpose" definida como "maskable".
Crie um Maskable de acordo com as regras atuais: https://bit.ly/43RMBy7
Registro do Service Worker na sua pagina HTML
Para que o PWA funcione corretamente, é necessário registrar um Service Worker, que é um script que permite o armazenamento em cache e outras funcionalidades offline. Certifique-se de incluir 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>
Criando o Service Worker JS
Abra um editor de texto (como o Bloco de Notas, Visual Studio Code, Sublime Text, etc.) e crie um novo arquivo chamado sw.js.
O conteúdo do arquivo sw.js deve ser algo parecido com isso:
<!-- Adicione este script para registrar o Service Worker --><link href='https://raw.githubusercontent.com/canalqb/manifest/main/manifest.json' rel='manifest'/><script>// <![CDATA[if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('https://raw.githubusercontent.com/canalqb/manifest/main/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>
Passo 2: Atualize o Caminho para os Recursos em Cache
No arquivo sw.js, certifique-se de atualizar o array CACHE_FILES com os caminhos dos recursos que você deseja armazenar em cache. Isso normalmente inclui o arquivo principal do seu aplicativo (por exemplo, index.html) e outros recursos estáticos, como folhas de estilo, scripts e imagens.
Passo 3: Salve o Arquivo e Adicione ao Seu Repositório
Após criar o arquivo sw.js e atualizá-lo com os caminhos corretos para os recursos em cache, salve o arquivo e adicione-o à pasta do seu projeto no GitHub. Certifique-se de fazer um commit das alterações no seu repositório para que o Service Worker seja incluído no seu PWA.
Nenhum comentário
Comente só assim vamos crescer juntos!
Observação: somente um membro deste blog pode postar um comentário.