Novità di Chrome 85

Pete LePage

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

Tieni presente quanto segue:

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

Visibilità dei contenuti

Processo di rendering dei browser

Per trasformare il codice HTML in un elemento visibile all'utente, è necessario che il browser esegua una serie di passaggi prima di poter effettivamente colorare il primo pixel. Lo fa per l'intera pagina, anche per i contenuti che non sono visibili nell'area visibile.

Applicando content-visibility: auto a un elemento, comunica al browser che può saltare il lavoro di rendering per quell'elemento finché non scorre nell'area visibile, fornendo un rendering iniziale più veloce.


.my-class {
  content-visibility: auto;
}

Per ottenere il massimo da content-visibility, applicalo alle sezioni principali con algoritmi di layout più complessi, come flexbox e grid, o che hanno elementi secondari con layout propri.

Suddividendo i contenuti e aggiungendo content-visibility: auto;, questa pagina è passata da un tempo di rendering di 232 ms a soli 30 ms.

Controlla la visibilità dei contenuti per scoprire come puoi utilizzarli per migliorare le prestazioni del rendering.

@property e variabili CSS

Le variabili CSS, tecnicamente chiamate proprietà personalizzate, sono fantastiche. Con l'API Houdini CSS Properties and Values, puoi definire un tipo e un valore di riserva predefinito per le tue proprietà personalizzate. Ne ho già parlato nella sezione Novità di Chrome 78, quando abbiamo aggiunto il supporto per la loro definizione in JavaScript.

A partire da Chrome 85, puoi anche definire e impostare le proprietà CSS direttamente nel CSS. Ciò che mi piace delle proprietà CSS è che fornisce il significato semantico della proprietà, i valori di riserva e consente persino il test CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una ha un ottimo post: @property: dare superpoteri alle variabili CSS che ti mostra come utilizzarle.

Scaricare le app correlate installate

L'API getInstalledRelatedApps() permette di verificare se la tua app è installata e di personalizzare l'esperienza utente.

Ad esempio, mostra all'utente contenuti diversi su una pagina di destinazione se l'app è già installata. Centralizza le funzionalità sovrapposte in un'app per evitare confusione. Se invece l'app nativa è già installata, non promuovere l'installazione della PWA.

Quando è stato spedito per la prima volta con Chrome 80, funzionava solo per le app Android. Ora, su Android, può anche controllare se la PWA è installata. Inoltre su Windows, puoi controllare se la tua app UWP Windows è installata.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Leggi il mio articolo La tua app è installata? Te lo dirà getInstalledRelatedApps()! su web.dev per vedere come funziona e come firmare le tue app per dimostrare che sono davvero tue.

Scorciatoie per le icone delle app

Scorciatoia icona app su Windows

In Chrome 84 abbiamo aggiunto il supporto delle scorciatoie icona app. Per errore ho detto che erano disponibili ovunque, ma solo su Android. Ora, in Chrome 85, sono disponibili su Android e Windows, nonché su Chrome ed Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Per i dettagli completi, leggi l'articolo Scorciatoie per le icone delle app su web.dev e mi scuso per la confusione che ho causato.

Prova dell'origine: richieste di streaming con fetch()

A partire da Chrome 85, il flusso di caricamento di fetch è disponibile come prova dell'origine. Ti permette di avviare un recupero prima che il corpo della richiesta sia pronto. In precedenza, potevi avviare una richiesta solo quando tutto il corpo era pronto. Ora, invece, puoi iniziare a inviare contenuti, anche mentre è ancora in corso la loro generazione.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Ad esempio, puoi utilizzarlo per riscaldare il server o per riprodurre in streaming audio o video acquisiti dal microfono o dalla videocamera.

Jake ha esaminato in dettaglio Le richieste di flusso con l'API fetch su web.dev e ne ha parlato anche nel video più recente HTTP203 - Streaming requests with fetch.

E altro ancora

Ovviamente c'è molto altro.

Promise.any restituisce una promessa che è soddisfatta dalla prima promessa data di essere mantenuta o rifiutata.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

La sostituzione di tutte le istanze in una stringa è più facile con .replaceAll(), senza più utilizzare espressioni regolari.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

In Chrome 85 viene aggiunto il supporto della decodifica per AVIF, un formato di immagine codificato con AV1 e standardizzato da Alliance for Open Media. AVIF offre notevoli miglioramenti della compressione rispetto a JPEG e WebP, con un recente studio di Netflix che ha mostrato il 50% di risparmio rispetto al formato JPEG standard e oltre il 60% di risparmio sui contenuti 4:4:4.

La rimozione di AppCache è iniziata.

Per approfondire

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

Iscriviti

Se vuoi tenerti sempre 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.

Mi chiamo Pete LePage e finalmente ho fatto un taglio dei capelli!

Non appena uscirà Chrome 86, sarò qui per informarti sulle novità di Chrome.