Baru di Chrome 95

Pete LePage

Berikut ini hal yang perlu Anda ketahui:

  • Perutean menjadi lebih mudah dengan URLPattern yang terintegrasi 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 semuanya tersedia secara online.
  • Dan masih banyak lagi.

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

Merutekan dengan URLPattern

Hampir semua aplikasi web bergantung pada perutean 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 menstandardisasi sintaks pola perutean.

Framework ini dibangun berdasarkan fondasi framework yang ada, sehingga mempermudah pelaksanaan tugas perutean umum. Misalnya, mencocokkan dengan URL lengkap, atau jalur nama URL, lalu menampilkan informasi tentang kecocokan token dan grup.

Jika Anda sudah memahami sintaksis perutean yang digunakan di Express, Ruby on Rails, atau path-to-regexp, hal ini mungkin sudah tidak asing bagi Anda.

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 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. Untuk browser atau lingkungan seperti Node yang belum mendukungnya, Anda dapat menggunakan library urlpattern-polyfill.

Lihat artikel Jeff URLPattern brings routing to the web platform untuk mengetahui detail selengkapnya.

Memilih warna dengan Eye Dropper API

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

Eye dropper API, yang diimplementasikan oleh beberapa orang di Microsoft, menghadirkan 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 bekerja secara asinkron, sehingga tidak memblokir thread utama. Saat pengguna mengklik warna yang diinginkan, warna tersebut akan diselesaikan dengan warna yang dikliknya.

PWA Summit

Apakah Anda mengikuti PWA Summit awal bulan ini?

Sangat menyenangkan melihat begitu banyak orang yang membicarakan PWA dan membagikan pengalaman mereka. Jika Anda melewatkannya, semua video 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 permukaan pelacakan sidik jari pasif, dengan mengurangi informasi dalam string Agen Pengguna hanya menjadi merek dan versi signifikan browser, perbedaan desktop atau selulernya, dan platform tempat browser berjalan.

Mulai Chrome 95, ada 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 selama beberapa rilis, tetapi semua yang perlu Anda siapkan dan uji sudah siap sekarang.

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Hal ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui 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 ada di sini untuk memberi tahu Anda hal-hal baru di Chrome.