Sfrutta casi d'uso interessanti con l'API Document Picture-in-Picture

Jad Joubran

Data di pubblicazione: 4 marzo 2025

L'API Document Picture-in-Picture (API Document PiP) consente alle applicazioni web di aprire una finestra mobile sempre in primo piano (una finestra Picture-in-Picture) che può visualizzare qualsiasi contenuto HTML arbitrario.

Questa API si basa sull'API Picture-in-Picture per <video>, che ti consente di continuare a guardare i video in una finestra PiP.

Poiché l'API Document PiP può visualizzare qualsiasi contenuto HTML arbitrario, puoi utilizzarla per accedere a nuovi interessanti casi d'uso.

Supporto dei browser e miglioramento progressivo

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: not supported.
  • Safari: not supported.

Source

Al momento della stesura di questo articolo, l'API Document Picture-in-Picture ha una disponibilità limitata.

Tuttavia, questo non dovrebbe impedirti di utilizzarlo con il miglioramento progressivo o il degradimento graduale.

Quando pianifichi il caso d'uso, assicurati di trattarlo come un miglioramento progressivo anziché come una funzionalità standard. Questo articolo mostra un esempio di degradamento graduale.

Migliorare l'esperienza utente dell'apprendente con l'API Document PiP

LearnHTMLCSS.online è una piattaforma di apprendimento interattiva che insegna HTML e CSS semantici e accessibili. Offre un editor di testo interattivo e una finestra di anteprima del browser.

Lo screencast seguente mostra il layout dell'app; lo schermo è diviso in due colonne. La prima colonna contiene l'editor di codice. La seconda colonna contiene un layout con schede. Per impostazione predefinita, l'utente può vedere le istruzioni della sfida e fare clic sulla scheda Browser per visualizzare un'anteprima in tempo reale.

Come studente, a volte potresti voler massimizzare la finestra di anteprima del browser. Questa è un'opportunità perfetta per aggiungere il supporto dell'API Document Picture-in-Picture.

Per implementare questa funzionalità, inizia controllando la compatibilità con il browser:

const isPipSupported = "documentPictureInPicture" in window;

Ora puoi utilizzare questa variabile per eseguire il wrapping di qualsiasi chiamata documentPictureInPicture o per tornare in modo anticipato da una funzione che si basa su Document PiP. Il codice seguente verifica il supporto di Document PiP, quindi apre una finestra di Document PiP.

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

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

A seconda del caso d'uso, puoi specificare qualsiasi larghezza e altezza per la finestra. Puoi provare a trovare una corrispondenza con un determinato elemento, il documento corrente o anche fornire valori fissi.

Finora hai un documento vuoto. Ora devi compilarlo con i contenuti.

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

Per i problemi relativi al codice CSS, dovrai anche sincronizzare il CSS.

È tutto. Ora hai un pulsante di espansione che si apre in una finestra PiP separata.Oltre a espandere la scheda di anteprima del browser, puoi anche spostarla su uno schermo separato se hai un monitor esterno o addirittura riorganizzare l'app web principale e la scheda di anteprima del browser in un layout a colonne.

Fallback

Tieni presente che questa API ha una disponibilità limitata. Sui browser e sui dispositivi in cui questa API non è supportata, dovresti fornire un comportamento di riserva (degradamento graduale).

Invece di fare in modo che il pulsante di massimizzazione estragga l'intera scheda di anteprima del browser, possiamo fare in modo che occupi tutto lo spazio rimanente dell'app web corrente.

Prova questo comportamento in browser diversi: https://learnhtmlcss.online/app.html?id=2096

Non dimenticare di prestare attenzione ai piccoli dettagli nelle descrizioni comando. Quando isPipSupported è true, la descrizione comando del pulsante di massimizzazione/riduzione a icona passa da Attiva Picture in picture a Esci da Picture in picture. D'altra parte, quando isPipSupported è false, il comportamento di riserva è descritto con Maximize e Minimize.

Come puoi vedere, l'API Document Picture-in-Picture può sbloccare nuovi interessanti casi d'uso per la tua app web se combinata con il miglioramento progressivo o il ritiro graduale.

Non lasciare che il supporto limitato dei browser ti limiti e non dimenticare di avere un caso d'uso di riserva adeguato.

Consulta la documentazione di Document PiP per esplorare vari esempi e casi d'uso di questa API.