Baru di Chrome 103

Pete LePage

Berikut hal yang perlu Anda ketahui:

  • Ada kode status HTTP 103 baru yang membantu browser menentukan konten yang akan di-pramuat sebelum halaman mulai dimuat.
  • Local Font Access API memberi aplikasi web kemampuan untuk memerinci dan menggunakan font yang diinstal di komputer pengguna.
  • AbortSignal.timeout() adalah cara yang lebih mudah untuk menerapkan waktu tunggu pada API asinkron.
  • Dan masih banyak lagi.

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 103.

Kode status HTTP 103 103 - petunjuk awal

Salah satu cara untuk meningkatkan performa halaman adalah menggunakan petunjuk resource. Tag tersebut memberikan "petunjuk" kepada browser tentang hal-hal yang mungkin diperlukan nantinya. Misalnya, memuat file di awal atau menghubungkan ke server yang berbeda.

<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 mengirimkan setidaknya bagian halaman.

Bayangkan browser meminta halaman, tetapi server memerlukan beberapa ratus milidetik untuk membuatnya. Sampai {i>browser<i} mulai menerima laman, browser hanya akan duduk di sana dan menunggu. Namun, jika server mengetahui bahwa halaman akan selalu memerlukan sekumpulan subresource tertentu, misalnya file CSS, beberapa JavaScript, dan beberapa gambar, server dapat langsung merespons dengan kode status Petunjuk Awal HTTP 103 yang baru, dan meminta browser untuk melakukan pramuat sub-resource tersebut.

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

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

Mulai menggunakan Petunjuk awal HTTP 103:

API Akses Font Lokal

Font di web selalu menjadi tantangan, dan terutama untuk aplikasi yang memungkinkan pengguna membuat grafik dan desain mereka sendiri. Sampai saat ini, aplikasi web hanya bisa menggunakan {i>font<i} 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 sangat penting jika Anda perlu mengimplementasikan stack teks kustom Anda sendiri.

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

Untuk mendapatkan daftar font yang diinstal pada 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;
  }
}

Lalu, panggil window.queryLocalFonts(). Metode ini menampilkan array dari semua font yang diinstal pada 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 ingin melihat sebagian font, Anda dapat memfilternya dengan menambahkan parameter postscriptNames.

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

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

Waktu Tunggu 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 sekarang, jika Anda ingin membatalkan langganan 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 dibatalkan setelah jumlah milidetik yang ditentukan. Kode yang dulunya hanya sedikit 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, serta Safari.

Dan banyak lagi!

Tentu saja masih banyak lagi.

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

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 103.

Langganan

Untuk terus mengikuti 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 ada di sini untuk memberi tahu Anda apa yang baru di Chrome!