Simule a API de sobreposição de controles de janela sem instalar o PWA

No DevTools, na ferramenta Aplicativo, você pode simular o recurso WCO (Sobreposição de Controles de Janela) que os PWAs (Aplicativos Web Progressivos) têm, sem precisar instalar o PWA primeiro e habilitar o recurso WO. Simulando o recurso WCO no DevTools, você pode testar alterações de código CSS para a área da barra de título mais rapidamente do que reinstalando o PWA revisado.

Usar o recurso WCO em seu PWA

No PWA (Aplicativo Web Progressivo), use a WCO (Sobreposição de Controles de Janela) para ter controle sobre a área da barra de título que é exibida no momento no modo de exibição autônomo. A Sobreposição de Controles de Janela é um conjunto de recursos que funcionam em conjunto para fornecer apenas os controles essenciais necessários para a janela do aplicativo. Esse layout libera mais espaço para a camada de conteúdo da Web. Consulte Exibir conteúdo na área da barra de título usando a sobreposição de controles de janela.

Para simular o recurso WCO para Windows, Linux e macOS em seu PWA sem precisar instalar o PWA primeiro, use a seção Sobreposição de Controles da Janela da ferramenta Aplicativo no DevTools.

Simular a sobreposição de controles de janela no DevTools

1. Abra um PWA (Aplicativo Web Progressivo) que usa o recurso WCO (Sobreposição de Controles de Janela). Por exemplo, abra o aplicativo de demonstração 1DIV em uma nova janela ou guia:

   

   A Sobreposição de Controles de Janela ainda não é exibida no canto superior direito da página da Web.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. Na Barra de Atividades, selecione a guia Aplicativo . Se essa guia não estiver visível, clique no botão Mais ferramentas () e selecione Aplicativo.

4. Na ferramenta Aplicativo , expanda Manifesto no canto superior esquerdo e selecione Sobreposição de Controles de Janela.

5. Na seção Sobreposição de Controles de Janela à direita, marque a caixa de seleção Emular a sobreposição de controles de janela na<plataforma> e selecione uma plataforma, como Windows, macOS ou Linux.

   A sobreposição de controles de janela simulada é adicionada à página da Web renderizada:

   

   A sobreposição simulada é uma imagem estática. Os valores das variáveis env(titlebar-area-left)CSS , env(titlebar-area-top), env(titlebar-area-width), e env(titlebar-area-height) são definidos para corresponder à plataforma selecionada.

Confira também

• Exibir conteúdo na área da barra de título usando a Sobreposição de Controles de Janela – o recurso de Sobreposição de Controles de Janela para PWAs.
• Ferramentas para controles de janela PWA Sobreposição em Novidades no DevTools (Microsoft Edge 121).