Baru di Chrome 95

Pete LePage

Berikut hal yang perlu Anda ketahui:

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

Pemilihan rute dengan URLPattern

Hampir semua aplikasi web bergantung pada pemilihan rute dengan cara tertentu, baik itu kode yang berjalan di server yang memetakan jalur ke file di disk atau logika dalam aplikasi satu halaman yang memperbarui DOM saat URL berubah. URLPattern adalah API platform web baru yang menstandarkan sintaksis pola perutean.

Framework ini dibuat berdasarkan fondasi framework yang ada, sehingga memudahkan untuk melakukan tugas pemilihan rute umum. Misalnya, pencocokan dengan URL lengkap, atau jalur URL, lalu menampilkan informasi tentang pencocokan token dan grup.

Jika Anda sudah terbiasa dengan sintaksis pemilihan rute yang digunakan di Express, Ruby on Rails, atau path-to-regexp, hal ini mungkin akan terlihat familier.

Untuk menggunakannya, buat URLPattern() baru dan berikan detail yang ingin Anda cocokkan dengan pola. Pola dapat berisi karakter pengganti, grup token bernama, grup ekspresi reguler, dan pengubah grup.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Misalnya, mari kita lihat URLPattern yang mungkin digunakan oleh Google Dokumen. Kita akan menentukan kind file, ID file, dan mode yang akan digunakan untuk membukanya. Kemudian, untuk menggunakan pola, kita dapat memanggil test(), atau exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern diaktifkan secara default di Chrome dan Edge versi 95 dan yang lebih baru. Dan untuk browser atau lingkungan seperti Node, yang belum mendukungnya, Anda dapat menggunakan library urlpattern-polyfill.

Lihat artikel Jeff URLPattern menghadirkan pemilihan rute ke platform web untuk mengetahui detail selengkapnya.

Memilih warna dengan Eye Dropper API

Hampir setiap aplikasi desain yang pernah saya gunakan memiliki alat pipet, sehingga memudahkan untuk mengetahui warna sesuatu. Beberapa browser memiliki kemampuan pipet bawaan di <input type=color>, tetapi tidak ideal.

Eye dropper API, yang diimplementasikan oleh beberapa orang di Microsoft, membawa fungsi tersebut ke web. Untuk menggunakannya, buat instance EyeDropper() baru, lalu panggil open() di dalamnya.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Seperti banyak API web modern lainnya, API ini berfungsi secara asinkron, sehingga tidak memblokir thread utama. Saat pengguna mengklik warna yang diinginkan, warna tersebut akan di-resolve dengan warna yang diklik.

Anda dapat mencoba demo singkat, dan melihat kode di Glitch.

PWA Summit

Apakah Anda mengikuti PWA Summit awal bulan ini?

Sangat menyenangkan melihat begitu banyak orang yang berbicara tentang PWA dan berbagi pengalaman mereka. Jika Anda melewatkan acara ini, videonya sudah tersedia, jadi pastikan untuk menontonnya di PWASummit.org atau channel YouTube PWA Summit.

Uji coba origin pengurangan agen pengguna

Pengurangan Agen Pengguna adalah upaya untuk mengurangi platform pelacakan sidik jari pasif, dengan mengurangi informasi dalam string Agen Pengguna hanya ke merek dan versi signifikan browser, perbedaan desktop atau selulernya, dan platform tempatnya berjalan.

Mulai Chrome 95, ada uji coba origin baru yang memungkinkan Anda memilih untuk menerima string UA yang dipersingkat sekarang. Hal ini akan memungkinkan Anda menemukan dan memperbaiki masalah sebelum UA yang dikurangi menjadi perilaku default di Chrome.

Perubahan akan diterapkan secara bertahap melalui sejumlah rilis, tetapi semua yang perlu Anda siapkan dan uji sudah siap sekarang.

Semua detail dan linimasa ada dalam postingan Uji coba origin Pengurangan Agen Pengguna di developer.chrome.com.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

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

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