Baru di Chrome 85

Pete LePage

Chrome 85 mulai diluncurkan ke versi stabil sekarang.

Berikut hal yang perlu Anda ketahui:

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

Visibilitas Konten

Proses rendering browser

Untuk mengubah HTML menjadi sesuatu yang dapat dilihat pengguna, browser harus melalui sejumlah langkah sebelum dapat mewarnai piksel pertama. Dan hal ini dilakukan untuk seluruh halaman, bahkan untuk konten yang tidak terlihat di area pandang.

Menerapkan content-visibility: auto ke elemen, memberi tahu browser bahwa browser dapat melewati pekerjaan rendering untuk elemen tersebut hingga di-scroll ke area pandang, sehingga memberikan rendering awal yang lebih cepat.


.my-class {
  content-visibility: auto;
}

Untuk mendapatkan dampak maksimal dari content-visibility, terapkan ke bagian induk dengan algoritma tata letak yang lebih kompleks, seperti flexbox, dan grid, atau yang memiliki turunan dengan tata letak yang dimuat sendiri.

Dengan mengelompokkan konten dan menambahkan content-visibility: auto;, halaman ini berubah dari waktu rendering 232 md menjadi hanya 30 md.

Lihat visibilitas konten untuk mengetahui cara menggunakannya guna meningkatkan performa rendering.

Variabel @property dan CSS

Variabel CSS, yang secara teknis disebut properti khusus, sangat keren. Dengan API Nilai dan Properti CSS Houdini, Anda dapat menentukan jenis dan nilai penggantian default untuk properti kustom. Sebelumnya, saya membahasnya di Baru di Chrome 78, saat kami menambahkan dukungan untuk mendefinisikannya dalam JavaScript.

Mulai Chrome 85, Anda juga dapat menentukan dan menetapkan properti CSS langsung di CSS. Yang saya sukai dari Properti CSS adalah properti ini memberikan makna semantik, nilai penggantian, dan bahkan memungkinkan pengujian CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una memiliki postingan menarik @property: memberi kekuatan super pada variabel CSS yang menunjukkan cara menggunakannya.

Mendapatkan aplikasi terkait yang diinstal

getInstalledRelatedApps() API memungkinkan Anda memeriksa apakah aplikasi Anda diinstal, lalu menyesuaikan pengalaman pengguna.

Misalnya, tampilkan konten yang berbeda kepada pengguna di halaman landing jika aplikasi Anda sudah diinstal. Sentralisasi fungsi yang tumpang-tindih dalam satu aplikasi untuk mencegah kebingungan. Atau, jika aplikasi native Anda sudah diinstal, jangan promosikan penginstalan PWA Anda.

Saat pertama kali dikirimkan di Chrome 80, fitur ini hanya berfungsi untuk aplikasi Android. Sekarang, di Android, fitur ini juga dapat memeriksa apakah PWA Anda telah diinstal. Dan di Windows, aplikasi ini dapat memeriksa apakah aplikasi UWP Windows Anda diinstal.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Baca artikel saya Apakah aplikasi Anda sudah diinstal? getInstalledRelatedApps() akan memberi tahu Anda. di web.dev untuk melihat cara kerjanya, dan cara menandatangani aplikasi untuk membuktikan bahwa aplikasi tersebut milik Anda.

Pintasan Ikon Aplikasi

Pintasan ikon aplikasi di Windows

Di Chrome 84, kami menambahkan dukungan untuk Pintasan Ikon Aplikasi. Saya tidak sengaja mengatakan bahwa fitur tersebut tersedia di mana saja, tetapi ternyata hanya tersedia di Android. Kini, di Chrome 85, fitur ini tersedia di Android dan Windows, serta di Chrome dan Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Lihat artikel Pintasan Ikon Aplikasi di web.dev untuk mengetahui detail lengkapnya, dan kami mohon maaf atas kebingungan yang ditimbulkan.

Uji Coba Origin: Permintaan streaming dengan fetch()

Mulai Chrome 85, streaming upload fetch tersedia sebagai uji coba origin. Dengan ini, Anda dapat memulai pengambilan sebelum isi permintaan siap. Sebelumnya, Anda hanya dapat memulai permintaan setelah seluruh isi siap. Namun, sekarang, Anda dapat mulai mengirim konten, bahkan saat masih membuatnya.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Misalnya, gunakan untuk memanaskan server, atau streaming audio atau video saat direkam dari mikrofon atau kamera.

Jake memiliki pembahasan mendalam tentang Permintaan streaming dengan fetch API di web.dev, dan juga membahasnya dalam video HTTP203 - Permintaan streaming dengan fetch terbaru.

Dan lainnya

Tentu saja, masih banyak lagi.

Promise.any menampilkan promise yang dipenuhi oleh promise pertama yang diberikan untuk dipenuhi atau ditolak.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Mengganti semua instance dalam string menjadi lebih mudah dengan .replaceAll(), tidak ada lagi ekspresi reguler.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 menambahkan dukungan dekode untuk AVIF, format gambar yang dienkode dengan AV1 dan distandarisasi oleh Alliance for Open Media. AVIF menawarkan peningkatan kompresi yang signifikan dibandingkan JPEG dan WebP, dengan studi Netflix terbaru menunjukkan penghematan 50% dibandingkan JPEG standar dan penghematan > 60% pada konten 4:4:4.

Selain itu, penghapusan AppCache telah dimulai.

Bacaan lebih lanjut

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

Langganan

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

Saya Pete LePage, dan akhirnya saya mendapat potongan rambut.

Segera setelah Chrome 86 dirilis, kami akan segera memberi tahu Anda tentang hal-hal baru di Chrome.