Novità di Chrome 91

Pete LePage

Tieni presente quanto segue:

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

Nomi suggeriti per l'API File System Access

Una delle mie API preferite uscite dal progetto Fugu quest'anno è le API di accesso al file system. Una volta che l'utente ha concesso l'autorizzazione, le app possono interagire con i file sul suo dispositivo locale, come fanno le altre app installate, consentendoti di creare un'esperienza utente più naturale.

A partire da Chrome 91, ora puoi suggerire il nome e la posizione di un file o di una directory con cui interagire. A questo scopo, passa una proprietà suggestedName nell'ambito delle opzioni showSaveFilePicker.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Lo stesso vale per la home directory predefinita. Ad esempio, un editor di testo probabilmente vuole avviare la finestra di dialogo di salvataggio o apertura del file nella cartella documents. Mentre un editor di immagini probabilmente vuole iniziare dalla cartella pictures. Puoi suggerire una home directory predefinita passando una proprietà startIn.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Per maggiori dettagli, consulta il post di Tom sull'accesso al file system.

Lettura dei file dagli appunti

C'è un'altra nuova API interessante per interagire con i file che sarà disponibile in Chrome 91. Sul computer, le app web ora possono leggere i file dagli appunti. La lettura di file dalla clipboard è disponibile in Safari dal 2018.

Ovviamente, non hai accesso illimitato agli appunti, quindi dovrai configurare un ascoltatore di eventi paste. Poi, nel gestore eventi, puoi accedere ai contenuti di ogni file nella clipboard.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Condividere le credenziali sui siti affiliati

Se il tuo sito ha più domini che condividono lo stesso backend per la gestione degli account, ora puoi associarli tra loro, consentendo agli utenti di salvare le credenziali una volta e di farle suggerire dal Gestore delle password di Chrome a qualsiasi sito affiliato.

Questa opzione è ideale quando il tuo sito viene pubblicato da diversi domini di primo livello, come google.com e google.ca. Oppure potresti avere più nomi di dominio.

Per associare i tuoi siti web, devi creare un file assetlinks.json che definisce la relazione tra i domini. Nell'esempio riportato di seguito, comunico al browser che i domini .com e .co.uk sono correlati e possono condividere le credenziali.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Quindi, ospita il file assetlinks.json nella cartella .well-known per ogni dominio.

Questa funzionalità inizierà a essere implementata gradualmente in Chrome 91 e potrebbe non essere disponibile fin dal primo giorno, quindi consulta Consentire a Chrome di condividere le credenziali di accesso tra i siti affiliati per i dettagli più recenti.

E tanto altro.

Ovviamente ce ne sono molti altri.

Tutti i video di I/O 2021 sono ora online e contengono contenuti fantastici, quindi dai un'occhiata.

Web Transport, precedentemente chiamato Quic Transport, ha subito una serie di modifiche e sta avviando una nuova prova dell'origine.

Il periodo di prova di Web Assembly SIMD è terminato ed è ora disponibile per tutti gli utenti.

Gli elementi dei moduli aggiornati sono finalmente disponibili su Android, migliorando così l'esperienza utente.

L'attributo media dell'elemento <link> verrà rispettato per link rel="icon", il che significa che puoi definire icone diverse in base alle query di media. Ad esempio, icone diverse per le modalità Buio e Luce.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Per approfondire

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

Iscriviti

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

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