Novità di Chrome 91

Pete LePage

Tieni presente quanto segue:

Il mio nome è Pete LePage, lavorando e registrando da casa. Vediamo in dettaglio le novità di Chrome 91 per gli sviluppatori.

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 dispositivo locale dell'utente, allo stesso modo di 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 directory iniziale predefinita trasmettendo 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 negli appunti è 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.

È la soluzione ideale se il 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, indico 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 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.

Naturalmente c'è molto altro.

Tutti i video dell'I/O 2021 sono online ora, ci sono contenuti interessanti, dai un'occhiata!

Web Transport, precedentemente chiamato Quic Transport, ha subito una serie di cambiamenti e sta iniziando 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 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.

Mi chiamo Pete LePage e non appena uscirà Chrome 92, sarò felice di dirti le novità di Chrome.