Blogger - Como instalar um aplicativo Web de manifest.json

---

@CanalQb que Youtube 

---

---

Blogger - Como instalar um aplicativo Web de manifest.json

---

Como instalar um aplicativo da Web com manifest.json no Blogger

Com o desenvolvimento da tecnologia da Web moderna, é possível transformar um site ou blog em um aplicativo móvel nativo que pode ser instalado em dispositivos Android ou iOS. Uma maneira de fazer isso é usando um arquivo de manifesto JSON ou Manifesto de Aplicativo da Web.

Neste tutorial, explicarei como instalar um arquivo de manifesto JSON em um blog criado usando o Blogger. Dessa forma, os visitantes do seu blog poderão adicioná-lo à tela inicial de seus dispositivos, tornando-o mais acessível e parecido com um aplicativo nativo.

Crie um arquivo de manifesto JSON

O primeiro passo é criar um arquivo de manifesto JSON com informações sobre o seu blog. Abra um editor de texto como o Bloco de Notas ou o Notepad++ e cole o código abaixo:

{

  "name": "Título do Blog/Site",

  "short_name": "Título do blog/site",

  "description": "Descrição do blog/site",

  "lang": "pt",

  "dir": "ltr",

  "theme_color": "#007bff", // Defina uma cor de tema para a barra de endereço

  "start_url": "URL do blog/site",

  "background_color": "#ffffff", // Defina uma cor de fundo

  "display": "standalone",

  "orientation": "portrait-primary",

  "version": "1.0.0",

  "author": "Nome do autor",

  "icons": [

    {

      "src": "URL da imagem 36x36 (PNG)",

      "sizes": "36x36",

      "type": "image/png",

      "density": "0.75"

    },

    {

      "src": "URL da imagem 48x48 (PNG)",

      "sizes": "48x48",

      "type": "image/png",

      "density": "1.0"

    },

    // Adicione mais tamanhos de ícones conforme necessário

  ]

}

Edite o código marcado com as informações do seu blog, como título, descrição, cores e URLs.

Upa suas imagens para dentro do blogger, através de um post, e salve as URLs de cada imagem para alimentar o manifest.

Certifique-se de fornecer os URLs corretos das imagens de ícones em diferentes tamanhos.

Prepare as imagens de ícones para o Manifesto JSON

Se você não quiser criar várias imagens de ícones, pode usar serviços online como o Real Favicon Generator para gerar um pacote de ícones a partir de uma única imagem.

1. Acesse o site do Real Favicon Generator https://bit.ly/43LxMwU.

2. Faça o upload do seu logotipo e configure as opções disponíveis.

3. Clique em "Gerar seu favicon e código HTML" e baixe o pacote de ícones gerado.

Instale o Manifesto JSON no Blogger

Agora que você tem o arquivo de manifesto JSON e as imagens de ícones, é hora de instalá-lo no Blogger.

• Faça o upload do arquivo de manifesto JSON para um serviço de hospedagem, como GitHub ou um servidor próprio.
• Gere o link do arquivo usando o Githack https://raw.githack.com/ ou obtenha o link direto para o arquivo hospedado.
• Acesse o painel de controle do Blogger e vá para "Tema" > "Editar HTML".
• Procure pela tag `</head>` de fechamento do seu blog.
• Logo acima da tag `</head>`, adicione o seguinte código:

<!-- Link do Manifesto JSON -->

<link rel="manifest" href="URL do arquivo manifesto.json">

Substitua "URL do arquivo manifesto.json" pelo link do seu arquivo de manifesto JSON.

• Salve o modelo do Blogger.

Agora, o manifesto JSON está instalado no seu blog. Os visitantes podem adicionar o blog à tela inicial de seus dispositivos clicando no ícone de três pontos no canto superior direito do Chrome e selecionando "Adicionar à Tela Inicial". O ícone personalizado do seu blog será exibido na tela principal do dispositivo, proporcionando uma experiência mais próxima de um aplicativo nativo.

Lembrando que, embora isso torne o blog mais acessível em dispositivos móveis, ele não habilitará todas as funcionalidades de um Progressive Web App (PWA) completo, como funcionamento offline ou notificações push. Para isso, seria necessário utilizar um Service Worker, o que não é possível no Blogger.