Novità di Chrome 86

Pete LePage

Inizia ora l'implementazione di Chrome 86 nella versione stabile.

Tieni presente quanto segue:

Mi chiamo Pete LePage e lavoro da casa. Vediamo le novità di Chrome 86 per gli sviluppatori.

Accesso al file system

Oggi puoi usare l'elemento <input type="file"> per leggere un file dal disco. Per salvare le modifiche, aggiungi download a un anchor tag: verrà visualizzato il selettore file e 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 ha superato la prova dell'origine ed è ora disponibile in versione stabile, puoi chiamare showOpenFilePicker(), che mostra un selettore di file, poi restituisce un handle di file che puoi usare 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 del file ricevuto in precedenza o 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();
}
schermata del prompt di autorizzazione
Chiedi all'utente di richiedere l'autorizzazione per scrivere in un file.

Prima di scrivere, Chrome controllerà se l'utente ha concesso l'autorizzazione di scrittura. Se questa autorizzazione non è stata concessa, Chrome informerà l'utente.

Se chiami showDirectoryPicker(), si aprirà una directory che ti consentirà di ottenere un elenco di file o di creare nuovi file nella directory. È l'ideale per elementi come IDE o lettori multimediali che interagiscono con molti file. Naturalmente, prima di poter scrivere qualsiasi cosa, l'utente deve concedere l'autorizzazione di scrittura.

Le funzionalità dell'API sono molte altre, quindi consulta l'articolo Accesso al file system su web.dev.

Prova dell'origine: WebHID

Controller di gioco
Controller di gioco.

I dispositivi di interfaccia umana, comunemente indicati come HID, ricevono input o forniscono output agli esseri umani. C'è una lunga coda di dispositivi di interfaccia umana troppo nuovi, troppo vecchi o troppo insoliti per essere accessibili dai driver dei dispositivi dei sistemi.

L'API WebHID, ora disponibile come prova dell'origine, risolve questo problema fornendo un modo per accedere a questi dispositivi in JavaScript. Con WebHID, i giochi basati sul web possono sfruttare appieno i gamepad, inclusi tutti i pulsanti, i joystick, i sensori, i trigger, i LED, i pacchetti rumble 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 video chat basate sul web possono utilizzare i pulsanti di telefonia su altoparlanti specializzati, per avviare o terminare le chiamate, disattivare l'audio e altro ancora.

Selettore dispositivo HID
Selettore dispositivo HID.

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

Leggi l'articolo Connessione a dispositivi HID insoliti per ulteriori dettagli, esempi, come iniziare e un'interessante demo.


Prova dell'origine: API Multi-Screen Window Placement

Oggi puoi ottenere le proprietà della schermata su cui è attiva la finestra del browser chiamando window.screen(). E se avessi una configurazione multi-monitor? Mi dispiace, il browser ti fornirà solo informazioni sullo schermo in cui è visualizzato 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, ti consente di enumerare le schermate collegate alla tua macchina e di posizionare le finestre su schermate specifiche. La possibilità di posizionare le finestre su schermi specifici è 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 chiederà all'utente la prima volta che provi a utilizzarlo.

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 metto nuove finestre. Tom descrive tutti i dettagli nel suo articolo Gestire diversi 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 utilizzata dal browser per decidere se visualizzare o meno 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 punto elenco per gli elenchi con lo pseudo-elemento ::marker CSS.

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

Il Chrome Dev Summit sarà disponibile su uno schermo vicino a te, quindi continua a seguirci per saperne di più sul nostro canale YouTube.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 86.

Iscriviti

Se vuoi tenerti al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che viene lanciato un nuovo video o quando aggiungiamo il nostro feed RSS al tuo lettore di feed.

Mi chiamo Pete LePage e, non appena uscirà Chrome 87, sarò qui per dirti le novità di Chrome.