Novità di Chrome 94

Pete LePage

Tieni presente quanto segue:

  • Lo spazio colore predefinito per gli elementi <canvas> è ora formalmente definito nella specifica come SRGB e puoi modificarlo in Display P3.
  • WebCodecs è un nuovo modo di basso livello per accedere ai codec audio e video integrati, importante per lo streaming di giochi, editor video e così via.
  • WebGPU avvia la prova dell'origine.
  • Il PWA Summit si terrà dal 6 al 7 ottobre.
  • E ce ne sono molte altre.

Sono Pete LePage, lavoro e lavoro da casa, approfondiamo l'argomento e scopriamo le novità di Chrome 94 per gli sviluppatori.

Spazio colore predefinito per gli elementi canvas

Il modo in cui il colore viene visualizzato sullo schermo è fondamentale per alcuni utenti. Per fotografi, illustratori di stampa e molti altri, i colori sullo schermo devono corrispondere a quelli del soggetto stampato. A partire da Chrome 94, gli elementi <canvas> sono completamente gestiti in base al colore utilizzando sRGB. In precedenza, sRGB era una convenzione, ma non era esplicitamente definito nelle specifiche.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Ancora più importante, ora puoi specificare lo spazio colore da utilizzare durante la creazione di un oggetto 2D di contesto di rendering <canvas> o di un oggetto ImageData, compreso lo spazio colore P3.

WebCodecs

Inserire un video in una pagina è abbastanza facile. Tuttavia, se devi effettuare un'operazione un po' più complessa e interagire con i componenti di un video stream, è difficile e in genere è necessario utilizzare Web Assembly per spedire i tuoi codec.

Tuttavia, spedire il tuo codec significa scrivere codice già presente nel browser, che non potrà sfruttare l'accelerazione hardware. L'API Web Codecs consente di utilizzare i componenti multimediali e i codec già presenti nel browser.

Personalmente, ho sempre faticato a ricordare le opzioni corrette della riga di comando per codificare un video per il web o per convertire una GIF in un file video. Utilizzando le API disponibili tramite WebCodecs, ho potuto creare rapidamente un'app web che legge un file ed esporta i file corretti necessari per il web.

Il percorso da Canvas o ImageBitmap alla rete o allo spazio di archiviazione
Il percorso da Canvas o ImageBitmap alla rete o allo spazio di archiviazione

App web che richiedono il controllo completo sulle modalità di elaborazione dei contenuti multimediali, come editor video, videoconferenze, app di streaming e così via. L'accesso ai browser multimediali integrati è enorme.

Mostrare qualsiasi cosa utile in trenta secondi è difficile, quindi dai un'occhiata a Video Processing with WebCodecs su web.dev per un approfondimento con tanto codice e alcune demo interessanti.

WebGPU

WebGPU è una nuova API che espone funzionalità grafiche moderne, in particolare Direct3D 12, Metal e Vulkan. Può essere paragonato a WebGL, che offre, però, accesso a funzionalità più avanzate della GPU e supporto per l'esecuzione di calcoli generici sulla GPU.

Diagramma dell&#39;architettura che mostra la connessione delle WebGPU tra le API del sistema operativo e Direct3D 12, Metal e Vulkan.
Diagramma dell'architettura WebGPU

Sta per avviare una prova dell'origine in Chrome 94 e sia Safari sia Firefox stanno attualmente lavorando alle relative implementazioni.

Demo Babylon.js di un mare mosso che viene simulato utilizzando la capacità di calcolo dello Shadr di WebGPU.

François ha pubblicato un ottimo articolo, Accedere alle moderne funzionalità delle GPU con WebGPU su web.dev con i dettagli, e confronta le prestazioni della moltiplicazione della matrice in esecuzione sulla CPU rispetto alla GPU. Ecco un suggerimento. La GPU vince.

Summit PWA

Il PWA Summit si terrà dal 6 al 7 ottobre. Si tratta di una conferenza online senza costi incentrata sull'aiutare tutti ad avere successo con le applicazioni web progressive. Il PWA Summit nasce dalla collaborazione tra i membri di un gruppo di poche aziende diverse coinvolte nella creazione delle tecnologie PWA: Google, Intel, Microsoft e Samsung.

Ci sono moltissimi discorsi e contenuti interessanti. Puoi scoprire di più e registrarti all'indirizzo PWASummit.org. Spero di vederti lì.

E tanto altro.

Ovviamente c'è molto altro.

Il metodo scheduler.postTask() prioritario consente di pianificare le attività e modificare dinamicamente le priorità o annullarle tutte insieme.

Se ti è mai capitato di lottare contro il re-layout quando vengono visualizzate le barre di scorrimento, la proprietà scrollbar-gutter ti soddisfa. Fornisce il controllo sulla presenza di grondaie della barra di scorrimento, impedendo le modifiche del layout all'espansione dei contenuti.

L'utilizzo di WebSQL in contesti di terze parti è ora deprecato e la rimozione è prevista in Chrome 97. Lo standard per i database SQL web è stato abbandonato nel novembre 2010. Non è mai stata implementata in Firefox ed è stata ritirata in Safari nel 2019. Sarà deprecata e rimossa da Chrome quando l'utilizzo sarà basso. Se utilizzi ancora WebSQL, sarebbe un buon momento per iniziare a pianificare la migrazione.

Inoltre, l'API virtuale tastiera offre un maggiore controllo su come e quando mostrare la tastiera virtuale sullo schermo. Ti consente di controllare esplicitamente qualsiasi comportamento di scorrimento o modifiche al layout quando la tastiera scompare o viene visualizzata.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 94.

Abbonati

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

Mi chiamo Pete LePage e non appena uscirà Chrome 95, sarò qui per raccontarti le novità di Chrome.