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, file ID, dan mode apa yang akan dibuka. 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 membawa perutean ke platform web untuk detail selengkapnya.

Memilih warna dengan Eye Dropper API

Hampir setiap aplikasi desain yang pernah saya gunakan memiliki alat pipet, sehingga memudahkan mengetahui warna sesuatu. Beberapa browser memiliki kemampuan pipet bawaan di <input type=color>, tetapi ini 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 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. 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 sesi 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 percetakan sidik jari pasif, dengan mengurangi informasi dalam string Agen Pengguna hanya menjadi merek browser dan versi signifikan, perbedaan desktop atau seluler, serta platform yang menjalankannya.

Mulai Chrome 95, terdapat uji coba origin baru yang memungkinkan Anda memilih untuk menerima string UA yang dikurangi 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. Periksa 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 yang baru di Chrome.