Baru di Chrome 95

Pete LePage

Berikut hal yang perlu Anda ketahui:

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

Saya Pete LePage, bekerja, dan menembak dari rumah, mari kita pelajari dan lihat apa yang baru untuk developer di Chrome 95.

Memilih rute dengan URLPattern

Hampir semua aplikasi web tergantung pada perutean, entah itu kode yang berjalan di server yang memetakan jalur ke file pada disk atau logika di aplikasi web satu halaman yang memperbarui DOM bila URL berubah. URLPattern adalah web baru yang menstandarkan sintaksis pola perutean.

Sistem ini dibangun di atas fondasi kerangka kerja yang ada, sehingga lebih mudah untuk dijalankan tugas {i>routing<i} yang umum. Misalnya, pencocokan dengan URL lengkap atau URL {i>pathname<i}, lalu menampilkan informasi tentang token dan grup yang cocok.

Jika Anda sudah terbiasa dengan sintaksis pemilihan rute yang digunakan di Express, Ruby on Rails, atau path-to-regexp, mungkin tidak asing bagi Anda.

Untuk menggunakannya, buat URLPattern() baru dan berikan detail yang ingin Anda pola yang cocok. Pola dapat berisi {i>wildcard<i}, 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 mengetahui detail selengkapnya.

Memilih warna dengan Eye Dropper API

Hampir setiap aplikasi desain yang pernah saya gunakan memiliki alat pipet, membuatnya mudah untuk mengetahui warna sesuatu. Beberapa browser memiliki pipet kemampuan bawaan dalam <input type=color>, tetapi hal ini tidak ideal.

API {i>eye dropper<i}, yang diimplementasikan oleh beberapa orang di Microsoft membawa fungsionalitas itu ke web. Untuk menggunakannya, buat 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. Ketika pengguna mengklik warna yang mereka inginkan, itu akan selesai dengan warna yang mereka klik.

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

PWA Summit

Apakah Anda menghadiri PWA Summit awal bulan ini?

Senang rasanya melihat begitu banyak orang membicarakan PWA dan membagikan pengalaman yang lancar bagi developer. Jika Anda melewatkannya, semua video ditayangkan, jadi pastikan untuk memeriksanya di PWASummit.org atau Channel YouTube PWA Summit.

Uji coba origin pengurangan agen pengguna

Pengurangan Agen Pengguna merupakan upaya untuk mengurangi permukaan sidik jari, dengan mengurangi informasi di User-Agent string hanya untuk merek browser dan versi signifikan, {i>desktop<i} atau perbedaan seluler, dan platform yang menjalankannya.

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

Perubahan akan diterapkan secara bertahap pada sejumlah rilis, tetapi semua yang Anda perlukan untuk dipersiapkan dan diuji sudah siap saat ini.

Semua detail dan garis waktu ada di dalam Postingan Uji coba origin Pengurangan Agen Pengguna pada developer.chrome.com.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

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

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 96 dirilis, saya akan siap untuk memberi tahu Anda apa yang baru di Chrome!