Novità di Chrome 96

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage, finalmente sto girando in studio, vediamo subito le novità per gli sviluppatori in Chrome 96.

Manifest id per le PWA

Quando un utente installa una PWA, il browser ha bisogno di un modo per identificarla in modo univoco. Tuttavia, fino a poco tempo fa, la specifica del manifest dell'app web non specificava come identificare una PWA, lasciando la decisione ai browser e portando a implementazioni diverse. In alcuni browser viene utilizzato start_url, mentre in altri viene utilizzato il percorso del file manifest.

Ciò rende impossibile modificare uno di questi campi senza interrompere l'esperienza di installazione. Ora è disponibile una nuova proprietà facoltativa id che consente di definire esplicitamente l'identificatore utilizzato per la PWA.

L'aggiunta della proprietà id al manifest rimuove la dipendenza da start_url o dalla posizione del manifest e consente l'aggiornamento di questi campi.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Il supporto della proprietà id sarà disponibile nei browser desktop basati su Chromium a partire da Chrome 96. Il supporto per il mobile, che attualmente utilizza l'URL manifest come ID univoco, dovrebbe essere disponibile nella prima metà del 2022.

DevTools che mostra l'ID app calcolato

Se hai già una PWA in produzione e vuoi aggiungere un id al tuo manifest, devi utilizzare l'ID assegnato dal browser. Puoi trovare id nel riquadro Manifest del riquadro Applicazione in Strumenti per gli sviluppatori.

Per una nuova PWA, puoi impostare id su qualsiasi valore di stringa, ma ricorda che non potrai modificarlo in futuro, quindi scegli con attenzione.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Per ulteriori informazioni, consulta Identificare in modo univoco le PWA con la proprietà ID manifest dell'app web.

Gestori di protocollo URL per le PWA

Le app web possono utilizzare navigator.registerProtocolHandler() per registrarsi come gestori di protocollo. Ad esempio, Gmail può registrare il protocollo mailto. Quando un utente fa clic su un link con il prefisso mailto:, si aprirà Gmail, consentendo all'utente di inviare facilmente un'email.

A partire da Chrome 96, una PWA può registrarsi come gestore di protocollo nell'ambito della sua installazione. Per farlo per la tua PWA, aggiungi una proprietà protocol_handlers al manifest della tua app web, specifica il protocol che vuoi gestire e il url che deve essere aperto quando viene fatto clic.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Esistono alcune limitazioni e non puoi registrare un protocollo qualsiasi, quindi consulta la pagina Registrazione del gestore di protocollo URL per le PWA per informazioni dettagliate e su come utilizzare la sintassi web+ per creare i tuoi protocolli.

Suggerimenti sulla priorità (prova dell'origine)

Quando un browser analizza una pagina web e inizia a scoprire e scaricare risorse come immagini, script o CSS, assegna loro una priorità di recupero per provare a ottimizzare il caricamento della pagina. I browser sono abbastanza bravi ad assegnare priorità, ma potrebbe non essere ottimale in tutti i casi.

Gli indicatori di priorità sono una funzionalità sperimentale, disponibile come prova dell'origine a partire da Chrome 96, e possono contribuire a ottimizzare i Segnali web essenziali. L'attributo importance consente di specificare la priorità per i tipi di risorse come CSS, caratteri, script, immagini e iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Ad esempio, ecco la pagina di Google Voli. L'immagine di sfondo è il Largest Contentful Paint (LCP).

Screenshot di Google Voli con un&#39;immagine di sfondo di grandi dimensioni

Vediamo come viene caricato con e senza suggerimenti di priorità. Con la priorità impostata su high sull'immagine di sfondo, il valore LCP scende da 2,6 secondi a 1,9 secondi.

Consulta l'articolo Ottimizzazione del caricamento delle risorse con l'API Fetch Priority per tutti i dettagli, su come registrarti per la prova dell'origine e alcuni esempi utili su come può aiutarti a migliorare le prestazioni di rendering.

Emulare Chrome 100 nella stringa UA

All'inizio del prossimo anno, lanceremo Chrome 100, un numero di versione a tre cifre. Qualsiasi codice che controlla i numeri di versione o analizza la stringa UA deve essere controllato per assicurarsi che gestisca tre cifre.

A partire da Chrome 96, è disponibile un nuovo flag #force-major-version-to-100 che consente di modificare il numero di versione corrente in 100, in modo da verificare che tutto funzioni come previsto.

Pagina Flag di Chrome che mette in evidenza la nuova opzione #force-major-version-to-100

Per maggiori dettagli, vedi Forzare la versione principale di Chrome su 100 nella stringa User-Agent.

Chrome Dev Summit

Il Chrome Dev Summit è terminato. Tutti i video e i contenuti sono disponibili online. Visita il sito del Chrome Dev Summit oppure, se hai perso la keynote o il live streaming, dai un'occhiata alla playlist del CDS sul canale YouTube per gli sviluppatori di Chrome.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • La cache Indietro, Avanti o bfcache è ora disponibile nella versione stabile e consente di allineare Chrome a Firefox e Safari.

Per approfondire

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

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.

Sono Pete LePage e, non appena verrà rilasciato Chrome 97, sarò qui per dirti le novità di Chrome.