Novità di Chrome 95

Pete LePage

Tieni presente quanto segue:

  • Il routing è più semplice grazie all'integrazione di URLPattern nel browser.
  • L'API Eye Dropper fornisce uno strumento integrato per selezionare colori.
  • È disponibile una nuova prova dell'origine che ti consente di attivare la ricezione stringa UA ridotta.
  • I video del PWA Summit sono tutti online.
  • E ce ne sono molti altri.

Mi chiamo Pete LePage, lavoro e mi occupo di tiro da casa, analizziamo le novità per gli sviluppatori di Chrome 95.

Instradamento con URLPattern

Quasi tutte le app web dipendono in qualche modo dal routing, dall'esecuzione del codice su un server che mappa un percorso di file su disco o logica in un'app a pagina singola che aggiorna il DOM quando cambia l'URL. URLPattern è un nuovo sito web che standardizza la sintassi dei pattern di routing.

Si basa sui framework esistenti, semplificando le prestazioni attività di routing più comuni. Ad esempio, la corrispondenza con URL completi o un URL del percorso, restituendo 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 sembrerà familiare.

Per usarlo, crea un nuovo URLPattern() e fornisci i dettagli che vuoi una corrispondenza di 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, guardiamo il URLPattern che potrebbe essere utilizzato da Documenti Google. Indicheremo il kind del file, il file ID e il mode in cui aprirlo. Per usare 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 è attivo per impostazione predefinita in Chrome ed Edge 95 e versioni successive. E per i browser o ambienti come Node, che non lo supportano ancora, puoi usare la libreria urlpattern-polyfill.

Leggi l'articolo di Jeff URLPattern porta il routing alla piattaforma web per i dettagli completi.

Scegliere i colori con l'API Eye Dropper

Quasi tutte le app di design che abbia mai usato hanno un contagocce, è facile capire di che colore sia qualcosa. Alcuni browser dispongono di un contagocce funzionalità integrata in <input type=color>, ma non è l'ideale.

L'API Eye Dropper, implementata da alcuni dei dipendenti di Microsoft, quella funzionalità sul web. Per usarla, crea un nuovo 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, non blocca il thread principale. Quando l'utente fa clic sul colore desiderato, si risolverà con il colore selezionato.

Puoi provare una breve demo e vedere codice su Glitch.

Summit PWA

Hai partecipato al PWA Summit di questo mese?

È stato fantastico vedere così tante persone parlare di PWA e condividere i propri ed esperienze variegate. Se ti è sfuggito, i video sono tutti, quindi assicurati di controllarlo all'indirizzo PWASummit.org o Canale YouTube del PWA Summit.

Prova dell'origine della riduzione dello user agent

La riduzione dello user agent è uno sforzo per ridurre passivo superfici di impronte digitali, riducendo le informazioni nello user agent stringa solo al brand e alla versione significativa del browser, al suo desktop o la distinzione tra dispositivi mobili e la piattaforma su cui viene eseguito.

A partire da Chrome 95, è disponibile una nuova prova dell'origine che ti consente di attivare subito la ricezione della stringa UA ridotta. Questa operazione consentirà di per scoprire e risolvere i problemi prima che la riduzione di UA diventi l'impostazione predefinita comportamento dell'utente in Chrome.

Le modifiche verranno applicate in modo incrementale a un certo numero di release, tutto ciò di cui hai bisogno per prepararti e testare è pronto adesso.

Tutti i dettagli e le tempistiche sono in Post relativo alla prova dell'origine della riduzione dello user agent developer.chrome.com.

E tanto altro.

Naturalmente c'è molto altro.

Per approfondire

Descrive solo alcuni dei punti salienti. Consulta i link qui sotto per altre modifiche in Chrome 95.

Iscriviti

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

Mi chiamo Pete LePage e non appena verrà rilasciato Chrome 96 sarò qui per dirti le novità di Chrome.