Novità di Chrome 85

Pete LePage

Il rilascio di Chrome 85 nella versione stabile è iniziato.

Tieni presente quanto segue:

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

Visibilità dei contenuti

Processo di rendering dei browser

Per trasformare il codice HTML in qualcosa che l'utente può vedere, il browser deve eseguire una serie di passaggi prima di poter anche solo disegnare il primo pixel. E lo fa per l'intera pagina, anche per i contenuti non visibili nell'area visibile.

L'applicazione di content-visibility: auto a un elemento indica al browser che può saltare il lavoro di rendering per quell'elemento finché non viene visualizzato nel viewport, fornendo un rendering iniziale più rapido.


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

Per ottenere il massimo impatto da content-visibility, applicalo alle sezioni principali con algoritmi di layout più complessi, come flexbox e grid, o con sezioni secondarie 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.

Consulta la sezione sulla visibilità dei contenuti per scoprire come utilizzarla per migliorare il rendimento 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 proprietà personalizzate. Ne ho parlato in precedenza nell'articolo 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 codice CSS. Ciò che amo delle proprietà CSS è che attribuiscono alla proprietà un significato semantico, valori di riserva e persino consentono i test CSS.

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

Una ha scritto un post fantastico @property: superpoteri per le variabili CSS che mostra come utilizzarle.

Ottenere le app correlate installate

L'API getInstalledRelatedApps() ti consente di controllare se la tua app è installata e di personalizzare l'esperienza utente.

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

Quando è stato rilasciato per la prima volta in Chrome 80, funzionava solo per le app per Android. Ora, su Android, può anche controllare se la tua PWA è installata. Inoltre, su Windows può controllare se l'app UWP per 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? getInstalledRelatedApps() ti dirà come. su web.dev per scoprire come funziona e come firmare le tue app per dimostrare che sono tue.

Scorciatoie per le icone delle app

Scorciatoia per l'icona dell'app su Windows

In Chrome 84 abbiamo aggiunto il supporto delle scorciatoie per le icone delle app. Ho detto per sbaglio che erano disponibili ovunque, ma in realtà erano disponibili 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" }
    ]
  }
]

Consulta l'articolo Scorciatoie per le icone delle app su web.dev per informazioni complete. Mi dispiace per la confusione che ho causato.

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

A partire da Chrome 85, lo streaming di caricamento fetch è disponibile come prova dell'origine. Ti consente di avviare un recupero prima che il corpo della richiesta sia pronto. In precedenza, puoi avviare una richiesta solo quando hai tutto il corpo pronto per l'uso. Ma ora puoi iniziare a inviare contenuti anche mentre li generi.

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 mentre vengono acquisiti dal microfono o dalla videocamera.

Jake ha esaminato in dettaglio le richieste in streaming con l'API fetch su web.dev e le ha trattate anche nell'ultimo video HTTP203 - Streaming requests with fetch.

E altro ancora

Ovviamente, ce ne sono molti altri.

Promise.any restituisce una promessa che viene soddisfatta dalla prima promessa data da soddisfare o rifiutare.

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

Sostituire tutte le istanze in una stringa è più facile con .replaceAll(), non sono più necessarie le 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.

Chrome 85 aggiunge il supporto per la decodifica di AVIF, un formato di immagine codificato con AV1 e standardizzato dall'Alliance for Open Media. AVIF offre significativi guadagni in termini di compressione rispetto a JPEG e WebP. Un recente studio di Netflix ha dimostrato un risparmio del 50% rispetto al JPEG standard e di oltre il 60% sui contenuti 4:4:4.

Inoltre, è iniziata la rimozione di AppCache.

Per approfondire

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

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e finalmente mi sono tagliato i capelli.

Non appena verrà rilasciato Chrome 86, sarò qui per raccontarti le novità di Chrome.