Baru di Chrome 94

Pete LePage

Berikut hal yang perlu Anda ketahui:

  • Ruang warna default untuk elemen <canvas> sekarang secara resmi ditentukan dalam spesifikasi sebagai SRGB, dan Anda dapat mengubahnya menjadi Display P3.
  • WebCodecs adalah cara baru tingkat rendah untuk mengakses codec audio dan video bawaan, yang penting untuk streaming game, editor video, dan sebagainya.
  • WebGPU memulai uji coba originnya.
  • PWA Summit akan diselenggarakan pada 6-7 Oktober.
  • Dan masih banyak fitur lainnya.

Saya Pete LePage, bekerja, dan merekam dari rumah. Mari kita lihat apa yang baru untuk developer di Chrome 94.

Ruang warna default untuk elemen canvas

Bagaimana warna dirender di layar sangat penting bagi sebagian pengguna. Untuk fotografer, ilustrator cetak, dan banyak lagi, warna di layar harus sesuai dengan yang dicetak. Mulai Chrome 94, elemen <canvas> dikelola warna sepenuhnya menggunakan sRGB. Sebelumnya, sRGB merupakan konvensi, tetapi tidak ditentukan secara eksplisit dalam spesifikasi.

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

Yang lebih penting, Anda kini dapat menentukan ruang warna yang akan digunakan saat membuat objek 2d konteks rendering <canvas>, atau objek ImageData, termasuk ruang warna P3.

WebCodecs

Menampilkan video di halaman cukup mudah. Namun, jika Anda perlu melakukan sesuatu yang sedikit lebih rumit, dan berinteraksi dengan komponen streaming video, hal ini sulit dilakukan, dan biasanya mengharuskan Anda menggunakan Web Assembly untuk mengirimkan codec Anda sendiri.

Namun, mengirimkan codec Anda sendiri berarti menulis kode yang sudah dimiliki browser, dan codec tersebut tidak dapat memanfaatkan akselerasi hardware. Web Codecs API memungkinkan penggunaan komponen media dan codec yang sudah ada di browser.

Secara pribadi, saya selalu kesulitan mengingat tombol command line yang tepat untuk mengenkode video di web, atau mengonversi GIF ke file video. Dengan menggunakan API yang tersedia melalui WebCodecs, saya dapat dengan cepat mem-build aplikasi web yang membaca file dan mengekspor file yang benar yang diperlukan untuk web.

Jalur dari Kanvas atau ImageBitmap ke jaringan atau ke penyimpanan
Jalur dari Canvas atau ImageBitmap ke jaringan atau penyimpanan

Aplikasi web yang memerlukan kontrol penuh atas cara konten media diproses, seperti editor video, konferensi video, aplikasi streaming, dan sebagainya. Akses ke browser yang terintegrasi dengan kontrol media sangat besar.

Menampilkan sesuatu yang berguna dalam waktu tiga puluh detik itu sulit, jadi lihat Pemrosesan video dengan WebCodecs di web.dev untuk mempelajari lebih lanjut dengan banyak kode dan beberapa demo keren.

WebGPU

WebGPU adalah API baru yang mengekspos kemampuan grafis modern, khususnya Direct3D 12, Metal, dan Vulkan. Anda dapat menganggapnya seperti WebGL, tetapi menyediakan akses ke fitur GPU yang lebih canggih, dan juga memberikan dukungan untuk melakukan komputasi umum pada GPU.

Diagram arsitektur yang menunjukkan koneksi WebGPU antara API OS dan Direct3D 12, Metal, dan Vulkan.
Diagram arsitektur WebGPU

Chrome memulai uji coba origin di Chrome 94, dan Safari serta Firefox saat ini sedang mengerjakan penerapannya.

Demo Babylon.js laut kasar yang disimulasikan menggunakan kemampuan shader komputasi WebGPU.

François memiliki artikel yang bagus, Mengakses fitur GPU modern dengan WebGPU di web.dev dengan detailnya, dan membandingkan performa perkalian matriks yang berjalan di CPU dengan GPU. Berikut petunjuknya. GPU menang.

PWA Summit

PWA Summit akan diselenggarakan pada 6-7 Oktober. Ini adalah konferensi online gratis yang berfokus untuk membantu semua orang agar berhasil dengan Progressive Web Apps. PWA Summit adalah kolaborasi antara orang-orang dari beberapa perusahaan berbeda yang terlibat dalam pembuatan teknologi PWA: Google, Intel, Microsoft, dan Samsung.

Ada banyak diskusi dan konten yang bagus. Anda dapat mempelajari lebih lanjut dan mendaftar di PWASummit.org. Sampai jumpa di sana.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Metode scheduler.postTask() yang diprioritaskan memungkinkan Anda menjadwalkan tugas, dan mengubah prioritasnya secara dinamis, atau membatalkan semuanya secara bersamaan.

Jika Anda pernah mengalami masalah dengan tata letak ulang saat scrollbar muncul, properti scrollbar-gutter akan membuat Anda senang. Ini memberikan kontrol atas keberadaan gutter scrollbar, sehingga Anda dapat mencegah perubahan tata letak saat konten diperluas.

Penggunaan WebSQL dalam konteks pihak ketiga kini tidak digunakan lagi, dan penghapusan diperkirakan akan dilakukan di Chrome 97. Standar Database Web SQL dihentikan pada November 2010. Fitur ini tidak pernah diterapkan di Firefox, dan tidak digunakan lagi di Safari pada tahun 2019. API ini tidak akan digunakan lagi dan dihapus dari Chrome saat penggunaannya cukup rendah. Jika Anda masih menggunakan WebSQL, sekarang adalah waktu yang tepat untuk mulai merencanakan migrasi dari WebSQL.

Selain itu, virtual keyboard API memberi Anda lebih banyak kontrol atas cara dan waktu keyboard virtual di layar ditampilkan. Hal ini memungkinkan Anda secara eksplisit mengontrol perilaku scroll, atau perubahan pada tata letak saat keyboard muncul atau menghilang.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 94.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 95 dirilis, saya akan langsung memberi tahu Anda yang baru di Chrome.