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 potenziamento progressivo

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

Tuttavia, questo non dovrebbe impedirti di utilizzarlo con potenziamento progressivo o riduzione controllata.

Quando pianifichi il tuo caso d'uso, assicurati di trattarlo come un potenziamento progressivo anziché come una funzionalità standard. In questo articolo vedrai un esempio di riduzione 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 live.

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 su Document PiP. 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 con il 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 potenziamento progressivo o la riduzione controllata.

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

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