Simular a API de Sobreposição de Controlos de Janela sem instalar o PWA

Em DevTools, na ferramenta Aplicação, pode simular a funcionalidade Sobreposição de Controlos de Janela (WCO) que o Progressive Aplicativos Web (PWAs) tem, sem ter de instalar primeiro o PWA e ativar a funcionalidade WCO. Ao simular a funcionalidade WCO a partir de DevTools, pode testar as alterações de código CSS para a área da barra de título mais rapidamente do que reinstalando o PWA revisto.

Utilizar a funcionalidade WCO no seu PWA

Na sua Aplicação Web Progressiva (PWA), utilize a Sobreposição de Controlos de Janela (WCO) para ter controlo sobre a área da barra de título que é atualmente apresentada no modo de visualização autónomo. A Sobreposição de Controlos de Janela é um conjunto de funcionalidades que funcionam em conjunto para fornecer apenas os controlos essenciais necessários para a janela da aplicação. Este esquema liberta mais espaço para a camada de conteúdo Web. Veja Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela.

Para simular a funcionalidade WCO para Windows, Linux e macOS no seu PWA sem ter de instalar primeiro o PWA, utilize a secção Sobreposição de Controlos de Janela da ferramenta Aplicação em DevTools.

Simular a Sobreposição de Controlos de Janela em DevTools

1. Abra uma Aplicação Web Progressiva (PWA) que utilize a funcionalidade Sobreposição de Controlos de Janela (WCO). Por exemplo, abra a aplicação de demonstração 1DIV numa nova janela ou separador:

   

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

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Na Barra de Atividade, selecione o separador Aplicação . Se esse separador não estiver visível, clique no botão Mais ferramentas () e, em seguida, selecione Aplicação.

4. Na ferramenta Aplicação , expanda Manifesto no canto superior esquerdo e, em seguida, selecione Sobreposição de Controlos de Janela.

5. Na secção Sobreposição de Controlos de Janela à direita, selecione a caixa de verificação Emular a Sobreposição de Controlos de Janela na<plataforma> e, em seguida, selecione uma plataforma, como Windows, macOS ou Linux.

   A Sobreposição simulada dos Controlos de Janela é adicionada à página Web composta:

   

   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) estão definidos para corresponder à plataforma que selecionou.

Confira também

• Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela – a funcionalidade Sobreposição de Controlos de Janela para PWAs.
• Ferramentas para Sobreposição de Controlos de Janela do PWA em Novidades nas DevTools (Microsoft Edge 121).