Desbloquea casos de uso interesantes con la API de Document Picture-in-Picture

Jad Joubran

Publicado: 4 de marzo de 2025

La API de Document Picture-in-Picture (API de Document PiP) permite que las aplicaciones web abran una ventana flotante que siempre se muestra en primer plano (una ventana de Picture-in-Picture) que puede mostrar cualquier contenido HTML arbitrario.

Esta API se basa en la API de Picture-in-Picture para <video>, que te permite seguir mirando videos en una ventana de PIP.

Como la API de Document PiP puede mostrar cualquier contenido HTML arbitrario, puedes usarla para desbloquear nuevos y emocionantes casos de uso.

Compatibilidad con navegadores y mejora progresiva

Al momento de escribir este artículo, la API de Document Picture-in-Picture tiene disponibilidad limitada.

Sin embargo, esto no debería impedir que lo uses con mejora progresiva o degradación elegante.

Cuando planifiques tu caso de uso, asegúrate de tratarlo como una mejora progresiva en lugar de una función estándar. En este artículo, verás un ejemplo de degradación elegante.

Mejora de la experiencia del usuario del estudiante con la API de Document PiP

LearnHTMLCSS.online es una plataforma de aprendizaje interactiva que enseña HTML y CSS semánticos y accesibles. Ofrece un editor de texto interactivo y una ventana de vista previa del navegador.

En el siguiente video, se muestra el diseño de la app. La pantalla está dividida en dos columnas. La primera columna contiene el editor de código. La segunda columna contiene un diseño con pestañas. De forma predeterminada, el usuario puede ver las instrucciones del desafío y hacer clic en la pestaña Navegador para ver una vista previa en vivo.

Como estudiante, es posible que a veces quieras maximizar la ventana de vista previa del navegador. Esta es una oportunidad perfecta para agregar compatibilidad con la API de Document Picture-in-Picture.

Para implementar esto, primero verifica la compatibilidad del navegador:

const isPipSupported = "documentPictureInPicture" in window;

Ahora puedes usar esta variable para unir cualquier llamada de documentPictureInPicture o para realizar una devolución anticipada de una función que dependa del PIP de Documento. El siguiente código verifica la compatibilidad con el PIP de documentos y, luego, abre una ventana de PIP de documentos.

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

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

Según tu caso de uso, puedes especificar cualquier ancho y altura para la ventana. Puedes intentar hacer coincidir un elemento en particular, el documento actual o, incluso, proporcionar valores fijos.

Hasta el momento, tienes un documento vacío. Ahora debes propagarlo con contenido.

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

En el caso de los desafíos relacionados con el código CSS, también deberás sincronizar el CSS.

Eso es todo. Ahora tienes un botón de maximizar que se abre en una ventana PIP separada.Además de maximizar la pestaña de vista previa del navegador, también puedes moverla a una pantalla separada si tienes un monitor externo o incluso reorganizar la app web principal y la pestaña de vista previa del navegador en un diseño de columna.

Resguardo

Recuerda que esta API tiene disponibilidad limitada. En los navegadores y dispositivos en los que no se admite esta API, deberás proporcionar un comportamiento de respaldo (degradación gradual).

En lugar de hacer que el botón de maximizar extraiga toda la pestaña de vista previa del navegador, podemos hacer que ocupe todo el espacio restante de la app web actual.

Prueba este comportamiento en diferentes navegadores: https://learnhtmlcss.online/app.html?id=2096

No olvides prestar atención a los detalles pequeños en los cuadros de información sobre la herramienta. Cuando isPipSupported es true, la información sobre herramientas del botón de maximizar o minimizar alterna entre Ingresar a Pantalla en pantalla y Salir de Pantalla en pantalla. Por otro lado, cuando isPipSupported es false, el comportamiento de resguardo se describe con Maximizar y Minimizar.

Como puedes ver, la API de Document Picture-in-Picture puede desbloquear nuevos y emocionantes casos de uso para tu app web cuando se combina con la mejora progresiva o la degradación elegante.

No dejes que la compatibilidad limitada con el navegador te limite, y no olvides tener un caso de uso de resguardo decente.

Consulta la documentación de Document PiP para explorar varios ejemplos y casos de uso de esta API.