Abrir o navegador maximizado usando primefaces | Front-end

Oi, Themer! Como vai?

Não é possível maximizar a janela do navegador nem ocultar a barra de navegação via PrimeFaces/JavaScript ao carregar a página (os navegadores bloqueiam por segurança). Você tem três caminhos práticos:

Preencher toda a área visível com CSS (layout responsivo).
Oferecer botão de Tela Cheia (Fullscreen API exige gesto do usuário).
Modo app (PWA/kiosk) para abrir sem barra do navegador em ambientes controlados.

Exemplos:


<!-- 1) Layout ocupando a viewport inteira -->
<style>
  html, body { height: 100%; margin: 0; }
  /* use 100dvh para lidar melhor com barras do mobile */
  .app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
  .app-header { padding: .75rem 1rem; background: #f5f5f5; }
  .app-main   { flex: 1; display: grid; place-items: center; }
</style>

<div class="app-shell">
  <div class="app-header">Menu / Header</div>
  <div class="app-main">Conteúdo do seu menu</div>
</div>


<!-- 2) Botão Tela Cheia (requer clique do usuário) -->
<script>
  function toggleFullScreen() {
    const doc = document;
    const el  = doc.documentElement;
    if (!doc.fullscreenElement) {
      el.requestFullscreen && el.requestFullscreen().catch(() => {});
    } else {
      doc.exitFullscreen && doc.exitFullscreen().catch(() => {});
    }
  }
</script>

<!-- PrimeFaces: botão que chama o JS acima -->
<p:commandButton type="button" value="Tela Cheia" icon="pi pi-external-link" onclick="toggleFullScreen()" />


<!-- 3) PWA para "ocultar" barra do navegador como app -->
<link rel="manifest" href="/manifest.json">

{
  "name": "SGPrev",
  "short_name": "SGPrev",
  "start_url": "/",
  "display": "standalone",   // ou "fullscreen"
  "background_color": "#ffffff",
  "theme_color": "#06B9A1",
  "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }]
}

Como aplicar no PrimeFaces:

Carregamento inicial: use o CSS do item (1) no seu template ou theme.
Ação do usuário: exponha o botão do item (2) no seu menu (toolbar) para entrar/voltar do modo Tela Cheia.
Ambiente controlado (opcional): transforme em PWA (item 3). Em quiosque/desktop, use Chrome com --kiosk (admin do SO).

O problema aqui é a restrição do navegador; então preencha a viewport com CSS e ofereça o fullscreen via clique. Para experiência sem barras, PWA/kiosk.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Garanta sua matrícula hoje e ganhe + 2 meses grátis