Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

PWA - Instalação da app com manifest

Referente ao curso Progressive Web Apps: crie apps offline, no capítulo O futuro das PWAs e atividade Código do projeto completo

por Jefferson Mariano de Souza
| 453k xp | 93 posts
Desenvolvedor Senior / Tech Lead

Prezados,

estou tentando adicionar a aplicação à homescreen, como exibido no vídeo, porém estou com problemas referentes a imagem...

Segui todos os passos, criando um manifest com o seguinte conteúdo:

{
    "name": "Ceep",
    "start_url": "./",
    "display": "standalone",
    "icons": [ 
        {
            "src": "img/caelum-logo-256.png",
            "sizes": "256x256",
            "type": "img/png"
        }
    ]
}

O manifest está na raiz, declarado no html como <link rel="manifest" href="app.manifest">

Porém, ao clicar em Add to homescreen em Application > Manifest (no developer tools do chrome), é exibido o seguinte erro no console:

Site cannot be installed: a 144px square icon is required, but no supplied icon meets this requirement

Estou utilizando a mesma imagem do repositório da caelum (https://raw.githubusercontent.com/alura-cursos/ceep-pwa/final/img/caelum-logo-256.png)

Isso aconteceu com mais alguém? Tentei com outras imagens de tamanhos variados (todas com mais de 144px) e deu o mesmo erro.

5 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Jefferson, tudo bom?

Realmente o problema é que você precisa ter cadastrado a versão de 144px do ícone no manifest e ele precisa ter exatamente esse tamanho.

As PWAs, precisam de alguns tamanhos padrões como 168x168, 48x48... Além do de 144px e gerar tudo isso na mão da um trabalhão.

Uma dica que eu posso dar é esse site: http://realfavicongenerator.net/

Nele você sobe um ícone grande de 600x600, define algumas configurações do próprio comportamento de app da sua PWA e no final ele gera um arquivo zip, com um manifest configurado e com ícones já gerados "automagicamente" para serem importados nas diversas versões que você pode vir a precisar.

por Jefferson Mariano de Souza
| 453k xp | 93 posts
Desenvolvedor Senior / Tech Lead

Consegui fazer o erro parar de ser lançado no console ao tentar instalar a app, porém não consigo instalá-la... eu clico em Add to homescreen no chrome, porém agora nada acontece...

Tem algum passo específico para funcionar?

Outra dúvida: Quando for instalada, a partir de onde ela pode ser acessada? Fica na página de apps do chrome (chrome://apps/)?

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Jefferson, quando você clica em adicionar para a Home Screen, não aparece um pop-up com o nome da página?

Uma coisa que você pode fazer é checar na tela inicial do celular se foi adicionado o ícone do seu projeto.

Respondendo outra dúvida: Ela não fica como um app do chrome, ela fica na tela inicial do celular.

por Jefferson Mariano de Souza
| 453k xp | 93 posts
Desenvolvedor Senior / Tech Lead

Mario, eu estou testando no browser em meu laptop... essa parte só funciona em celular? Se sim, talvez seja esse o problema...

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Jefferson, acredito que o problema seja esse mesmo então. Com relação a funcionalidade no desktop é algo meio recente, algumas vezes eu consegui testar e o aplicativo aparecia na parte de apps do chrome (chrome://apps/).