Oi João, tudo bem?

Muito obrigada por compartilhar sua sugestão com a gente. Ela será encaminhada para a equipe responsável.

Também recomendo que a registre no nosso formulário de sugestões de cursos, para formalizar.

Sobre o site que o instrutor utiizou, ele não está mais funcionando como esperado. Por isso recomendamos esse aqui, que é similar e pode te ajudar a seguir com o projeto.

Agradecemos por ajudar a comunidade Alura a melhorar cada vez mais. Enquanto isso, se tiver dúvidas ou desafios nesse treinamento, conte com o apoio da equipe do fórum :)

Abraços e bons estudos!

Olá Rafaela. Obrigado pela resposta e atenção. Vou deixar abaixo uma possível solução para que ajude outros alunos, porém seria muito importante a equipe revisar e melhorar o curso para que o aluno não se sinta tão perdido.


PARTE 1 - Instalação:

Como Gerar Ícones e Manifest para PWA com Assets Generator

Passo 1: Instalação do PWA Assets Generator

npm install --save-dev pwa-asset-generator

npm install -g pwa-asset-generator


PARTE 2 - Preparação

Passo 2: Preparar a Imagem Base

1. Crie uma imagem quadrada (recomendado: 512x512px ou maior)
2. Formato PNG com fundo transparente
3. Salve na raiz do projeto ou em uma pasta específica
4. Exemplo: logo.png ou icon-base.png
   
   
   
   PARTE 3 - Comandos Básicos:
   

Passo 3: Gerar os Assets

Comando básico para gerar ícones e splash screens:

npx pwa-asset-generator logo.png public/icons

Comando mais completo com configurações personalizadas:

npx pwa-asset-generator logo.png public/icons --manifest public/manifest.json --index index.html --type png --quality 100

Para gerar apenas ícones (sem splash screens):

npx pwa-asset-generator logo.png public/icons --icon-only

Para gerar apenas splash screens:

npx pwa-asset-generator logo.png public/icons --splash-only


PARTE 5 - Comando Completo:

Passo 4: Configurações Avançadas

Comando com todas as opções recomendadas:

npx pwa-asset-generator logo.png public/icons --manifest public/manifest.json --index index.html --type png --quality 100 --padding "20%" --background "#ffffff" --opaque false

PARTE 6 - Explicações:

Parâmetros explicados:

• --manifest: Atualiza automaticamente o manifest.json
• --index: Atualiza o HTML com as meta tags
• --type png: Formato dos arquivos gerados
• --quality 100: Qualidade máxima
• --padding "20%": Espaçamento interno
• --background "#ffffff": Cor de fundo
• --opaque false: Manter transparência
  
  PARTE 7 - Script Personalizado:
  

Passo 5: Script Personalizado (Opcional)

Adicione no package.json um script personalizado:

  "generate-assets": "pwa-asset-generator logo.png public/icons --manifest public/manifest.json --index index.html --type png --quality 100"
}

Depois execute:

npm run generate-assets


PARTE 8 - Comandos Extras:

Dicas Extras

Para regenerar todos os assets:

npx pwa-asset-generator logo.png public/icons --manifest public/manifest.json --index index.html --type png --quality 100 --overwrite

Para diferentes tamanhos personalizados:

npx pwa-asset-generator logo.png public/icons --icon-size 192,512 --splash-size 1125x2436,1136x640

Dica importante: Sempre faça backup dos arquivos manifest.json e index.html antes de executar o comando, pois ele pode sobrescrever