Jeff Bruchado
Voltar para o Blog

PWA em 2025: Por Que Desenvolver Uma App Web ao Invés de Nativa Está Virando Tendência

Olá HaWkers, enquanto empresas gastam milhões desenvolvendo apps nativas separadas para iOS e Android, uma tendência silenciosa mas poderosa está transformando o desenvolvimento mobile: Progressive Web Apps (PWAs) estão permitindo criar uma única aplicação web que funciona perfeitamente tanto no navegador quanto instalada como app nativo.

Empresas que adotaram PWAs reportam melhorias de 50%+ no engajamento de usuários, redução drástica de custos e eliminação da complexidade de manter múltiplas bases de código. Em 2025, a pergunta não é mais "devo criar um PWA?" mas "por que ainda não criei?".

Vamos entender o que são PWAs, seus benefícios reais, e como você pode implementar um PWA moderno que compete com apps nativas.

O Problema com Desenvolvimento Mobile Tradicional

No modelo tradicional de apps mobile, você desenvolve projetos separados:

  • iOS: Swift/Objective-C com Xcode
  • Android: Kotlin/Java com Android Studio
  • Web: JavaScript/TypeScript com frameworks web
// Realidade tradicional
const developmentCosts = {
  iosTeam: 3, // desenvolvedores iOS
  androidTeam: 3, // desenvolvedores Android
  webTeam: 2, // desenvolvedores web
  totalDevelopers: 8,
  monthlyCostPerDev: 10000, // USD
  totalMonthlyCost: 8 * 10000 // = $80,000/mês
};

// Sem contar:
// - Tempo de desenvolvimento triplicado
// - Bugs diferentes em cada plataforma
// - Features desincronizadas
// - Manutenção complexa

Problemas dessa abordagem:

  1. Custo altíssimo: Múltiplas equipes e bases de código
  2. Tempo de desenvolvimento: 3x mais lento
  3. Fragmentação: Features diferentes em cada plataforma
  4. Aprovação nas stores: Demora e riscos de rejeição
  5. Atualizações lentas: Usuários precisam baixar updates

O Que São Progressive Web Apps (PWAs)

PWAs são aplicações web que usam tecnologias modernas para oferecer experiência similar a apps nativas, mas rodando no navegador e podendo ser "instaladas" sem app stores.

Características Principais:

  1. Instalável: Pode ser adicionada à tela inicial
  2. Offline-first: Funciona sem internet
  3. Push notifications: Notificações como app nativo
  4. Rápida: Performance próxima de apps nativas
  5. Responsiva: Funciona em qualquer dispositivo
  6. Segura: Requer HTTPS
// PWA vs App Nativa
const pwaApproach = {
  platforms: 'Web (funciona em tudo)',
  languages: 'JavaScript/TypeScript',
  distribution: 'Web (sem app stores)',
  updates: 'Instantâneos (refresh)',
  development: 'Uma base de código',
  cost: '~$20,000/mês' // Economia de 75%!
};

PWA installation

Service Workers: O Coração do PWA

Service Workers são scripts que rodam em background e interceptam requisições de rede, permitindo cache, offline e push notifications.

// service-worker.js
const CACHE_NAME = 'my-pwa-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

// Instalação: Cacheia recursos essenciais
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Cache opened');
        return cache.addAll(urlsToCache);
      })
  );
});

// Fetch: Intercepta requisições
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - retorna do cache
        if (response) {
          return response;
        }

        // Cache miss - busca da rede
        return fetch(event.request).then(response => {
          // Não cacheia se não for 200
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }

          // Clona a resposta e adiciona ao cache
          const responseToCache = response.clone();
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(event.request, responseToCache);
            });

          return response;
        });
      })
  );
});

// Atualização: Remove caches antigos
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('Deleting old cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Manifest: Tornando o PWA Instalável

O Web App Manifest é um arquivo JSON que define como o PWA aparece quando instalado:

// manifest.json
{
  "name": "Minha App Incrível",
  "short_name": "App",
  "description": "Uma PWA completa com offline e notificações",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "shortcuts": [
    {
      "name": "Novo Post",
      "short_name": "Novo",
      "description": "Criar um novo post",
      "url": "/new-post",
      "icons": [{ "src": "/icons/new.png", "sizes": "96x96" }]
    }
  ],
  "categories": ["productivity", "social"]
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#007bff">
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" href="/favicon.ico">
  <title>Minha PWA</title>
</head>
<body>
  <div id="app"></div>

  <script>
    // Registra Service Worker
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => {
            console.log('SW registered:', registration);
          })
          .catch(error => {
            console.log('SW registration failed:', error);
          });
      });
    }
  </script>
</body>
</html>

Push Notifications: Engajamento Como App Nativo

PWAs podem enviar push notifications mesmo quando o navegador está fechado:

// client-side: Solicita permissão e obtém subscription
async function subscribeToPush() {
  // Pede permissão
  const permission = await Notification.requestPermission();

  if (permission !== 'granted') {
    console.log('Notification permission denied');
    return;
  }

  // Obtém service worker registration
  const registration = await navigator.serviceWorker.ready;

  // Subscribe para push
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
  });

  // Envia subscription para o servidor
  await fetch('/api/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });

  console.log('Push subscription successful');
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}
// service-worker.js: Recebe e exibe push notification
self.addEventListener('push', event => {
  const data = event.data.json();

  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    vibrate: [100, 50, 100],
    data: {
      url: data.url
    },
    actions: [
      { action: 'open', title: 'Abrir' },
      { action: 'close', title: 'Fechar' }
    ]
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// Clique na notificação
self.addEventListener('notificationclick', event => {
  event.notification.close();

  if (event.action === 'open') {
    event.waitUntil(
      clients.openWindow(event.notification.data.url)
    );
  }
});

PWA com Next.js: Setup Moderno

Next.js facilita muito a criação de PWAs com o plugin next-pwa:

npm install next-pwa
// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development'
});

module.exports = withPWA({
  reactStrictMode: true,
  // Outras configs do Next.js
});
// app/layout.tsx
export const metadata = {
  manifest: '/manifest.json',
  themeColor: '#007bff',
  viewport: 'width=device-width, initial-scale=1, maximum-scale=5',
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: 'Minha PWA'
  }
};

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#007bff" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Estratégias de Cache Avançadas

Diferentes estratégias para diferentes tipos de conteúdo:

// service-worker.js - Estratégias de cache
const CACHE_NAME = 'my-pwa-v1';

// Cache-First: Assets estáticos (imagens, CSS, JS)
const cacheFirst = async (request) => {
  const cached = await caches.match(request);
  return cached || fetch(request);
};

// Network-First: Conteúdo dinâmico (API calls)
const networkFirst = async (request) => {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch (error) {
    return caches.match(request);
  }
};

// Stale-While-Revalidate: Melhor de ambos
const staleWhileRevalidate = async (request) => {
  const cached = await caches.match(request);

  const fetchPromise = fetch(request).then(response => {
    caches.open(CACHE_NAME).then(cache => {
      cache.put(request, response.clone());
    });
    return response;
  });

  return cached || fetchPromise;
};

self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);

  // Assets estáticos: Cache-First
  if (request.destination === 'image' || request.destination === 'style') {
    event.respondWith(cacheFirst(request));
  }
  // API calls: Network-First
  else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request));
  }
  // HTML: Stale-While-Revalidate
  else {
    event.respondWith(staleWhileRevalidate(request));
  }
});

Casos de Sucesso Reais

Empresas que adotaram PWAs e os resultados:

Twitter Lite (PWA):

  • 65% de aumento em páginas por sessão
  • 75% de aumento em Tweets enviados
  • 20% de redução em taxa de rejeição
  • 3 segundos de carregamento inicial

Pinterest PWA:

  • 60% de aumento em engajamento
  • 44% de aumento em receita de anúncios
  • 50% de aumento em tempo de sessão

Starbucks PWA:

  • 2x de aumento em pedidos diários
  • 99.84% menor que app iOS nativa
  • Funciona offline completo

PWA vs App Nativa: Quando Escolher Cada Uma

✅ Escolha PWA quando:

  • Quer alcance máximo (web + mobile)
  • Precisa de updates instantâneos
  • Orçamento é limitado
  • Time é pequeno ou único
  • Não precisa de APIs nativas avançadas

❌ Escolha App Nativa quando:

  • Precisa de acesso profundo ao hardware
  • Performance é absolutamente crítica (jogos 3D)
  • Recursos como Bluetooth, NFC, ARKit são essenciais
  • Presença nas app stores é mandatória

🔄 Abordagem Híbrida:

Muitas empresas adotam ambos: PWA como base + apps nativas para features específicas. O PWA alcança todos, e quem precisa de recursos avançados baixa o app nativo.

Ferramentas Essenciais para PWA

# Lighthouse: Auditar PWA
npx lighthouse https://seu-site.com --view

# Workbox: Library para Service Workers
npm install workbox-webpack-plugin

# PWA Asset Generator: Gerar ícones
npm install -g pwa-asset-generator
pwa-asset-generator logo.png ./icons

Se você quer entender mais sobre desenvolvimento web moderno e performance, recomendo ler: WebAssembly e JavaScript: Performance na Web em 2025 onde exploramos técnicas avançadas de otimização.

Bora pra cima! 🦅

🎯 Domine Desenvolvimento Web Moderno

Este artigo cobriu PWAs e desenvolvimento mobile com web technologies, mas há muito mais para explorar sobre JavaScript e frameworks modernos.

Desenvolvedores que dominam PWAs e tecnologias web têm acesso a um mercado enorme e crescente.

Comece Agora

Se você quer dominar JavaScript do zero ao avançado:

Formas de pagamento:

  • R$9,90 (pagamento único)

📖 Ver Conteúdo Completo

Comentários (0)

Esse artigo ainda não possui comentários 😢. Seja o primeiro! 🚀🦅

Adicionar comentário