Novità di Chrome 132

Pete LePage

Tieni presente quanto segue:

• L'evento ToggleEvent dell'elemento di dialogo ti consente di sapere quando un <dialog> si è aperto o chiuso.
• Acquisisci elementi specifici per la condivisione di video.
• L'API File System Access è ora disponibile su Android e nelle WebView
• E c'è molto altro.

Sono Pete LePage. Vediamo le novità per gli sviluppatori in Chrome 132.

Eventi di attivazione/disattivazione dell'elemento di dialogo

L'elemento <dialog> è utile per rappresentare qualsiasi tipo di finestra di dialogo in HTML. È disponibile a livello di base su larga scala, il che significa che funziona su tutti i browser. Purtroppo, l'implementazione iniziale non includeva un modo diretto per rilevare quando si apre o si chiude una finestra di dialogo.

A partire da Chrome 132, è disponibile un nuovo ToggleEvent. Incorpora lo stesso ToggleEvent inviato da un popover. Per gli elementi <dialog>, quando viene chiamato showModal o show, <dialog> invia un ToggleEvent con newState=open. Quando un <dialog> viene chiuso (utilizzando un modulo, un pulsante o un closewatcher), viene inviato un ToggleEvent con newState=closed.

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

Acquisizione di elementi

La piattaforma web consente a un'app web di acquisire una traccia video della scheda o della regione corrente e, a partire da Chrome 132, le app web possono acquisire un elemento. Questa funzionalità è particolarmente utile quando gli elementi sono posizionati in modo da sovrapporsi.

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

Dai un'occhiata alla demo.

L'API File System Access su Android e WebView

L'API File System Access è disponibile su Chrome per computer da un po' di tempo e consente alle app web di interagire con i file sul file system locale degli utenti. A partire da Chrome 132, l'API è ora disponibile su Android e in WebView.

Per leggere un file, chiama showOpenFilePicker(), che mostra un selettore di file, quindi restituisce un handle file che puoi utilizzare per leggere il file. Per salvare un file sul disco, puoi utilizzare l'handle file ottenuto in precedenza o chiamare showSaveFilePicker() per ottenere un nuovo handle file.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

E tanto altro.

Ovviamente c'è molto altro.

• Supporto per le parole chiave sideways-rl e sideways-lr per la proprietà CSS writing-mode.
• L'implementazione dei container con barre di scorrimento attivabili da tastiera è ripresa.
• Aggiungi un metodo bytes() alle interfacce Request e Response, che restituisce una promessa che si risolve con un Uint8Array.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per altre modifiche in Chrome 132.

• Note di rilascio di Chrome 132.
• Novità di Chrome DevTools (132).
• Aggiornamenti di ChromeStatus.com per Chrome 132.
• Calendario delle release di Chrome.

Iscriviti

Per non perderti nessuna novità, abbonati al canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Non appena verrà rilasciata la versione 133 di Chrome, ti comunicheremo le novità.