Novità di Chrome 91

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage, lavoro e lavoro da casa, scopriamo le novità di Chrome 91 per gli sviluppatori.

Nomi suggeriti per l'API File System Access

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

A partire dalla versione 91 di Chrome, puoi suggerire il nome e la posizione di un file o di una directory con cui interagire. Per farlo, trasmetti una proprietà suggestedName come parte 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 directory iniziale predefinita. Ad esempio, è probabile che un editor di testo voglia avviare il salvataggio del file o la finestra di dialogo Apertura file nella cartella documents. Mentre un editor di immagini probabilmente vuole iniziare dalla cartella pictures. Puoi suggerire una directory iniziale predefinita passando una proprietà startIn.

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

Per informazioni dettagliate, leggi il post di Tommaso sull'accesso al file system.

Lettura di file dagli appunti

In Chrome 91 è disponibile un'altra nuova, interessante API per l'interazione con i file. Sul computer, le app web ora possono leggere i file dagli appunti. La lettura di file dagli appunti è disponibile in Safari dal 2018.

Naturalmente, non avrai accesso illimitato agli appunti, quindi dovrai impostare un listener di eventi paste. Quindi, nel gestore di eventi, puoi accedere ai contenuti di ogni file negli appunti.

window.addEventListener('paste', onPaste);

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

Condividere le credenziali su siti affiliati

Se il tuo sito ha più domini e questi condividono lo stesso backend per la gestione degli account, ora puoi associare i tuoi siti l'uno all'altro, consentendo agli utenti di salvare le credenziali una sola volta e che il Gestore delle password di Chrome le suggerisca a uno qualsiasi dei tuoi siti affiliati.

Si tratta della situazione ideale quando il sito viene pubblicato da domini di primo livello diversi, come google.com e google.ca. O forse hai più nomi di dominio.

Per associare i tuoi siti web, devi creare un file assetlinks.json che definisca la relazione tra i domini. Nell'esempio seguente, dico al browser che entrambi 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 il primo giorno, quindi consulta l'articolo su come attivare la condivisione delle credenziali di accesso in Chrome tra siti affiliati per i dettagli più recenti.

E tanto altro.

Ovviamente c'è molto altro.

Tutti i video della conferenza I/O 2021 sono ora online e puoi trovare contenuti fantastici, dai un'occhiata.

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

Web Assembly SIMD ha terminato la prova dell'origine ed è disponibile per tutti gli utenti.

Gli elementi del modulo aggiornati sono finalmente arrivati su Android, migliorando l'esperienza utente.

Inoltre, l'attributo media dell'elemento <link> verrà rispettato per link rel="icon", il che significa che puoi definire icone diverse in base alle query multimediali. 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

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

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 92 di Chrome, sarò qui per farti conoscere le novità di Chrome.