Baru di Chrome 85

Pete LePage

Chrome 85 kini mulai diluncurkan ke versi stabil.

Berikut ini hal yang perlu Anda ketahui:

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

Visibilitas Konten

Proses rendering browser

Mengubah HTML Anda menjadi sesuatu yang dapat dilihat pengguna, mengharuskan browser melalui sejumlah langkah sebelum dapat merender piksel pertama. 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 elemen tersebut di-scroll ke dalam area tampilan, 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 disertakan sendiri.

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

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

@property dan variabel CSS

Variabel CSS, yang secara teknis disebut properti kustom, sangat berguna. Dengan Houdini CSS Properties and Values API, Anda dapat menentukan jenis dan nilai penggantian default untuk properti kustom. Sebelumnya, saya membahasnya di Fitur Baru di Chrome 78, saat kami menambahkan dukungan untuk menentukannya di JavaScript.

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

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

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

Mendapatkan aplikasi terkait yang terinstal

API getInstalledRelatedApps() 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. Pusatkan 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 diluncurkan di Chrome 80, fitur ini hanya berfungsi untuk aplikasi Android. Sekarang, di Android, PWA juga dapat memeriksa apakah PWA Anda telah diinstal. Dan di Windows, aplikasi ini dapat memeriksa apakah aplikasi UWP Windows Anda sudah diinstal.

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

Lihat artikel saya Apakah aplikasi Anda sudah diinstal? getInstalledRelatedApps() akan memberi tahu Anda! di web.dev untuk melihat cara kerjanya, dan cara menandatangani aplikasi Anda 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 ini tersedia di mana saja, tetapi fitur ini hanya tersedia di Android. Sekarang, 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" }
    ]
  }
]

Baca artikel Pintasan Ikon Aplikasi di web.dev untuk mengetahui detail selengkapnya, dan kami mohon maaf atas kebingungan yang kami timbulkan.

Uji Coba Origin: Streaming permintaan dengan fetch()

Mulai Chrome 85, streaming upload fetch tersedia sebagai uji coba origin. Dengan demikian, Anda dapat memulai pengambilan sebelum isi permintaan siap. Sebelumnya, Anda hanya dapat memulai permintaan setelah seluruh isi siap dikirim. Namun, sekarang, Anda dapat mulai mengirim konten, bahkan saat Anda 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 diambil dari mikrofon atau kamera.

Jake membahasnya secara mendalam dalam artikel Streaming requests with the fetch API di web.dev, dan juga membahasnya dalam video HTTP203 - Streaming requests with 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 lebih mudah dengan .replaceAll(), tidak perlu 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 distandardisasi oleh Alliance for Open Media. AVIF menawarkan peningkatan kompresi yang signifikan dibandingkan JPEG dan WebP, dengan studi Netflix baru-baru ini yang menunjukkan penghematan 50% dibandingkan JPEG standar dan penghematan > 60% pada konten 4:4:4.

Selain itu, penghapusan AppCache telah dimulai.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 85.

Langganan

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

Saya Pete LePage, dan akhirnya mendapatkan potongan rambut!

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