Novità di Chrome 94

Pete LePage

Tieni presente quanto segue:

  • Lo spazio colore predefinito per gli elementi <canvas> è ora definito formalmente nella specifica come SRGB e puoi impostarlo su Display P3.
  • WebCodecs è un nuovo modo a basso livello per accedere ai codec audio e video integrati, importante per lo streaming di giochi, editor video e così via.
  • Inizia la prova di origine di WebGPU.
  • Il PWA Summit si terrà il 6 e 7 ottobre.
  • E c'è molto altro.

Sono Pete LePage, lavoro e filmo da casa. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 94.

Spazio colore predefinito per gli elementi canvas

La modalità di rendering del colore sullo schermo è fondamentale per alcuni utenti. Per fotografi, illustratori e molti altri, i colori sullo schermo devono corrispondere a quelli stampati. A partire da Chrome 94, gli elementi <canvas> sono completamente gestiti a livello di colore utilizzando sRGB. In precedenza, sRGB era una convenzione, ma non era definito esplicitamente nella specifica.

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

Ancora più importante, ora puoi specificare lo spazio di colore da utilizzare quando crei un oggetto <canvas> o ImageData, incluso lo spazio di colore P3.

WebCodecs

Inserire un video in una pagina è abbastanza semplice. Tuttavia, se devi fare qualcosa di un po' più complesso e interagire con i componenti di uno stream video, è difficile e in genere richiede l'utilizzo di Web Assembly per caricare i tuoi codec.

Tuttavia, se carichi il tuo codec, devi scrivere codice già presente nel browser e non puoi sfruttare l'accelerazione hardware. L'API Web Codecs consente di utilizzare i componenti multimediali e i codec già presenti nel browser.

Personalmente, ho sempre avuto difficoltà a ricordare gli switch della riga di comando corretti 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 una Canvas o un ImageBitmap alla rete o allo spazio di archiviazione
Il percorso da un Canvas o un ImageBitmap alla rete o allo spazio di archiviazione

App web che richiedono il controllo completo sul modo in cui vengono elaborati i contenuti multimediali, come editor video, videoconferenze, app di streaming e così via. L'accesso ai controlli multimediali integrati dei browser è enorme.

Mostrare qualcosa di utile in 30 secondi è difficile, quindi dai un'occhiata all'articolo Elaborazione video con WebCodecs su web.dev per un'analisi approfondita con molto codice e alcune demo interessanti.

WebGPU

WebGPU è una nuova API che espone funzionalità grafiche moderne, in particolare Direct3D 12, Metal e Vulkan. Puoi considerarlo come WebGL, ma offre accesso a funzionalità più avanzate della GPU e supporta anche l'esecuzione di calcoli generali sulla GPU.

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

È stata avviata una prova dell'origine in Chrome 94 e sia Safari sia Firefox stanno attualmente lavorando alle loro implementazioni.

Una demo di Babylon.js di un mare mosso simulato utilizzando la funzionalità shader di calcolo di WebGPU.

François ha scritto un ottimo articolo, Accedi alle funzionalità GPU moderne con WebGPU su web.dev, che contiene tutti i dettagli e confronta le prestazioni della moltiplicazione di matrici eseguita sulla CPU rispetto alla GPU. Ecco un suggerimento. La GPU vince.

PWA Summit

Il PWA Summit si terrà il 6 e 7 ottobre. Si tratta di una conferenza online senza costi incentrata sull'aiutare tutti a ottenere risultati con le app web progressive. Il PWA Summit è una collaborazione tra persone di alcune diverse aziende coinvolte nella creazione di tecnologie PWA: Google, Intel, Microsoft e Samsung.

Ci sono tantissimi contenuti e talk interessanti. Per scoprire di più e registrarti, visita il sito PWASummit.org. Spero che parteciperai.

E tanto altro.

Ovviamente ce ne sono molti altri.

Il metodo con priorità scheduler.postTask() ti consente di pianificare le attività e di modificarne dinamicamente le priorità o di annullarle tutte contemporaneamente.

Se hai mai avuto problemi con il riordinamento quando vengono visualizzate le barre di scorrimento, la proprietà scrollbar-gutter ti farà felice. Fornisce il controllo sulla presenza di spaziatura della barra di scorrimento, consentendoti di evitare modifiche al layout man mano che i contenuti si espandono.

L'utilizzo di WebSQL in contesti di terze parti è ora deprecato e la rimozione è prevista in Chrome 97. Lo standard del database SQL web è stato abbandonato a novembre 2010. Non è mai stato implementato in Firefox ed è stato ritirato in Safari nel 2019. Verrà ritirata e rimossa da Chrome quando l'utilizzo sarà sufficientemente ridotto. Se utilizzi ancora WebSQL, è il momento di iniziare a pianificarne la migrazione.

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

Per approfondire

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

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