← Voltar para o Painel

Mastering PWA Hardware

Guia definitivo para integração de recursos nativos Android usando Javascript puro.

📦 O Manifesto Perfeito

Seu PWA precisa de um arquivo manifest.json bem configurado. O nosso gerador lê o seu manifesto para preencher os dados automaticamente, mas estes são os campos obrigatórios para o Bubblewrap:

{
  "name": "Meu App Pro",
  "short_name": "AppPro",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#030305",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

🔍 Digital Asset Links (Sem Barra de Endereço)

Para remover a barra do navegador (TWA Mode), você deve comprovar a propriedade do domínio. Use a ferramenta de verificação no painel principal e suba o arquivo gerado em:

https://seu-dominio.com/.well-known/assetlinks.json

🚀 Integração de Hardware (JS)

Abaixo estão os códigos que você deve colocar no seu site para ativar as funções nativas selecionadas no gerador.

📍 Geolocalização

GPS de Alta Precisão

Ao marcar "Geolocalização Nativa", o Android usará o GPS do sistema sem pedir permissão via Chrome.

function getPos() {
  navigator.geolocation.getCurrentPosition(p => {
    alert("Lat: " + p.coords.latitude);
  }, err => console.error(err), {
    enableHighAccuracy: true
  });
}
📸 Câmera

Acesso a Foto e Vídeo

Funciona perfeitamente para leitura de QR Codes e captura de documentos.

async function initCam() {
  const stream = await navigator
    .mediaDevices.getUserMedia({ 
      video: { facingMode: "environment" } 
    });
  videoTag.srcObject = stream;
}
🔔 Notificações

Push em Background

Sempre use um Service Worker registrado para que as notificações funcionem mesmo com o app fechado.

// No sw.js
self.onpush = (e) => {
  self.registration.showNotification("Alerta!", {
    body: e.data.text(),
    icon: "/icon.png"
  });
};
💳 Pagamentos

Google Pay Integration

Habilite checkouts rápidos com a Payment Request API nativa.

const method = [{ 
  supportedMethods: 'https://google.com/pay' 
}];
const details = { 
  total: { label: 'Total', amount: { currency: 'BRL', value: '10.00' } } 
};
const request = new PaymentRequest(method, details);

🛡️ Segurança & Keystore

Para publicar na Google Play Store, você **DEVE** usar uma Keystore (chave de assinatura) constante. Se você perder sua chave, não poderá atualizar o app na loja.