Novità di Chrome 85

Pete LePage

L'implementazione di Chrome 85 nella versione stabile è in corso.

Ecco cosa devi sapere:

Sono Pete LePage, lavoro e filmo da casa. Scopriamo insieme le novità per gli sviluppatori di Chrome 85.

Visibilità dei contenuti

Procedura di rendering dei browser

Per trasformare l'HTML in qualcosa che l'utente possa vedere, il browser deve eseguire una serie di passaggi prima di poter visualizzare 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 rendering di quell'elemento finché non viene visualizzato nel riquadro, 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, grid o che hanno elementi secondari con layout contenuti propri.

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

Consulta la visibilità dei contenuti per scoprire come puoi 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 tue proprietà personalizzate. Ne ho parlato in precedenza in 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 amo delle proprietà CSS è che conferiscono alla proprietà un significato semantico, valori di riserva e consentono persino di eseguire test CSS.

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

Una ha scritto un ottimo post @property: giving superpowers to CSS variables che mostra come utilizzarle.

Visualizzare le app correlate installate

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

Ad esempio, mostra all'utente contenuti diversi 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 la tua app nativa è già installata, non promuovere l'installazione della tua PWA.

Al momento del lancio 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 di Windows è installata.

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

Dai un'occhiata al mio articolo L'app è installata? getInstalledRelatedApps() ti dirà tutto! su web.dev per scoprire come funziona e come firmare le tue app per dimostrare che sono tue.

Scorciatoie delle icone delle app

Scorciatoia dell'icona dell'app su Windows

In Chrome 84 abbiamo aggiunto il supporto per le scorciatoie delle icone delle app. Ho detto per sbaglio che erano disponibili ovunque, ma erano disponibili solo su Android. Ora, in Chrome 85, sono disponibili su Android e Windows e sia in Chrome che in 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 tutti i dettagli, consulta l'articolo Scorciatoie delle icone delle app su web.dev. Mi scuso 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. Consente di avviare un recupero prima che il corpo della richiesta sia pronto. In precedenza, potevi avviare una richiesta solo dopo aver preparato l'intero corpo. Ora puoi iniziare a inviare contenuti anche mentre li stai ancora generando.

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

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

Ad esempio, utilizzalo per riscaldare il server o per riprodurre in streaming audio o video man mano che vengono acquisiti dal microfono o dalla videocamera.

Jake ha esaminato in dettaglio Streaming requests with the fetch API su web.dev e ne ha parlato anche nell'ultimo video HTTP203 - Streaming requests with fetch.

E altro ancora

Ovviamente, c'è molto altro.

Promise.any restituisce una promessa che viene soddisfatta dalla prima promessa fornita che viene soddisfatta o rifiutata.

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

Sostituire tutte le istanze in una stringa è più semplice con .replaceAll(), niente più 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 della decodifica per AVIF, un formato di immagine codificato con AV1 e standardizzato dall'Alliance for Open Media. AVIF offre vantaggi significativi in termini di compressione rispetto a JPEG e WebP. Un recente studio di Netflix mostra un risparmio del 50% rispetto a JPEG standard e un risparmio superiore al 60% per i contenuti 4:4:4.

Inoltre, è iniziata la rimozione di AppCache.

Per approfondire

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

Iscriviti

Se vuoi rimanere al corrente dei nostri video, iscriviti al nostro canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

Sono Pete LePage e finalmente ho tagliato i capelli.

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