Como gerenciar janelas

Um PWA fora do navegador gerencia a própria janela. Neste capítulo, você entenderá as APIs e os recursos para gerenciar uma janela no sistema operacional.

A janela PWA

A execução na sua própria janela, gerenciada pelo PWA, tem as mesmas vantagens e responsabilidades de qualquer janela no sistema operacional, por exemplo:

  • Capacidade de redimensionar e mover a janela em sistemas operacionais com várias janelas, como Windows ou ChromeOS.
  • Compartilhando a tela com outras janelas de apps, como no modo dividido do iPadOS ou no modo de tela dividida do Android.
  • Aparecer em docks, barras de tarefas e no menu da guia Alt no computador e em listas de janelas multitarefa em dispositivos móveis.
  • A capacidade de minimizar, mover a janela entre telas e áreas de trabalho e fechá-la a qualquer momento.

Como mover e redimensionar a janela

A janela do PWA pode ser de qualquer tamanho e posicionada em qualquer lugar da tela em sistemas operacionais para computadores. Por padrão, quando o usuário abre o PWA pela primeira vez após a instalação, ele recebe um tamanho de janela padrão de uma porcentagem da tela atual, com resolução máxima de 1920 x 1080 posicionada no canto superior esquerdo da tela.

O usuário pode mover e redimensionar a janela e o navegador se lembrará da última preferência. Portanto, na próxima vez que o usuário abrir o aplicativo, a janela manterá o tamanho e a posição do uso anterior.

Não há como definir o tamanho e a posição preferidos do PWA no manifesto. Só é possível reposicionar e redimensionar a janela usando a API JavaScript. No código, é possível mover e redimensionar sua própria janela de PWA usando as funções moveTo(x, y) e resizeTo(x, y) do objeto window.

Por exemplo, é possível redimensionar e mover a janela do PWA quando ele for carregado usando:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

Consulte o tamanho e a posição atuais da tela usando o objeto window.screen. Você pode detectar quando a janela é redimensionada usando o evento resize do objeto window. Não há evento para capturar a movimentação da janela, portanto, sua opção é consultar a posição com frequência.

Navegar para outros sites

Se você quiser direcionar o usuário para um site externo que está fora do escopo do PWA, use um elemento HTML <a href> padrão, usando location.href ou abrindo uma nova janela em plataformas compatíveis.

Atualmente, em todos os navegadores, se o PWA estiver instalado, quando você acessar um URL que está fora do escopo do manifesto, o mecanismo do PWA vai renderizar um navegador no app no contexto da janela.

Alguns recursos dos navegadores no aplicativo são:

  • Eles aparecem em cima do seu conteúdo.
  • Elas têm uma barra de URL estático que mostra a origem atual, o título da janela e um menu. Normalmente, eles têm o tema theme_color do seu manifesto.
  • No menu contextual, você pode abrir esse URL no navegador.
  • Os usuários podem fechar o navegador ou voltar.

Um navegador no app em um PWA para computador ao navegar em um URL fora do escopo.

Um navegador no app do iPhone enquanto navega por um URL fora do escopo em um PWA independente.

Um navegador no app Android ao navegar em um URL fora do escopo em um PWA independente.

Fluxos de autorização

Muitos fluxos de autenticação e autorização da Web envolvem o redirecionamento do usuário para um URL diferente, com origem diferente, para adquirir um token que retorne à origem do PWA, como o uso do OAuth 2.0.

Nesses casos, o navegador no aplicativo segue o seguinte processo:

  1. O usuário abre o PWA e clica em "Fazer login".
  2. O PWA redireciona o usuário para um URL que está fora do escopo do PWA para que o mecanismo de renderização abra um navegador no app.
  3. O usuário pode cancelar o navegador no app e voltar para o PWA a qualquer momento.
  4. O usuário faz login no navegador no app. O servidor de autenticação redireciona o usuário para a origem do PWA, enviando o token como um argumento.
  5. O navegador no app é fechado quando detecta um URL que faz parte do escopo do PWA.
  6. O mecanismo redireciona a navegação da janela principal do PWA para o URL que o servidor de autenticação acessou no navegador no app.
  7. O PWA recebe o token, armazena o token e renderiza o PWA.

Como forçar a navegação em um navegador

Se você quiser forçar a abertura do navegador com um URL, e não com um navegador no app, use o destino _blank dos elementos <a href>. Isso funciona apenas em PWAs para computador. Em dispositivos móveis, não há a opção de abrir um navegador com um URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Abrindo novas janelas

No computador, os usuários podem abrir mais de uma janela do mesmo PWA. Cada janela terá uma navegação diferente para o mesmo start_url, como se você estivesse abrindo duas guias do navegador do mesmo URL. No menu do PWA, os usuários podem selecionar "Arquivo" e "Nova janela" e, no código do PWA, abrir uma nova janela com a função open(). Confira mais detalhes na documentação.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

O mesmo PWA instalado com várias janelas abertas em um sistema operacional de computador.

Chamar open() em uma janela de PWA no iOS ou iPadOS retorna null e não abre uma janela. A abertura de novas janelas no Android cria um novo navegador no app para o URL, mesmo que ele esteja no escopo do PWA, que normalmente não aciona uma experiência de navegação externa.

Título da janela

O elemento <title> era usado principalmente para SEO, porque o espaço na guia do navegador é limitado. Quando você passa do navegador para sua janela em um PWA, todo o espaço da barra de título fica disponível.

Você pode definir o conteúdo da barra de título:

  • Estaticamente no elemento HTML <title>.
  • Mudar dinamicamente a propriedade da string document.title a qualquer momento.

Em PWAs para computador, o título é essencial e é usado na barra de título da janela e, às vezes, no gerenciador de tarefas ou na seleção de várias tarefas. Se você tem um aplicativo de página única, convém atualizar seu título em todos os trajetos.

Modo com guias

Um recurso experimental, conhecido como modo com guias, vai permitir que o PWA tenha um design baseado em guias semelhante a um navegador da Web. Nesse caso, o usuário pode ter várias guias abertas no mesmo PWA, mas todas vinculadas na mesma janela do sistema operacional, como você pode conferir no vídeo a seguir:

Leia mais sobre esse recurso experimental em Modo de app com guias para PWA.

Sobreposição de controles da janela

Mencionamos que você pode mudar o título da janela definindo o valor do elemento <title> ou a propriedade document.title. Mas é sempre um valor de string. E se pudéssemos projetar a barra de título da maneira que quisermos, com HTML, CSS e imagens? É aí que entra a Sobreposição de controles de janela, um novo recurso experimental no Microsoft Edge e nos PWAs do Google Chrome para computador.

Leia mais sobre esse recurso em Personalizar a sobreposição de controles da janela da barra de título do PWA.

Com a sobreposição de controles de janela, é possível renderizar o conteúdo na barra de título.

Como gerenciar janelas

Com várias telas, os usuários vão querer usar todo o espaço disponível. Exemplo:

  • Os editores de gráficos com várias janelas à la Gimp podem colocar várias ferramentas de edição em janelas posicionadas com precisão.
  • As mesas de operações virtuais podem mostrar tendências de mercado em várias janelas, e qualquer uma delas pode ser visualizada no modo de tela cheia.
  • Os apps de apresentação de slides podem mostrar as anotações do apresentador na tela principal interna e a apresentação em um projetor externo.

A API Window Management permite que os PWAs façam isso e muito mais.

Como acessar detalhes da tela

A API Window Management adiciona um novo método, window.getScreenDetails(), que retorna um objeto com telas como uma matriz imutável de telas anexadas. Há também um objeto ativo acessível pelo ScreenDetails.currentScreen, correspondente ao window.screen atual.

O objeto retornado também dispara um evento screenschange quando a matriz screens é alterada. Isso não acontece quando os atributos em telas individuais são alterados. Telas individuais, window.screen ou uma tela na matriz screens, também disparam um evento change quando os atributos delas mudam.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].pointerTypes;  // e.g. ["touch"]
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Se o usuário ou o sistema operacional mover a janela do PWA de uma tela para outra, um evento currentscreenchange também será disparado no objeto de detalhes da tela.

Wake lock de tela

Imagine o seguinte: você está na cozinha seguindo uma receita no seu tablet. Você acabou de preparar os ingredientes. Suas mãos estão bagunçadas, e você se volta para o dispositivo para ler a próxima etapa. É um desastre! A tela ficou preta! A API Screen Wake Lock funciona para você e permite que um PWA impeça o escurecimento, suspensão ou bloqueio da tela, permitindo que os usuários parem, iniciem, saiam e retornem sem se preocupar.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Teclado virtual

Dispositivos baseados em toque, como smartphones e tablets, oferecem um teclado virtual na tela para que o usuário possa digitar quando elementos de formulário do PWA estiverem em foco.

Graças à API VirtualKeyboard, seu PWA agora pode ter mais controle do teclado em plataformas compatíveis usando a interface navigator.virtualKeyboard, incluindo:

  • Mostrar e ocultar o teclado virtual com as funções navigator.virtualKeyboard.show() e navigator.virtualKeyboard.hide().
  • Indicar ao navegador que você está fechando o teclado virtual por conta própria, definindo navigator.virtualKeyboard.overlaysContent como true.
  • Saber quando o teclado aparece e desaparece com o evento geometrychange de navigator.virtualKeyboard.
  • Definir a política de teclado virtual sobre a edição de elementos de host (usando contenteditable) com o atributo HTML virtualkeyboardpolicy. Com uma política, você pode decidir se quer que o teclado virtual seja processado automaticamente pelo navegador usando o valor auto ou pelo script usando o valor manual.
  • Usar variáveis de ambiente CSS para acessar informações sobre a aparência do teclado virtual, como keyboard-inset-height e keyboard-inset-top.

Leia mais sobre essa API em Controle total com a API VirtualKeyboard.

Recursos