HTML5 e PWA para mobile em 2026: o que a web faz no celular

Veja o que dá para fazer com HTML5 e PWA no celular em 2026, as limitações reais no iOS e quando um PWA substitui um app nativo, com exemplos de código.

Em 2026, um site moderno no celular consegue funcionar offline, ser instalado na tela inicial, receber push notifications, usar câmera, geolocalização, passkeys, compartilhamento nativo e até GPU. Isso é um PWA (Progressive Web App). O grande asterisco continua sendo o iPhone: o Safari libera menos recursos que o Chrome no Android, e isso decide se a web basta para o seu projeto.

"HTML5 para mobile" era o termo da moda em 2012. Hoje o assunto atende por PWA, e é bem mais capaz do que era naquela época.

O que é um PWA, na prática

Um PWA é um site comum com três ingredientes:

1. HTTPS (obrigatório).
2. Um Web App Manifest: um JSON com nome, ícones, cores e modo de exibição.
3. Um Service Worker: um script que roda em segundo plano, intercepta requisições e permite cache offline e push.

Com isso, o navegador trata o site como app instalável: ícone na tela inicial, tela cheia sem barra de endereço, entrada no seletor de apps.

Manifest mínimo

{
  "name": "Minhas Tarefas",
  "short_name": "Tarefas",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

E no <head> do HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="/icons/180.png">
<meta name="theme-color" content="#0f172a">

Service worker com cache básico

// sw.js
const CACHE = 'tarefas-v1';
const ARQUIVOS = ['/', '/index.html', '/app.css', '/app.js', '/offline.html'];

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(ARQUIVOS)));
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((chaves) =>
      Promise.all(chaves.filter((c) => c !== CACHE).map((c) => caches.delete(c)))
    )
  );
});

self.addEventListener('fetch', (event) => {
  if (event.request.method !== 'GET') return;
  event.respondWith(
    caches.match(event.request).then(
      (emCache) => emCache || fetch(event.request).catch(() => caches.match('/offline.html'))
    )
  );
});

// app.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Dica: escrever service worker na mão é ótimo para aprender, mas em projeto real use o Workbox ou o plugin PWA do seu framework (por exemplo, vite-plugin-pwa). Estratégias de cache erradas são a causa número um de "o site não atualiza".

O que a web consegue fazer no celular em 2026

Fonte boa para checar suporte antes de decidir: caniuse.com e o MDN.

As limitações reais no iOS

Se seu público usa iPhone (e no Brasil uma fatia relevante do público com maior poder de compra usa), estas são as que mais doem:

• Não existe prompt de instalação. O evento beforeinstallprompt não existe no Safari. Você precisa ensinar o usuário a tocar em Compartilhar > Adicionar à Tela de Início. Muita gente nunca faz isso.
• Push só depois de instalado. Um site aberto no Safari não pode pedir permissão de notificação. Primeiro o usuário instala, depois você pede, e sempre a partir de um toque do usuário.
• Todos os navegadores do iOS usam o WebKit. Chrome, Firefox e Edge no iPhone usam o motor do Safari por baixo (a exceção é a União Europeia, onde a Apple passou a permitir motores alternativos por causa do DMA). Na prática, para o Brasil: o limite do Safari é o limite de todo mundo.
• Armazenamento pode ser apagado. O Safari pode limpar dados de sites que o usuário não visita há algum tempo. PWAs instalados na tela inicial recebem tratamento melhor, mas não trate o armazenamento local como garantido: sincronize com o servidor.
• Execução em segundo plano é muito limitada. Nada de rodar tarefas periódicas com o app fechado.
• Sem acesso a hardware avançado (Bluetooth, NFC, USB).

Atenção: as regras do iOS mudam a cada versão anual. Antes de prometer um recurso para o cliente, teste em um iPhone real com a versão mais recente do sistema. O simulador do Xcode ajuda, mas não é a mesma coisa.

Publicando um PWA nas lojas

• Google Play: totalmente viável. Uma Trusted Web Activity abre seu PWA em tela cheia como app Android. Ferramentas como Bubblewrap (do Google) e PWABuilder (da Microsoft) geram o pacote para você.
• Microsoft Store: aceita PWAs, também via PWABuilder.
• App Store: a Apple não aceita "site empacotado" sem valor extra (diretriz 4.2 de funcionalidade mínima). Se precisar estar na App Store, empacote com Capacitor e adicione recursos nativos reais, ou reconsidere um app nativo ou multiplataforma.

Quando usar PWA (e quando não usar)

PWA é uma ótima escolha quando:

• O produto é principalmente conteúdo: notícias, blogs, catálogos, cardápios, documentação.
• É uma ferramenta interna de empresa, especialmente com aparelhos Android.
• O uso é esporádico: ninguém quer instalar um app para pagar estacionamento uma vez por mês.
• Você quer validar uma ideia antes de investir em app nas lojas.
• Seu time é de front-end e não tem gente mobile.
• Atualizar na hora, sem revisão de loja, é crítico.

Prefira app instalado quando:

• Notificações são essenciais para o negócio e o público é majoritariamente iPhone.
• Você precisa de Bluetooth, NFC, widgets, Apple Watch ou tarefas em segundo plano.
• O app tem processamento pesado (edição de vídeo, áudio em tempo real, jogos 3D exigentes).
• Estar na loja é parte da aquisição de usuários.

Um caminho comum e inteligente: lance como PWA, meça o uso, e só invista em app quando os dados mostrarem que faz sentido.

Checklist de um bom PWA

• Site responsivo e mobile-first (veja nosso guia de design responsivo na prática).
• HTTPS em todas as páginas.
• Manifest com ícones 192 e 512 px, incluindo um maskable.
• apple-touch-icon para o iOS.
• Página offline amigável em vez do dinossauro do Chrome.
• Áreas de toque com pelo menos ~44 px.
• Respeito à área segura do iPhone com env(safe-area-inset-*) e viewport-fit=cover, se usar tela cheia.
• Instruções claras de instalação para usuários de iPhone.
• Teste no Lighthouse (DevTools do Chrome) e em aparelhos reais, Android e iOS.

Por onde aprender

Se você ainda está montando a base de HTML, CSS e JavaScript, comece entendendo o que faz um desenvolvedor front-end e escolha um curso no nosso guia de cursos de front-end. Para PWA especificamente, o material gratuito do web.dev (do time do Chrome) e a documentação do MDN são as melhores referências.