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 dei 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 ce ne sono molti altri.

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 un nome di percorso dell'URL, quindi la restituzione di informazioni sulle corrispondenze di token e gruppo.

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

Per utilizzarlo, crea un nuovo URLPattern() e fornisci i dettagli rispetto ai quali 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, 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 lo schema, puoi 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 desiderato, viene applicato il colore selezionato.

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

Summit PWA

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 ti è sfuggito, i video sono già tutti, quindi assicurati di guardarli su 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 ti serve per prepararti 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.

Naturalmente c'è molto altro.

Per approfondire

Sono riportati solo alcuni punti salienti. Controlla i link qui sotto per ulteriori modifiche in Chrome 95.

Iscriviti

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

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