Configuração PWA

O GCM é um Progressive Web App, o que significa que membros e equipe podem instalar na tela inicial do celular ou desktop e rodar como um app nativo — tela cheia, com ícone, e até com suporte offline nos planos Growth+. A página PWA App (barra lateral → PWA App) é onde você diz ao navegador como o app instalado deve parecer e se comportar.

Abrir a página PWA

Clique em PWA App na barra lateral. A página tem cinco cartões, de cima para baixo: Identidade do app, Ícone do app, Tema, Modo de exibição, Notificações push e Instalar app.

Identidade do app

Esses três campos populam o manifesto PWA, que o navegador lê ao oferecer "Instalar app".

Nome do app

O nome completo do app mostrado no prompt de instalação e (em algumas plataformas) sob o ícone da tela inicial. Padrão é o nome da sua organização. Mantenha abaixo de 45 caracteres ou fica truncado no Android.

Nome curto

A versão menor usada quando não há espaço para o nome completo — geralmente sob o ícone da tela inicial no iOS e Android. Padrão é a primeira palavra do nome da sua organização. Mire 12 caracteres ou menos.

Descrição

Uma descrição de um parágrafo do que o app faz. Mostrada em alguns diálogos de instalação de navegador. Opcional, mas ajuda membros a entender o que estão instalando.

Ícone do app

Dois tamanhos são obrigatórios: 192×192 e 512×512. Os dois devem ser PNGs (JPEG e WebP também são aceitos mas PNG renderiza com mais consistência entre lançadores).

Passos de envio:

1. Clique em Enviar abaixo do tamanho que quer definir.
2. Escolha uma imagem quadrada. O arquivo é enviado para o bucket pwa-icons da sua organização e a URL do manifesto atualiza imediatamente — sem passo de salvar separado para ícones.
3. Repita para o outro tamanho.

TIP

Use o mesmo design nos dois tamanhos — não tente colocar mais detalhe no 512 só porque há mais espaço. Lançadores exibem em tamanhos radicalmente diferentes (o 192 pode aparecer em 48px, o 512 em 256px), então um design único limpo que escala é o que você quer.

Limites de arquivo:

• Tamanho máximo: 2 MB por ícone.
• Aceitos: image/png, image/jpeg, image/webp.

Se você enviar uma imagem em formato errado, o lançador centraliza em um fundo colorido (sua cor de tema) — então um logo circular sobre fundo quadrado branco funciona bem, mas um logo horizontal aparece com bordas pretas.

Tema

Duas cores controlam o theme_color e background_color do manifesto.

Cor de tema

A cor que o sistema operacional usa para a barra de status (no Android) e a barra de título (em janelas de desktop instaladas). Escolha algo que combine com sua primária de marca — muitas igrejas só colam o mesmo código hex usado em Identidade visual → Cores.

Cor de fundo

A cor mostrada no breve momento entre tocar no ícone da tela inicial e o primeiro render do app. Se um membro vê um flash branco em cada cold start e isso te incomoda, defina a cor de fundo para sua primária para o flash ficar na marca.

Os dois campos aceitam um código hex e têm uma amostra de seletor de cores. Os valores salvam em app_settings sob pwa_theme_color / pwa_background_color.

Modo de exibição

Como o app instalado parece quando lançado. Três opções:

Modo	Comportamento
Standalone (padrão)	Parece app nativo — sem barras de navegador, seu ícone na barra de título. Melhor para a maioria das organizações.
Fullscreen	Tela cheia de verdade — sem barra de status, inclusive. Útil para tablets de check-in em quiosque.
Minimal UI	Mantém uma barra de URL fina estilo navegador no topo. Útil se membros precisam frequentemente copiar URLs de dentro do app.

Para 99% das organizações, Standalone é a escolha certa. Mude só se tiver motivo específico.

Notificações push

Ative Habilitar push se quiser que o app envie notificações web push para dispositivos instalados (Android e desktop — iOS suporta push só em PWAs instalados em iOS 16.4+).

Quando ativado:

• A primeira vez que um membro abre o app instalado, ele é solicitado a permitir notificações.
• Nós de fluxo de trabalho e lembretes podem mirar Push como canal.
• O campo vapid_public_key mostra a chave VAPID pública da sua organização (somente leitura) — provedores push usam para autenticar inscrições.

WARNING

O par de chaves VAPID é gerado no servidor na primeira vez que push é ativado. Está vinculado à sua organização permanentemente — se você um dia rotacionar, cada dispositivo instalado precisa reinscrever (membros são solicitados de novo). Não rotacione sem necessidade.

Instalar app

O último cartão mostra o próprio botão de instalar. Se seu navegador suporta beforeinstallprompt, o botão fica habilitado e você pode instalar o GCM como app direto desta tela.

Se o navegador não suporta o prompt programático (Safari no iOS não suporta), o cartão mostra instruções manuais — tipicamente "toque em Compartilhar, depois em Adicionar à tela inicial" para iOS, ou "abra o menu do navegador e selecione Instalar app" para Chrome desktop.

Uma vez instalado, o cartão detecta o modo standalone e mostra "O app já está instalado neste dispositivo" com um check verde — útil para confirmar que a instalação deu certo antes de guiar um membro.

O que é salvo onde

Todas as configurações PWA vão para app_settings com chaves pwa_*:

• pwa_app_name, pwa_short_name, pwa_description
• pwa_icon_192, pwa_icon_512 (URLs de armazenamento)
• pwa_theme_color, pwa_background_color
• pwa_display_mode
• pwa_push_enabled
• vapid_public_key (somente leitura, gerada no servidor)

O frontend lê isso no boot do app e escreve em /manifest.webmanifest para que o navegador veja os valores certos sem uma ida e volta extra.

Atualizar um app instalado

PWAs se atualizam automaticamente no próximo lançamento quando um novo build é implantado. Membros não veem prompt de atualização — o novo código simplesmente roda na próxima vez que abrirem o app. Se você mudou o ícone, membros podem precisar remover e reinstalar para ver o novo ícone na tela inicial (o lançador cacheia).

Armadilhas comuns

"Meu ícone está embaçado no iOS." iOS exige especificamente o 512×512. Se só o 192 está definido, iOS escala e fica borrado. Sempre envie os dois tamanhos.

"As notificações push nunca chegam." Duas coisas para checar: (1) push está habilitado aqui, E (2) o app instalado do destinatário foi aberto pelo menos uma vez no dispositivo-alvo com notificações permitidas. Inscrições push são por dispositivo-por-navegador — instalar no celular não dá push ao notebook.

"Mudei a cor de tema e a barra de status não atualizou." O sistema operacional lê a cor de tema na hora da instalação e cacheia. Reinstale o app no dispositivo afetado para pegar a nova cor, ou espere o próximo refresh de manifesto disparado pelo navegador (que pode levar dias).

Próximos passos

• Identidade visual — defina sua cor primária primeiro; reuse como tema PWA.
• Lembretes — o canal push pode disparar lembretes de evento.
• Canais — push aparece na lista de canais uma vez ativado.