Como Criar uma Aplicação Web Adaptada a Telemóveis

Uma aplicação web adaptada a telemóveis é um site que funciona como uma aplicação num telemóvel: encaixa no ecrã estreito, tem alvos de toque grandes, carrega depressa em dados móveis e pode ser adicionada ao ecrã inicial como aplicação web progressiva (PWA). Para a maioria das novas aplicações, esta é a primeira versão prática — uma base de código, uma ligação, sem revisão de loja. Tem limites reais, sobretudo em relação às notificações no iPhone e ao acesso profundo ao dispositivo, e este guia é claro quanto aos casos em que precisa de uma aplicação nativa.

Três formas de estar «no telemóvel»

Uma PWA é uma aplicação web responsiva com alguns extras, por isso não tem de escolher entre as duas primeiras. Crie primeiro a versão responsiva e depois torne-a instalável. Para uma comparação mais detalhada, veja aplicações nativas vs. aplicações web progressivas.

O que as aplicações web podem e não podem fazer em telemóveis

Os browsers fazem mais do que muita gente pensa:

• Câmara e carregamento de fotos, através de campos de ficheiro normais.
• Localização, com a permissão do utilizador.
• Instalação no ecrã inicial com ícone e arranque em ecrã inteiro.
• Utilização offline, guardando páginas e dados em cache com um service worker (um script em segundo plano que o browser executa para o seu site).
• Notificações push — com uma ressalva no iPhone. A equipa WebKit da Apple indica que as notificações push web chegaram ao iOS e ao iPadOS 16.4 para aplicações web adicionadas ao ecrã principal. Os utilizadores têm de instalar a aplicação primeiro e depois permitir as notificações.

Onde o nativo continua a ganhar:

• Funcionalidades profundas do dispositivo, como localização em segundo plano, acessórios Bluetooth, dados de saúde e widgets no ecrã inicial — o suporte no browser é limitado ou varia de plataforma para plataforma.
• Descoberta na loja de aplicações. Se as pessoas vão procurar na loja, tem de estar lá.
• Trabalho offline pesado, como grandes conjuntos de dados sincronizados em segundo plano.
• Gráficos com exigências de desempenho, como jogos exigentes.

Se nenhuma destas funcionalidades for central na sua aplicação, uma aplicação web provavelmente servirá bem.

Desenhar primeiro para telemóveis

Desenhe primeiro o layout para telemóvel e deixe-o expandir-se para ecrãs maiores; o contrário costuma produzir ecrãs de telemóvel apertados.

Layout

• Uma coluna em ecrãs pequenos. As barras laterais tornam-se uma barra inferior ou um menu.
• Sem deslocamento para o lado. As tabelas largas passam a cartões ou fazem scroll dentro do seu próprio contentor.
• Texto legível sem ampliar — o texto principal com cerca de 16 px.

Toque

• Alvos de toque grandes. Cerca de 44 por 44 píxeis é um mínimo comum. Deixe espaço entre eles.
• Ações principais ao alcance do polegar, perto da parte inferior do ecrã em telemóveis altos.
• Sem funcionalidades que dependam do rato. Dicas e menus que aparecem ao passar o cursor não existem em ecrãs táteis.
• O teclado certo. Os campos de email devem abrir o teclado de email, e os campos de telefone o teclado numérico. Peça os tipos de entrada corretos.

Velocidade

• Imagens pequenas com dimensões sensatas, carregadas quando entram no ecrã.
• Menos bibliotecas pesadas. Cada uma acrescenta tempo de descarregamento em dados móveis.
• Ecrãs esqueleto ou estados de carregamento claros, para que a aplicação nunca pareça bloqueada.

Áreas seguras e barra de endereço

Nos telemóveis modernos, o conteúdo pode ficar por baixo do entalhe ou da barra inferior, sobretudo numa aplicação instalada em ecrã inteiro. Peça espaçamento para as áreas seguras. Atenção também aos layouts de altura total que saltam quando a barra de endereço do browser aparece e desaparece.

Tornar a aplicação instalável (PWA)

Para ser instalável, uma aplicação web precisa de:

1. Um manifesto de aplicação web — um pequeno ficheiro com o nome da aplicação, o nome curto, os ícones, a cor do tema e a forma como deve abrir (normalmente em ecrã inteiro, «standalone»).
2. Ícones nos tamanhos que as plataformas esperam, incluindo um adequado aos dispositivos Apple.
3. HTTPS, que qualquer alojamento bem configurado já tem.
4. Um service worker, se quiser suporte offline ou push.

Depois, diga aos utilizadores como instalar. Os browsers Android costumam oferecer um aviso de instalação ou um item de menu; no iPhone é o botão Partilhar e depois «Adicionar ao ecrã principal». Uma nota curta com «Instale esta aplicação» e estes passos ajuda muito.

O suporte offline é onde as PWAs se complicam. Guardar em cache as páginas da aplicação para que abra sem ligação é simples. Deixar as pessoas alterar dados offline e sincronizá-los mais tarde dá trabalho real — peça-o apenas se os seus utilizadores realmente precisarem.

Um primeiro prompt que funciona

Crie uma aplicação web para a nossa equipa de limpeza ver os trabalhos do dia e marcá-los como concluídos. Desenhe primeiro para telemóveis: uma coluna, alvos de toque grandes, o botão de ação principal fixo perto da parte inferior, sem controlos que dependam do rato, sem deslocamento para o lado e com os teclados corretos para os campos de telefone e email. Cada trabalho mostra a morada (toque para abrir no mapa), o telefone do cliente (toque para ligar), uma lista de verificação e um botão «Marcar como concluído» que pode tirar uma fotografia. Os gestores iniciam sessão num computador para atribuir trabalhos; num ecrã largo, mostre uma tabela em vez de cartões. Torne-a uma PWA instalável com manifesto, ícones e visualização standalone, e guarde em cache a estrutura da aplicação para que abra sem sinal. Guarde os dados numa base de dados.

Passos de criação

1. Crie primeiro o layout para telemóvel, com dados de exemplo, e verifique-o numa pré-visualização com o tamanho de um telemóvel.
2. Teste em telemóveis reais — pelo menos um iPhone e um Android, se os seus utilizadores tiverem ambos. Os emuladores não mostram coisas como o teclado no ecrã a tapar os campos.
3. Percorra a tarefa principal com um polegar. Se algo exigir as duas mãos ou ampliação, corrija.
4. Acrescente o manifesto e os ícones e instale a aplicação nas duas plataformas para verificar o ícone, o nome e o ecrã de arranque.
5. Decida sobre o offline. Comece com «abre sem sinal e mostra uma mensagem clara»; acrescente edição offline apenas se for necessária.
6. Verifique a velocidade numa ligação lenta. As ferramentas de programador do browser podem simular uma.
7. Acrescente as notificações por último, se for o caso — e planeie uma alternativa por email para os utilizadores que não instalarem a aplicação.

Erros comuns

• Desenhar apenas num monitor grande. Verifique cada ecrã na largura de telemóvel à medida que avança.
• Tabelas que transbordam. Transforme as linhas em cartões em ecrãs pequenos.
• Alvos de toque minúsculos e ligações demasiado próximas.
• Formulários que lutam com o teclado — tipos de entrada errados, campos escondidos atrás do teclado, sem um fluxo de «seguinte».
• Presumir que as notificações push do iPhone funcionam no separador do browser. Precisam de a aplicação estar instalada no ecrã principal.
• Prometer uma aplicação na App Store que não consegue entregar. Se a loja for importante, planeie-a à parte.
• Embrulhar um site e chamar-lhe aplicação. As Diretrizes de Revisão da App Store da Apple pedem aplicações que vão além de um site reempacotado; um invólucro fino arrisca a rejeição.

Quando precisa de uma aplicação nativa

Avance para o nativo (ou planeie uma versão nativa depois da aplicação web) quando:

• A presença na loja for a forma como os clientes o vão encontrar.
• Dependa de localização em segundo plano, Bluetooth, dados de saúde, widgets ou outras funcionalidades do dispositivo que os browsers não oferecem de forma fiável.
• A sua aplicação tiver de funcionar totalmente offline durante longos períodos.
• Os seus utilizadores o esperarem — alguns públicos simplesmente não usam nada que não esteja na loja.

A publicação em loja tem custos e passos próprios. A partir de setembro de 2026, o programa de programadores da Apple custa 99 USD por ano e uma conta de programador da Google Play custa 25 USD únicos, segundo os respetivos sites, e cada versão passa por revisão. Muitas equipas começam com uma aplicação web adaptada a telemóveis para provar que as pessoas querem o produto, e só depois investem no nativo. Como criar uma aplicação com IA cobre essa primeira fase de ponta a ponta.

Como criar com o Mythex

O Mythex cria aplicações web: descreve a aplicação no chat e verifica-a na pré-visualização em direto, no computador e numa moldura do tamanho de um telemóvel que pode redimensionar. A documentação tem um prompt para layouts responsivos para corrigir layouts em ecrãs pequenos. Pode pedir um manifesto de PWA e ícones como qualquer outra funcionalidade e depois publicar numa ligação pública que funciona em qualquer telemóvel. No plano Pro, o Mythex também pode embrulhar a aplicação como aplicação Android e iPhone, enviada para os testes internos da Google Play e para o TestFlight. Para começar, veja o criador de aplicações web com IA ou explore os modelos de aplicações. Para um exemplo completo, leia como criar uma aplicação de controlo de hábitos.

Perguntas