Baru di Chrome 103

Pete LePage

Berikut hal yang perlu Anda ketahui:

  • Ada kode status HTTP 103 baru yang membantu browser memutuskan konten apa yang akan dimuat sebelumnya sebelum halaman mulai ditampilkan.
  • Local Font Access API memberi aplikasi web kemampuan untuk membuat enumerasi dan menggunakan font yang diinstal di komputer pengguna.
  • AbortSignal.timeout() adalah cara yang lebih mudah untuk menerapkan waktu tunggu di API asinkron.
  • Dan masih banyak lainnya.

Saya Pete LePage. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 103.

Kode status HTTP 103 103 - petunjuk awal

Salah satu cara untuk meningkatkan performa halaman adalah dengan menggunakan petunjuk resource. File ini memberikan "petunjuk" kepada browser tentang hal-hal yang mungkin diperlukannya nanti. Misalnya, memuat file secara otomatis, atau terhubung ke server lain.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Namun, browser tidak dapat menindaklanjuti petunjuk tersebut hingga server mengirim setidaknya bagian halaman.

Bayangkan browser meminta halaman, tetapi server memerlukan beberapa ratus milidetik untuk membuatnya. Hingga browser mulai menerima halaman, browser hanya akan menunggu. Namun, jika server mengetahui bahwa halaman akan selalu memerlukan kumpulan sub-resource tertentu, misalnya, file CSS, beberapa JavaScript, dan beberapa gambar, server dapat langsung merespons dengan kode status HTTP 103 Early Hints yang baru, dan meminta browser untuk memuat ulang sub-resource tersebut.

Kemudian, setelah server membuat halaman, server dapat mengirimkannya dengan respons HTTP 200 normal. Saat halaman masuk, browser telah mulai memuat resource yang diperlukan.

Karena ini adalah kode status HTTP baru, penggunaannya memerlukan update pada server Anda.

Memulai HTTP 103 Petunjuk awal:

Local Font Access API

Font di web selalu menjadi tantangan, terutama untuk aplikasi yang memungkinkan pengguna membuat grafik dan desain mereka sendiri. Hingga saat ini, aplikasi web hanya dapat menggunakan font web. Tidak ada cara untuk mendapatkan daftar font yang telah diinstal pengguna di komputer mereka. Selain itu, tidak ada cara untuk mengakses data tabel font lengkap, yang penting jika Anda perlu menerapkan stack teks kustom Anda sendiri.

Local Font Access API baru memberi aplikasi web kemampuan untuk menghitung font lokal di perangkat pengguna, dan memberikan akses ke data tabel font.

Untuk mendapatkan daftar font yang diinstal di perangkat, Anda harus meminta izin terlebih dahulu.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Kemudian, panggil window.queryLocalFonts(). Fungsi ini menampilkan array dari semua font yang diinstal di perangkat pengguna.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Jika hanya tertarik dengan sebagian font, Anda dapat memfilternya dengan menambahkan parameter postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Baca artikel Tom Menggunakan tipografi lanjutan dengan font lokal di web.dev untuk mengetahui detail selengkapnya.

Timeout yang Lebih Mudah dengan AbortSignal.timeout()

Dalam JavaScript, AbortController dan AbortSignal digunakan untuk membatalkan panggilan asinkron.

Misalnya, saat membuat permintaan fetch(), Anda dapat membuat AbortSignal, dan meneruskannya ke fetch(). Jika Anda ingin membatalkan fetch() sebelum ditampilkan, panggil abort() pada instance AbortSignal. Hingga saat ini, jika Anda ingin membatalkan setelah jangka waktu tertentu, Anda harus menggabungkannya dalam setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Untungnya, hal itu menjadi lebih mudah dengan metode statis timeout() baru di AbortSignal. Metode ini menampilkan objek AbortSignal yang otomatis dihentikan setelah jumlah milidetik tertentu. Yang sebelumnya adalah beberapa baris kode, kini hanya satu.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() didukung di Chrome 103, dan sudah ada di Firefox, dan Safari.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Format file gambar avif kini dapat dibagikan oleh Berbagi Web
  • Chromium kini mencocokkan Firefox dengan mengaktifkan popstate segera setelah URL berubah. Urutan peristiwa sekarang adalah: popstate lalu hashchange di kedua platform.
  • Selain itu, Element.isVisible() memberi tahu Anda apakah elemen terlihat atau tidak.

Bacaan lebih lanjut

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

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 104 dirilis, saya akan langsung memberi tahu Anda yang baru di Chrome.