Baru di Chrome 83

Pete LePage

Chrome 83 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 83.

Jenis tepercaya

Pembuatan skrip lintas situs berbasis DOM adalah salah satu kerentanan keamanan yang paling umum di web. Anda dapat dengan mudah memasukkannya ke halaman tanpa sengaja. Jenis tepercaya dapat membantu mencegah jenis kerentanan ini, karena mengharuskan Anda memproses data sebelum meneruskannya ke fungsi yang berpotensi berbahaya.

Misalnya innerHTML, dengan jenis tepercaya diaktifkan, jika saya mencoba meneruskan string, string tersebut akan gagal dengan TypeError karena browser tidak tahu apakah string tersebut dapat dipercaya.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Sebagai gantinya, saya harus menggunakan fungsi yang aman, seperti textContent, meneruskan jenis tepercaya, atau membuat elemen dan menggunakan appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Sebelum mengaktifkan jenis tepercaya, Anda harus mengidentifikasi dan memperbaiki pelanggaran menggunakan header CSP report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Kemudian, setelah semuanya siap, Anda dapat mengaktifkannya dengan benar. Detail lengkapnya ada di artikel Mencegah kerentanan pembuatan skrip lintas situs berbasis DOM dengan Jenis Tepercaya di web.dev.

Pembaruan pada kontrol formulir

Kami menggunakan kontrol formulir HTML setiap hari, dan kontrol ini merupakan kunci bagi banyak interaktivitas web. Alat ini mudah digunakan, memiliki aksesibilitas bawaan, dan tidak asing bagi pengguna kami. Gaya kontrol formulir bisa jadi tidak konsisten di seluruh browser dan sistem operasi. Selain itu, kita sering kali harus mengirimkan sejumlah aturan CSS hanya untuk mendapatkan tampilan yang konsisten di seluruh perangkat.

Sebelumnya, gaya default kontrol formulir.
Setelah itu, pembaruan gaya visual kontrol formulir.

Saya sangat terkesan dengan pekerjaan yang telah dilakukan Microsoft untuk memodernisasi tampilan kontrol formulir. Selain gaya visual yang lebih bagus, layar ini menghadirkan dukungan sentuh yang lebih baik, dan aksesibilitas yang lebih baik, termasuk peningkatan dukungan keyboard!

Kontrol formulir baru telah hadir di Microsoft Edge, dan kini tersedia di Chrome 83. Untuk informasi selengkapnya, lihat Update pada Kontrol dan Fokus Formulir di blog Chromium.

Uji coba origin

Mengukur memori dengan measureMemory()

Memulai uji coba origin di Chrome 83, performance.measureMemory() adalah API baru yang memungkinkan pengukuran penggunaan memori halaman dan mendeteksi kebocoran memori.

Kebocoran memori mudah terjadi:

  • Lupa membatalkan pendaftaran pemroses peristiwa
  • Mengambil objek dari iframe
  • Tidak menutup pekerja
  • Mengumpulkan objek dalam array
  • dan seterusnya.

Kebocoran memori menyebabkan halaman yang tampak lambat dan membengkak bagi pengguna.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Lihat artikel Memantau total penggunaan memori halaman web dengan measureMemory() di web.dev untuk mengetahui semua detail API baru.

Update pada Native File System API

Native File System API memulai uji coba origin baru di Chrome 83 dengan dukungan untuk streaming yang dapat ditulis, dan kemampuan untuk menyimpan nama sebutan channel.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Streaming yang dapat ditulis mempermudah penulisan ke file, dan karena merupakan streaming, Anda dapat dengan mudah menyalurkan respons dari satu streaming ke streaming lainnya.

Menyimpan handle file ke tensorflow memungkinkan Anda untuk menyimpan status, atau mengingat file mana yang sedang dikerjakan oleh pengguna. Misalnya, menyimpan daftar file yang baru saja diedit, membuka file terakhir yang sedang dikerjakan pengguna, dan sebagainya.

Anda memerlukan token uji coba origin baru untuk menggunakan fitur ini. Jadi, lihat artikel saya yang telah diperbarui, Native File System API: Menyederhanakan akses ke file lokal di web.dev yang berisi semua detail, dan cara mendapatkan token uji coba origin baru.

Uji coba asal lainnya

Lihat daftar lengkap fitur dalam uji coba origin.

Kebijakan lintas asal baru

Beberapa API web meningkatkan risiko serangan side-channel seperti Spectre. Untuk memitigasi risiko tersebut, browser menawarkan lingkungan terisolasi berbasis keikutsertaan yang disebut isolasi lintas-asal. Status yang diisolasi lintas origin juga mencegah perubahan document.domain. Kemampuan untuk mengubah document.domain memungkinkan komunikasi antardokumen situs yang sama dan telah dianggap sebagai loophole dalam kebijakan origin yang sama.

Lihat postingan Eiji Membuat situs Anda "terisolasi lintas origin" menggunakan COOP dan COEP untuk mengetahui detail lengkapnya.

Web vitals

Mengukur kualitas pengalaman pengguna memiliki banyak aspek. Meskipun beberapa aspek pengalaman pengguna bersifat khusus untuk situs dan konteks, ada sekumpulan sinyal umum—"Data Web Inti"—yang penting untuk semua pengalaman web. Kebutuhan pengalaman pengguna inti tersebut mencakup pengalaman pemuatan, interaktif, dan stabilitas visual konten halaman, dan jika digabungkan, merupakan dasar dari Data Web Inti 2020.

  • Largest Contentful Paint mengukur kecepatan pemuatan yang dirasakan dan menandai titik pada linimasa pemuatan halaman saat konten utama halaman mungkin telah dimuat.
  • Penundaan Input Pertama mengukur responsivitas dan mengukur pengalaman yang dirasakan pengguna saat mencoba berinteraksi pertama kali dengan halaman.
  • Pergeseran Tata Letak Kumulatif mengukur stabilitas visual dan mengukur jumlah pergeseran tata letak yang tidak terduga dari konten halaman yang terlihat.

Semua metrik ini menangkap hasil penting yang berfokus pada pengguna, dapat diukur di lapangan, dan memiliki alat serta metrik diagnostik lab yang setara. Misalnya, meskipun Largest Contentful Paint adalah metrik pemuatan utama, metrik ini juga sangat bergantung pada First Contentful Paint (FCP) dan Time to First Byte (TTFB), yang tetap penting untuk dipantau dan ditingkatkan.

Untuk mempelajari lebih lanjut, lihat Memperkenalkan Data Vital Web: metrik penting untuk situs yang sehat di Blog Chromium untuk mengetahui detail lengkapnya.

Dan lainnya

  • Chrome kini mendukung Barcode Detection API, yang memberikan kemampuan untuk mendeteksi dan mendekode kode batang.
  • Fungsi @supports CSS baru menyediakan deteksi fitur untuk pemilih CSS.
  • Anotasi ARIA baru mendukung aksesibilitas pembaca layar untuk komentar, saran, dan teks yang ditandai dengan makna semantik (mirip dengan <mark>).
  • Kueri media prefers-color-scheme memungkinkan penulis mendukung tema gelap mereka sendiri sehingga mereka memiliki kontrol penuh atas pengalaman yang mereka buat.
  • JavaScript kini mendukung modul di pekerja bersama.

Ingin tahu apa yang akan hadir di masa mendatang? Lihat Pelacak Fugu API untuk melihatnya.

Bacaan lebih lanjut

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

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 saya perlu potong rambut, tetapi segera setelah Chrome 84 dirilis, saya akan segera memberi tahu Anda -- yang baru di Chrome.