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

Jad Joubran

Fecha de publicación: 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 siempre en la parte superior (una ventana de imagen en imagen) que puede mostrar cualquier contenido HTML arbitrario.

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

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

Compatibilidad con navegadores y mejora progresiva

Browser Support

• 116
• 116
• x
• x

Source

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

Sin embargo, esto no debería impedirte usarlo con la mejora progresiva o la 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 la experiencia del usuario del alumno con la API de Document PiP

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

En la siguiente presentación en pantalla, 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 obtener una vista previa en vivo.

Como estudiante, a veces es posible que 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 con el navegador:

const isPipSupported = "documentPictureInPicture" in window;

Ahora puedes usar esta variable para unir cualquier llamada a documentPictureInPicture o para mostrar una devolución anticipada desde una función que se base en el PiP de documentos. 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;

Si tienes problemas con el código CSS, también deberás sincronizarlo.

Eso es todo. Ahora tienes un botón para maximizar que se abre en una ventana de PiP independiente.Además de maximizar la pestaña de vista previa del navegador, también puedes moverla a una pantalla independiente 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 que no admiten esta API, deberás proporcionar un comportamiento de resguardo (degradación elegante).

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 pequeños detalles en los cuadros de información sobre la herramienta. Cuando isPipSupported es true, la información sobre herramientas del botón para maximizar o minimizar alterna entre Activar 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 casos de uso interesantes para tu app web cuando se combina con la mejora progresiva o la degradación elegante.

No dejes que la compatibilidad limitada con navegadores 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.