Novità di Chrome 95

Pete LePage

Ecco cosa devi sapere:

  • Il routing diventa più semplice con URLPattern integrato nel browser.
  • L'API Contagocce fornisce uno strumento integrato per la selezione dei colori.
  • È disponibile una nuova prova dell'origine che consente di attivare la ricezione della stringa UA ridotta.
  • I video del PWA Summit sono tutti online.
  • E c'è molto altro.

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

Routing con URLPattern

Quasi tutte le app web dipendono dal routing in qualche modo, che si tratti di codice in esecuzione su un server che mappa un percorso ai file sul disco o di logica in un'app a una sola pagina che aggiorna il DOM quando l'URL cambia. URLPattern è una nuova API della piattaforma web che standardizza la sintassi del pattern di routing.

Si basa sulle fondamenta dei framework esistenti, semplificando l'esecuzione delle attività di routing comuni. Ad esempio, la corrispondenza con URL completi o con un percorso URL, quindi la restituzione di informazioni sulla corrispondenza di token e gruppi.

Se hai già familiarità con la sintassi di routing utilizzata in Express, Ruby on Rails o path-to-regexp, probabilmente ti sembrerà familiare.

Per utilizzarlo, crea un nuovo URLPattern() e fornisci i dettagli con cui vuoi eseguire la corrispondenza del pattern. I pattern possono contenere caratteri jolly, gruppi di token denominati, gruppi di espressioni regolari e modificatori di gruppo.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Ad esempio, esaminiamo URLPattern che potrebbero essere utilizzati da Documenti Google. Specificheremo il kind del file, il ID del file e il mode in cui aprirlo. Per utilizzare il pattern, possiamo chiamare test() o exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern è attivato per impostazione predefinita in Chrome ed Edge versione 95 e successive. Per i browser o gli ambienti come Node che non lo supportano ancora, puoi utilizzare la libreria urlpattern-polyfill.

Per tutti i dettagli, leggi l'articolo di Jeff URLPattern brings routing to the web platform.

Scegliere i colori con l'API Eye Dropper

Quasi tutte le app di progettazione che ho utilizzato hanno uno strumento contagocce, che consente di capire facilmente il colore di un elemento. Alcuni browser hanno la funzionalità contagocce integrata in <input type=color>, ma non è l'ideale.

L'API Contagocce, implementata da alcuni membri del team di Microsoft, porta questa funzionalità sul web. Per utilizzarlo, crea una nuova istanza EyeDropper(), quindi chiama open().

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Come molte altre API web moderne, funziona in modo asincrono, in modo da non bloccare il thread principale. Quando l'utente fa clic sul colore che preferisce, viene visualizzato il colore selezionato.

PWA Summit

Hai seguito il PWA Summit all'inizio di questo mese?

È stato fantastico vedere così tante persone parlare di PWA e condividere le loro esperienze. Se l'hai perso, tutti i video sono disponibili, quindi assicurati di guardarli su PWASummit.org o sul canale YouTube PWA Summit.

Prova dell'origine della riduzione dello user agent

La riduzione dello user agent è un tentativo di ridurre le superfici di fingerprinting passivo, riducendo le informazioni nella stringa dello user agent solo al brand e alla versione principale del browser, alla distinzione tra computer e dispositivo mobile e alla piattaforma su cui viene eseguito.

A partire da Chrome 95, è disponibile una nuova prova dell'origine che ti consente di attivare la ricezione della stringa UA ridotta ora. In questo modo, potrai scoprire e risolvere i problemi prima che la stringa UA ridotta diventi il comportamento predefinito in Chrome.

Le modifiche verranno applicate in modo incrementale in diverse release, ma tutto ciò che ti serve per prepararti e testare è già pronto.

Tutti i dettagli e la cronologia sono disponibili nel post User-Agent Reduction origin trial su developer.chrome.com.

E tanto altro.

Ovviamente, ce ne sono molti altri.

Per approfondire

Questi sono solo alcuni dei punti salienti. Consulta i link riportati di seguito per ulteriori modifiche in Chrome 95.

Iscriviti

Per rimanere al corrente, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

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