Una Nuova Era per Picture-in-Picture su Chrome

Chrome ha recentemente introdotto una potente evoluzione della funzionalità Picture-in-Picture (PiP): l'API Document Picture-in-Picture. Come riportato da François Beaufort su Chrome Developers, questa nuova API espande significativamente le possibilità della modalità Picture-in-Picture, permettendo agli sviluppatori di inserire qualsiasi contenuto HTML in una finestra flottante, non più limitandosi ai soli elementi <video>.

Disponibile a partire da Chrome 116 (e Edge 116), questa funzionalità rappresenta un importante passo avanti per migliorare l'esperienza di multitasking sul web. Mentre Firefox e Safari non supportano ancora questa API, la sua introduzione apre scenari di utilizzo completamente nuovi per le applicazioni web.

Da Video-Only a Full HTML: Un'Evoluzione Significativa

Fino ad ora, l'API Picture-in-Picture tradizionale permetteva di staccare solo elementi video in una finestra separata, con limitate possibilità di personalizzazione. Con la nuova API Document Picture-in-Picture, gli sviluppatori possono creare finestre PiP con contenuti HTML arbitrari, offrendo esperienze molto più ricche e interattive.

La finestra Picture-in-Picture creata con questa API condivide alcune similitudini con una finestra aperta tramite window.open(), ma con importanti differenze:

Viene sempre visualizzata sopra le altre finestre
Non sopravvive mai alla finestra di apertura
Non è possibile navigare al suo interno
La sua posizione non può essere impostata programmaticamente dal sito web

Casi d'Uso Principali

Secondo quanto riportato da Chrome Developers, l'API Document Picture-in-Picture è stata progettata pensando a tre scenari principali:

1. Video Player Personalizzati

Con l'API tradizionale, i controlli disponibili nella finestra PiP erano molto limitati. La nuova API consente di creare player video con controlli completamente personalizzati, includendo sottotitoli, playlist, timeline interattive, pulsanti di like/dislike e qualsiasi altra funzionalità avanzata.

2. Videoconferenze

Gli utenti spesso escono dalla scheda del browser durante una videoconferenza per fare altre attività, pur volendo continuare a vedere la chiamata. L'API Document Picture-in-Picture permette ai servizi di videoconferenza di combinare facilmente più stream video in un'unica finestra PiP e fornire controlli personalizzati come l'invio di messaggi, la disattivazione dell'audio di altri partecipanti o il alzare la mano.

3. Strumenti di Produttività

Le ricerche citate da Chrome Developers hanno evidenziato che gli utenti necessitano di più modi per essere produttivi sul web. Questa API offre alle app web la flessibilità per mantenere contenuti sempre accessibili durante il multitasking, che si tratti di editor di testo, note, liste di attività, chat o strumenti di design e sviluppo.

Come Funziona: Interfaccia e Utilizzo Base

L'API Document Picture-in-Picture introduce nuovi metodi e proprietà a cui gli sviluppatori possono accedere tramite l'oggetto globale documentPictureInPicture.

Apertura di una Finestra PiP

Per aprire una finestra Picture-in-Picture, si utilizza il metodo requestWindow():

const pipButton = document.querySelector("#pipButton");

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Apre una finestra Picture-in-Picture
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Sposta il player nella finestra Picture-in-Picture
  pipWindow.document.body.append(player);
});

È importante notare che, per ragioni di sicurezza, l'apertura della finestra PiP richiede un gesto dell'utente, come un clic su un pulsante.

Personalizzazione delle Dimensioni

La finestra PiP può essere personalizzata in termini di dimensioni iniziali:

const pipWindow = await documentPictureInPicture.requestWindow({
  width: 400,
  height: 300,
});

Chrome limiterà automaticamente questi valori se sono troppo grandi o troppo piccoli, per garantire dimensioni utilizzabili.

Gestione degli Stili

Per mantenere la coerenza visiva, è possibile copiare i fogli di stile dalla finestra principale:

[...document.styleSheets].forEach((styleSheet) => {
  try {
    const cssRules = [...styleSheet.cssRules]
      .map((rule) => rule.cssText)
      .join("");
    const style = document.createElement("style");

    style.textContent = cssRules;
    pipWindow.document.head.appendChild(style);
  } catch (e) {
    const link = document.createElement("link");

    link.rel = "stylesheet";
    link.type = styleSheet.type;
    link.media = styleSheet.media;
    link.href = styleSheet.href;
    pipWindow.document.head.appendChild(link);
  }
});

Gestione della Chiusura

È possibile intercettare la chiusura della finestra PiP per ripristinare elementi nell'interfaccia principale:

pipWindow.addEventListener("pagehide", (event) => {
  const playerContainer = document.querySelector("#playerContainer");
  const pipPlayer = event.target.querySelector("#player");
  playerContainer.append(pipPlayer);
});

Funzionalità Avanzate

L'API offre anche funzionalità più avanzate che consentono un maggiore controllo sulla finestra PiP:

Nascondere il Pulsante "Torna alla Scheda"

A partire da Chrome 124, è possibile nascondere il pulsante che permette di tornare alla scheda di origine:

const pipWindow = await documentPictureInPicture.requestWindow({
  disallowReturnToOpener: true,
});

Ridimensionamento Programmabile

Da Chrome 121, è possibile ridimensionare la finestra programmaticamente, sempre in risposta a un gesto dell'utente:

const resizeButton = pipWindow.document.createElement("button");
resizeButton.textContent = "Ridimensiona";
resizeButton.addEventListener("click", () => {
  // Espande la larghezza di 20px e l'altezza di 30px
  pipWindow.resizeBy(20, 30);
});
pipWindow.document.body.append(resizeButton);

Media Query Specifiche

Da Chrome 123, i CSS possono utilizzare una media query specifica per il contesto Picture-in-Picture:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Implicazioni per gli Sviluppatori

L'introduzione dell'API Document Picture-in-Picture rappresenta un'opportunità significativa per gli sviluppatori di applicazioni web che desiderano migliorare l'esperienza di multitasking dei propri utenti. Ecco alcune considerazioni:

Design Responsive per Contesti PiP

Le finestre PiP sono generalmente piccole, quindi è fondamentale progettare interfacce che si adattino bene a queste dimensioni ridotte, mantenendo al contempo usabilità e leggibilità.

Rilevamento del Supporto

Prima di utilizzare questa funzionalità, è sempre importante verificare se il browser la supporta:

if ("documentPictureInPicture" in window) {
  // L'API Document Picture-in-Picture è supportata
}

Considerazioni sulla Batteria e Prestazioni

Le finestre PiP rappresentano un carico aggiuntivo per il sistema, quindi è importante ottimizzare il contenuto per ridurre il consumo di risorse, soprattutto su dispositivi mobili.

Conclusione: Nuove Possibilità per il Web

L'API Document Picture-in-Picture rappresenta un esempio concreto di come il web stia evolvendo verso esperienze sempre più simili alle applicazioni native, pur mantenendo i vantaggi della piattaforma web. La possibilità di creare finestre flottanti con contenuti HTML arbitrari apre scenari completamente nuovi per gli sviluppatori.

Da player video avanzati a mini-dashboard sempre visibili, da strumenti di produttività a interfacce di monitoraggio in tempo reale, le possibilità sono vaste e ancora da esplorare completamente. Sebbene al momento il supporto sia limitato a Chrome e Edge, questa API rappresenta un'interessante visione del futuro dell'interazione web.

Come sempre con le nuove API, è consigliabile adottare un approccio progressivo, utilizzando la funzionalità come miglioramento per i browser che la supportano, mantenendo allo stesso tempo un'esperienza funzionale per tutti gli utenti.

Document Picture-in-Picture: Ora Disponibile in Chrome per Qualsiasi Contenuto HTML

Edoardo Midali