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.
- Se hai seguito il lavoro sull'API Storage Foundation, c'è una nuova prova dell'origine per gli handle di accesso.
- WebAssembly ora fornisce supporto per la gestione delle eccezioni, che consente al codice di interrompere il flusso di controllo quando viene generata un'eccezione.
- Chrome 100 sarà disponibile il prossimo anno. È il momento di verificare che i tuoi può gestire più di due cifre!
Per approfondire
Descrive solo alcuni dei punti salienti. Consulta i link qui sotto per altre modifiche in Chrome 95.
- Novità di Chrome DevTools (95)
- Ritiri di Chrome 95 e rimozioni
- Aggiornamenti di ChromeStatus.com per Chrome 95
- Novità di JavaScript in Chrome 95
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario dei rilasci di Chrome
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.