Acesse casos de uso incríveis com a API Picture-in-Picture de documentos

Jad Joubran

Publicado em: 4 de março de 2025

A API Document Picture-in-Picture (API Document PiP) permite que aplicativos da Web abram uma janela flutuante sempre ativa (uma janela picture-in-picture) que pode mostrar qualquer conteúdo HTML arbitrário.

Essa API é baseada na API Picture-in-Picture para <video>, que permite continuar consumindo vídeos em uma janela PiP.

Como a API Document PiP pode mostrar qualquer conteúdo HTML arbitrário, você pode usá-la para desbloquear novos casos de uso interessantes.

Suporte do navegador e aprimoramento progressivo

No momento da redação, a API Document Picture-in-Picture tem disponibilidade limitada.

No entanto, isso não impede que você a use com aprimoramento progressivo ou degradação suave.

Ao planejar seu caso de uso, trate-o como um aprimoramento progressivo em vez de um recurso padrão. Neste artigo, você vai encontrar um exemplo de degradação suave.

Como melhorar a experiência do usuário do aluno com a API Document PiP

LearnHTMLCSS.online é uma plataforma de aprendizado interativa que ensina HTML e CSS semânticos e acessíveis. Ela oferece um editor de texto interativo e uma janela de visualização do navegador.

A captura de tela a seguir mostra o layout do app. A tela é dividida em duas colunas. A primeira coluna contém o editor de código. A segunda coluna contém um layout com guias. Por padrão, o usuário pode conferir as instruções do desafio e clicar na guia Navegador para conferir uma visualização dinâmica.

Como estudante, às vezes você pode querer maximizar a janela de visualização do navegador. Essa é uma oportunidade perfeita para adicionar suporte à API Document Picture-in-Picture.

Para implementar isso, comece verificando o suporte do navegador:

const isPipSupported = "documentPictureInPicture" in window;

Agora você pode usar essa variável para incluir qualquer chamada documentPictureInPicture ou para retornar antecipadamente de uma função que depende do Document PiP. O código a seguir verifica o suporte do Document PiP e, em seguida, abre uma janela do Document PiP.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

Dependendo do seu caso de uso, você pode especificar qualquer largura e altura para a janela. É possível tentar corresponder a um elemento específico, ao documento atual ou até mesmo fornecer valores fixos.

Até agora, você tem um documento vazio. Agora é necessário preenchê-lo com conteúdo.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

Para desafios com código CSS, também é necessário sincronizar o CSS.

Pronto! Agora você tem um botão de maximização que é aberto em uma janela PiP separada.Além de maximizar a guia de visualização do navegador, você também pode movê-la para uma tela separada se tiver um monitor externo ou até mesmo reorganizar o app da Web principal e a guia de visualização do navegador em um layout de coluna.

Fallback

Lembre-se de que essa API tem disponibilidade limitada. Em navegadores e dispositivos em que essa API está indisponível, é necessário fornecer um comportamento de substituto (degradação suave).

Em vez de fazer com que o botão de maximização extraia toda a guia de visualização do navegador, podemos fazer com que ele ocupe todo o espaço restante do app da Web atual.

Teste esse comportamento em diferentes navegadores: https://learnhtmlcss.online/app.html?id=2096

Não se esqueça de prestar atenção aos pequenos detalhes nas dicas. Quando isPipSupported é true, a dica do botão de maximizar/minimizar alterna entre Enter Picture-in-Picture e Exit Picture-in-Picture. Por outro lado, quando isPipSupported é false, o comportamento de fallback é descrito com Maximize e Minimize.

Como você pode ver, a API Document Picture-in-Picture pode desbloquear novos casos de uso interessantes para seu app da Web quando combinada com aprimoramento progressivo ou degradação suave.

Não deixe que o suporte limitado do navegador limite você e não se esqueça de ter um caso de uso de fallback decente.

Confira a documentação do Document PiP para conferir vários exemplos e casos de uso dessa API.