Novità di Chrome 86

Pete LePage

Chrome 86 sta iniziando a essere implementato nella versione stabile.

Tieni presente quanto segue:

Sono Pete LePage, lavoro e filmo da casa. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 86.

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 è possibile 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 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();
}
screenshot della richiesta di autorizzazione
Chiedi all'utente l'autorizzazione a scrivere in un file.

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

Controller di gioco
Controller di gioco.

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 videochiamate basate sul web possono utilizzare i pulsanti di telefonia su speaker specializzati per avviare o terminare le chiamate, disattivare l'audio e altro ancora.

Selettore di dispositivi HID
Selettore di dispositivi HID.

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 multi-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 Placement avvia una prova dell'origine in Chrome 86, consente di enumerare gli schermi connessi al computer e di posizionare le finestre su schermi specifici. 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 per decidere 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 uno schermo vicino a te, quindi continua a seguire il nostro canale YouTube per ulteriori informazioni.

Per approfondire

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

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.