Baru di Chrome 95

Pete LePage

Berikut hal yang perlu Anda ketahui:

  • Pemilihan rute menjadi lebih mudah dengan URLPattern yang diintegrasikan ke dalam browser.
  • Eye Dropper API menyediakan alat bawaan untuk memilih warna.
  • Ada uji coba origin baru yang memungkinkan Anda memilih untuk menerima string UA yang dikurangi sekarang.
  • Video PWA Summit tersedia secara online.
  • Dan masih banyak lagi.

Saya Pete LePage, bekerja, dan mengambil gambar dari rumah. Mari selami dan lihat apa yang baru untuk developer di Chrome 95.

Memilih rute dengan URLPattern

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

Fitur ini dibangun berdasarkan fondasi framework yang ada, sehingga lebih mudah untuk melakukan tugas perutean yang umum. Misalnya, mencocokkan dengan URL lengkap atau nama jalur URL, lalu menampilkan informasi tentang kecocokan token dan grup.

Jika Anda sudah terbiasa dengan sintaksis perutean yang digunakan dalam Express, Ruby on Rails, atau path-to-regexp, kode ini mungkin akan terlihat familier.

Untuk menggunakannya, buat URLPattern() baru dan berikan detail yang ingin Anda cocokkan polanya. 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 mana yang akan dibuka. Kemudian untuk menggunakan polanya, 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.

Baca artikel Jeff berjudul URLPattern membawa perutean 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 mudah untuk mengetahui warna sesuatu. Beberapa browser memiliki kemampuan pipet tertanam dalam <input type=color>, tetapi hal ini tidak ideal.

API pipet, yang diterapkan oleh beberapa orang di Microsoft menghadirkan fungsi tersebut ke web. Untuk menggunakannya, buat instance EyeDropper() baru, lalu panggil open() pada instance tersebut.

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. Ketika pengguna mengklik warna yang mereka inginkan, pengguna akan me-resolve warna yang mereka klik.

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

PWA Summit

Apakah Anda mengikuti PWA Summit awal bulan ini?

Kami sangat senang melihat begitu banyak orang membicarakan PWA dan berbagi pengalaman mereka. Jika Anda melewatkannya, semua video sudah tersedia, jadi pastikan untuk melihatnya di PWASummit.org atau channel YouTube PWA Summit.

Uji coba asal pengurangan agen pengguna

Pengurangan Agen Pengguna adalah upaya untuk mengurangi platform sidik jari pasif, dengan mengurangi informasi dalam string Agen Pengguna menjadi hanya merek dan versi signifikan browser, perbedaan desktop atau selulernya, dan platform yang menjalankannya.

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

Perubahan ini akan diterapkan secara bertahap pada sejumlah rilis, tetapi semua yang perlu Anda siapkan dan uji sudah siap saat ini.

Semua detail dan linimasa dapat dilihat di postingan uji coba origin Pengurangan Agen Pengguna di developer.chrome.com.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

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

Langganan

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