Novità di Chrome 96

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage, finalmente girando in studio, analizziamo le novità di Chrome 96 per gli sviluppatori.

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, le specifiche del manifest dell'app web non specificavano come identificare una PWA, lasciando ai browser la decisione e portando a implementazioni diverse. In alcuni browser viene utilizzato il 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 esiste una nuova proprietà id facoltativa, 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 rende possibile l'aggiornamento di questi campi.

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

Il supporto per la proprietà id arriva nei browser desktop basati su Chromium a partire da Chrome 96. Il supporto per i dispositivi mobili, che al momento utilizza l'URL manifest come ID univoco, dovrebbe arrivare 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 file manifest, dovrai utilizzare l'ID assegnato dal browser. Puoi trovare id nel riquadro Manifest del riquadro Applicazione in Dev Tools.

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

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

Per saperne di più, consulta Identificare in modo univoco le PWA con la proprietà ID manifest dell'app web.

Gestori del protocollo URL per le PWA

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

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

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

Esistono alcune restrizioni e non puoi semplicemente registrare un protocollo, perciò consulta la registrazione dei gestori di protocolli URL per le PWA per i dettagli e come puoi utilizzare la sintassi web+ per creare i tuoi protocolli.

Suggerimenti prioritari (prova dell'origine)

Quando un browser analizza una pagina web e inizia a rilevare e scaricare risorse come immagini, script o CSS, assegna al browser una priorità di recupero per cercare di ottimizzare il caricamento della pagina. I browser sono molto bravi ad assegnare le priorità, ma potrebbero non essere sempre ottimali.

I suggerimenti 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 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 Google Voli. Quell'immagine di sfondo è la Largest Contentful Paint (LCP).

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

Vediamola caricata con e senza suggerimenti sulla priorità. Con la priorità impostata su high sull'immagine di sfondo, la metrica LCP scende da 2,6 a 1,9 secondi.

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

Emula Chrome 100 nella stringa UA

All'inizio dell'anno prossimo arriveremo 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 dalla versione 96 di Chrome, è disponibile un nuovo flag #force-major-version-to-100 che cambierà l'attuale numero di versione impostandola su 100, così potrai assicurarti che tutto funzioni come previsto.

Pagina Segnalazioni di Chrome con 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. Dai un'occhiata al sito del Chrome Dev Summit oppure, se ti sei perso il discorso di apertura o il live streaming, dai un'occhiata alla playlist CDS nel canale YouTube degli sviluppatori di Chrome.

E tanto altro.

Ovviamente c'è molto altro.

  • La cache back-forward (o bfcache) è ora disponibile in versione stabile e avvicina Chrome sia a Firefox che a Safari.

Per approfondire

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

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 97 di Chrome, sarò qui per farti conoscere le novità di Chrome.