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 WebGPU.
  • Il PWA Summit si terrà dal 6 al 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 per il 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 quale spazio colore utilizzare durante la creazione di un oggetto 2D con contesto di rendering <canvas> oppure di un oggetto ImageData, incluso lo spazio 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 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 browser integrati nei controlli multimediali è enorme.

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

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

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

Una demo di Babylon.js di un mare agitato 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 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.

Naturalmente c'è molto altro.

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 combattuto con un nuovo layout quando vengono visualizzate le barre di scorrimento, la proprietà scrollbar-gutter ti farà piacere. 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 basso. Se utilizzi ancora WebSQL, è il momento di iniziare a pianificarne la migrazione.

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

Per approfondire

Sono riportati solo alcuni 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 le novità di Chrome.