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 sbloccare nuovi entusiasmanti casi d'uso.

Supporto del browser e miglioramento progressivo

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

Tuttavia, questo non dovrebbe impedirti di utilizzarlo con miglioramento progressivo o degradazione controllata.

Quando pianifichi il caso d'uso, assicurati di trattarlo come un miglioramento progressivo anziché come una funzionalità standard. In questo articolo, vedrai un esempio di degradazione controllata.

Migliorare l'esperienza utente dello studente 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.

Il seguente screencast 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 a schede. Per impostazione predefinita, l'utente può visualizzare le istruzioni della sfida e fare clic sulla scheda Browser per visualizzare un'anteprima in tempo reale.

In qualità di studente, a volte potresti voler massimizzare la finestra di anteprima del browser. È l'occasione perfetta per aggiungere il supporto per l'API Document Picture-in-Picture.

Per implementare questa funzionalità, inizia verificando il supporto del browser:

const isPipSupported = "documentPictureInPicture" in window;

Ora puoi utilizzare questa variabile per eseguire il wrapping di qualsiasi chiamata documentPictureInPicture o per uscire in anticipo da una funzione che si basa sulla funzionalità PIP per i documenti. Il seguente codice verifica il supporto di Document PiP, quindi apre una finestra 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 la corrispondenza con un elemento specifico, il documento corrente o persino fornire valori fissi.

Finora hai un documento vuoto. Ora devi riempirlo di 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 ingrandimento che si apre in una finestra PIP separata.Oltre a ingrandire la scheda di anteprima del browser, puoi anche spostarla su uno schermo separato se hai un monitor esterno o persino 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, dovrai fornire un comportamento di fallback (degradazione controllata).

Invece di estrarre l'intera scheda di anteprima del browser, possiamo fare in modo che il pulsante di massimizzazione 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 si alterna tra Attiva Picture in picture e Disattiva Picture in picture. D'altra parte, quando isPipSupported è false, il comportamento di fallback è descritto con Massimizza e Riduci al minimo.

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

Non lasciare che il supporto limitato del browser ti limiti e non dimenticare di avere un caso d'uso di fallback decente.

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