Novità di Chrome 86

Pete LePage

Chrome 86 sta iniziando a essere implementato nella versione stabile.

Tieni presente quanto segue:

• L'API File System Access è ora disponibile in versione stabile.
• Sono disponibili nuove prove dell'origine per Web HID e l'API Multi-screen Window posizionamento.
• Ci sono alcune novità in CSS e molte altre.

Il mio nome è Pete LePage, che lavora e scatta da casa. Vediamo le novità di Chrome 86 per gli sviluppatori.

Accesso al file system

Attualmente, puoi utilizzare l'elemento <input type="file"> per leggere un file dal disco. Per salvare le modifiche, aggiungi download a un tag di ancoraggio, verrà visualizzato il selettore di file, quindi il file verrà salvato. Non c'è modo di scrivere nello stesso file che hai aperto. Questo flusso di lavoro è fastidioso.

Con l'API File System Access (in precedenza API Native File System), che è stata ritirata dalla versione di prova originale ed è ora disponibile in versione stabile, puoi chiamare showOpenFilePicker(), che mostra un selettore file e poi restituisce un handle file che puoi utilizzare per leggere il file.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Per salvare un file su disco, puoi utilizzare l'handle di file che hai precedentemente oppure chiamare showSaveFilePicker() per ottenere un nuovo handle.

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

Prima di scrivere, Chrome controlla se l'utente ha concesso l'autorizzazione di scrittura. Se l'autorizzazione di scrittura non è stata concessa, Chrome chiederà prima all'utente.

Se chiami showDirectoryPicker(), si aprirà una directory che ti consentirà di ottenere un elenco di file o di creare nuovi file al suo interno. Perfetto per IDE o lettori multimediali che interagiscono con molti file. Naturalmente, prima di poter scrivere qualcosa, l'utente deve concedere l'autorizzazione di scrittura.

L'API offre molte altre funzionalità, quindi consulta l'articolo sull'accesso al file system su web.dev.

Prova dell'origine: WebHID

I dispositivi di interfaccia umana, comunemente noti come HID, ricevono input o forniscono output a persone. Esiste una lunga coda di dispositivi di interfaccia umana che sono troppo nuovi, troppo vecchi o troppo insoliti per essere accessibili dai driver di dispositivo del sistema.

L'API WebHID, ora disponibile come prova di origine, risolve il problema fornendo un modo per accedere a questi dispositivi in JavaScript. Con WebHID, i giochi basati sul web possono sfruttare al meglio i gamepad, inclusi tutti i pulsanti, i joystick, i sensori, gli trigger, i LED, i rumble pack e altro ancora.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Le app di chat video basate sul web possono utilizzare i pulsanti di telefonia su altoparlanti specializzati per avviare o terminare chiamate, disattivare l'audio e altro ancora.

Naturalmente, API potenti come questa possono interagire con i dispositivi solo se l'utente sceglie esplicitamente di consentirlo.

Consulta l'articolo Connessione a dispositivi HID insoliti per ulteriori dettagli, esempi, come iniziare e una fantastica demo.

Prova dell'origine: API Multi-Screen Window Placement

Attualmente, puoi recuperare le proprietà della schermata in cui si trova la finestra del browser chiamando window.screen(). E se hai una configurazione con più monitor? Mi dispiace, il browser ti informerà solo sullo schermo su cui si trova al momento.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

L'API Multi-Screen Window posizionamento, avvia una prova dell'origine in Chrome 86, ti consente di enumerare gli schermi connessi alla tua macchina e di posizionare le finestre su schermate specifiche. La possibilità di posizionare finestre su schermate specifiche è fondamentale per app di presentazione, app di servizi finanziari e altro ancora.

Prima di poter utilizzare l'API, devi richiedere l'autorizzazione. In caso contrario, il browser lo chiederà all'utente la prima volta che lo utilizza.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Una volta che l'utente ha concesso l'autorizzazione, la chiamata a window.getScreens() restituisce una promessa che si risolve con un array di oggetti Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Posso quindi utilizzare queste informazioni quando chiamo requestFullScreen() o inserisco nuove finestre. Tom ha spiegato tutto nel suo articolo Gestire più display con l'API Multi-Screen Window Placement su web.dev.

E altro ancora

Il nuovo selettore CSS, :focus-visible, ti consente di attivare la stessa euristica impiegata dal browser quando decide se visualizzare l'indicatore di stato attivo predefinito.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Puoi personalizzare il colore, le dimensioni o il tipo di numero o di punto elenco per gli elenchi con l'elemento pseudo CSS ::marker.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Inoltre, Chrome Dev Summit sarà disponibile su una schermata vicino a te, quindi continua a seguire il nostro canale YouTube per ulteriori informazioni.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 86.

• Novità di Chrome DevTools (86)
• Ritiro e rimozioni in Chrome 86
• Aggiornamenti di ChromeStatus.com per Chrome 86
• Novità di JavaScript in Chrome 86
• Elenco delle modifiche al repository di codice sorgente di Chromium

Iscriviti

Se vuoi rimanere al passo con i nostri video, abbonati al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video oppure aggiungi il nostro feed RSS al tuo feed reader.

Sono Pete LePage e, non appena verrà rilasciato Chrome 87, sarò qui per dirti tutte le novità di Chrome.