Novità di Chrome 95

Pete LePage

Tieni presente quanto segue:

  • La definizione del percorso è più facile con URLPattern integrato nel browser.
  • L'API Contagocce fornisce uno strumento integrato per la selezione di colori.
  • È disponibile una nuova prova dell'origine che ti 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. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 95.

Routing con URLPattern

Quasi tutte le app web dipendono in qualche modo dal routing, 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 pagina singola che aggiorna il DOM quando l'URL cambia. URLPattern è una nuova API per piattaforme web che standardizza la sintassi dei pattern di routing.

Si basa sulla base dei framework esistenti, semplificando l'esecuzione di attività di routing comuni. Ad esempio, la corrispondenza con URL completi o con un percorso dell'URL, per poi restituire informazioni sulle corrispondenze di token e gruppi.

Se conosci già la sintassi di routing utilizzata in Express, Ruby on Rails o path-to-regexp, probabilmente questa ti risulterà familiare.

Per utilizzarlo, crea un nuovo URLPattern() e fornisci i dettagli in base ai quali eseguire la corrispondenza con il 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, diamo un'occhiata al URLPattern che potrebbe essere utilizzato da Documenti Google. Specificheremo il kind del file, il file ID 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 e 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 informazioni dettagliate, consulta l'articolo di Jeff URLPattern porta il routing alla piattaforma web.

Scegliere i colori con l'API Eye Dropper

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

L'API Eye Dropper, implementata da alcuni membri del team di Microsoft, porta questa funzionalità sul web. Per utilizzarlo, crea una nuova istanza EyeDropper() e poi 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, il colore selezionato viene visualizzato.

Puoi provare una breve demo e vedere il codice su Glitch.

PWA Summit

Hai partecipato al PWA Summit all'inizio di questo mese?

È stato fantastico vedere così tante persone parlare di PWA e condividere le loro esperienze. Se te lo sei perso, non preoccuparti: i video sono disponibili sul sito PWASummit.org o sul canale YouTube del PWA Summit.

Prova dell'origine per la riduzione dello user agent

La riduzione dello user agent è un tentativo di ridurre le piattaforme di fingerprinting passivo, limitando le informazioni nella stringa dello user agent solo al brand e alla versione significativa del browser, alla distinzione tra computer o dispositivo mobile e alla piattaforma su cui è in esecuzione.

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

Le modifiche verranno applicate in modo incrementale in più release, ma tutto ciò che devi preparare e testare è già disponibile.

Tutti i dettagli e la tempistica sono disponibili nel post sulla prova dell'origine della riduzione dell'intestazione User-Agent su developer.chrome.com.

E tanto altro.

Ovviamente ce ne sono molti altri.

Per approfondire

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

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 96, sarò qui per dirti quali sono le novità di Chrome.