Pular para conteúdo

Frontend — PWA / Kiosk

O terminal é um PWA (apontamento.html + app.js, Tailwind + Material 3) servido por HTTPS, operando em modo kiosk / standalone no chão de fábrica.

web/config.json

Parametrização por cliente (carregada em runtime):

{
  "API_BASE": "/rest",
  "API_TOKEN": "/rest/tlpp/oauth2/token",
  "FILIAL": "01",
  "AUTH_ENABLED": true,
  "AUTH_USER": "APONTA",
  "AUTH_PASS": "<hash MD5 da senha da conta de serviço>"
}
Chave Papel
API_BASE Base dos endpoints REST
API_TOKEN Endpoint de emissão do token OAuth2
FILIAL Filial de operação
AUTH_ENABLED Liga o fluxo de token (auto-login com a conta de serviço)
AUTH_USER / AUTH_PASS Conta de serviço do kiosk (AUTH_PASS = MD5 da senha da MLTEC_0053)

Alternância de ambiente

O projeto traz config.json_local (proxy/dev) e config.json_hostinger (acesso direto ao ERP na LAN). Para alternar, copie o desejado por cima de config.json.

Modos de deploy

Terminais sem internet externa, na LAN da fábrica, falando direto com o Protheus. Todos os assets são self-hosted em web/vendor/ (Material Symbols, Inter, pdf.js).

Nunca reintroduzir CDN

Qualquer link/script de CDN quebra o funcionamento offline e o CSP estrito. O Service Worker pré-cacheia o vendor/.

O front é servido em um domínio HTTPS (ex.: https://CLIENTE.mltecnologia.com.br) e o navegador fala diretamente com o Protheus na LAN. Exige CORS AllowOrigins casando com o domínio (ver Autenticação) e certificado do ERP confiável no aparelho.

PWA, cache e versão

  • Service Worker (sw.js) com cache versionado (apontamento-producao-vN) + manifest.json + offline.html.
  • web/version.json carrega a versão atual (ex.: 2026.07.05.03). A cada deploy, subir a versão do cache do SW força a atualização nos terminais.
  • Sistema 100% online: o Service Worker cacheia apenas a interface (shell + vendor/). Toda gravação depende do Protheus. Sem rede, o terminal exibe offline.html — "O sistema de Apontamento necessita de conexão com o servidor ERP para funcionar" — e bloqueia operações (banner #offlineBanner
  • guard navigator.onLine no fetchAPI; sem gravação "no vazio"). Ver Recursos do terminal.

Segurança do front

  • XSS: todo conteúdo dinâmico injetado no DOM passa por escapeHtml().
  • CSP: script-src 'self' (por isso o JS foi extraído do inline para app.js).
  • Confirmações: usar confirmDialog({title, message, okLabel, tone}) (modal Material 3) — não window.confirm.
  • fetchAPI: cliente REST central com AbortController + CONFIG.TIMEOUT (30s) e lock STATE.isProcessing.

Setup do terminal (kiosk)

  1. Abrir a URL do PWA e instalar como aplicativo.
  2. Conferir config.json (API_BASE, FILIAL, AUTH).
  3. Validar auto-login (token) e uma consulta simples (recursos/OPs).
  4. Colocar o navegador em tela cheia / modo kiosk.