mobile-pwa-usability

Mobile PWA Usability

Guia para criar interfaces mobile-first em PWAs React/Next.js com foco em usabilidade real.

Quando Usar

Triggers automáticos:

• Componentes React (.tsx, .jsx)
• Layouts e páginas (app/, pages/)
• Configurações PWA (manifest.json, manifest.ts, next.config.js)
• CSS/Tailwind (.css, .scss, tailwind.config.js)
• Service workers

Checklist Crítico (Bloqueante)

PARE se qualquer item falhar. Corrija antes de continuar.

Item	Regra	Como Verificar
Touch targets	Mínimo 44x44px	min-h-[44px] min-w-[44px] em buttons/links
Font size inputs	Mínimo 16px	text-base ou text-[16px] - previne zoom iOS
Viewport	width=device-width, initial-scale=1	Em layout.tsx ou <head>
Safe areas	Suporte a notch/islands	pb-[env(safe-area-inset-bottom)]
Contraste	WCAG AA (4.5:1 texto)	Verificar cores primárias
Tap delay	Sem delay 300ms	touch-manipulation em elementos interativos
Horizontal scroll	Não permitido	overflow-x-hidden no root

Viewport para Next.js 14+

// app/layout.tsx
import { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  userScalable: true,
  viewportFit: 'cover', // Para safe areas
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
  ],
};

Safe Areas (Notch/Dynamic Island)

// Para elementos fixos no bottom
<nav className="fixed bottom-0 pb-[env(safe-area-inset-bottom)] ...">

// Para containers principais
<main className="pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)]">

// CSS puro
.safe-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

Touch Targets Corretos

// ❌ ERRADO - muito pequeno
<button className="p-1 text-sm">Save</button>

// ✅ CORRETO - 44px mínimo
<button className="min-h-[44px] min-w-[44px] p-3 touch-manipulation">
  Save
</button>

// ✅ Ícone com área de toque expandida
<button className="p-3 -m-3"> {/* padding expande, margin negativa compensa */}
  <Icon className="w-5 h-5" />
</button>