Tính năng mới trong Chrome 95

Pete LePage

Dưới đây là những gì bạn cần phải biết:

Tôi là Pete LePage, tôi đang làm việc và quay video tại nhà. Hãy cùng tìm hiểu những điểm mới dành cho nhà phát triển trong Chrome 95.

Định tuyến bằng URLPattern

Hầu hết các ứng dụng web đều phụ thuộc vào việc định tuyến theo một cách nào đó, cho dù đó là mã chạy trên một máy chủ ánh xạ một đường dẫn đến các tệp trên đĩa hay logic trong một ứng dụng một trang cập nhật DOM khi URL thay đổi. URLPattern là một API nền tảng web mới giúp chuẩn hoá cú pháp mẫu định tuyến.

Nó dựa trên nền tảng của các khung hiện có, giúp bạn dễ dàng thực hiện các tác vụ định tuyến thông thường. Ví dụ: so khớp với URL đầy đủ hoặc đường dẫn URL, sau đó trả về thông tin về mã thông báo và các kết quả so khớp theo nhóm.

Nếu bạn đã quen với cú pháp định tuyến được dùng trong Express, Ruby on Rails hoặc path-to-regexp, thì cú pháp này có thể sẽ quen thuộc với bạn.

Để sử dụng, hãy tạo một URLPattern() mới và cung cấp thông tin chi tiết mà bạn muốn so khớp mẫu. Mẫu có thể chứa ký tự đại diện, nhóm mã thông báo được đặt tên, nhóm biểu thức chính quy và bộ sửa đổi nhóm.

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

Ví dụ: hãy xem URLPattern mà Google Tài liệu có thể sử dụng. Chúng ta sẽ chỉ định kind của tệp, ID của tệp và mode để mở tệp. Sau đó, để sử dụng mẫu này, chúng ta có thể gọi test() hoặc 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 được bật theo mặc định trong Chrome và Edge phiên bản 95 trở lên. Đối với các trình duyệt hoặc môi trường như Node chưa hỗ trợ tính năng này, bạn có thể dùng thư viện urlpattern-polyfill.

Hãy xem bài viết của Jeff URLPattern mang tính năng định tuyến đến nền tảng web để biết thông tin đầy đủ!

Chọn màu bằng Eye Dropper API

Hầu như mọi ứng dụng thiết kế mà tôi từng sử dụng đều có công cụ chọn màu, giúp bạn dễ dàng xác định màu của một đối tượng. Một số trình duyệt có chức năng chọn màu được tích hợp vào <input type=color>, nhưng chức năng này không lý tưởng.

API công cụ chọn màu do một số người tại Microsoft triển khai sẽ mang chức năng đó lên web. Để sử dụng, hãy tạo một thực thể EyeDropper() mới, sau đó gọi open() trên thực thể đó.

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

Giống như nhiều API web hiện đại khác, API này hoạt động không đồng bộ để không chặn luồng chính. Khi người dùng nhấp vào màu mà họ muốn, màu đó sẽ xuất hiện.

Hội nghị thượng đỉnh về PWA

Bạn có tham dự Hội nghị thượng đỉnh về PWA vào đầu tháng này không?

Thật vui khi thấy rất nhiều người nói về PWA và chia sẻ trải nghiệm của họ. Nếu bạn bỏ lỡ, tất cả các video đều đã được đăng tải, vì vậy, hãy nhớ xem tại PWASummit.org hoặc kênh YouTube của PWA Summit.

Bản dùng thử theo nguyên gốc để giảm tác nhân người dùng

Giảm thông tin trong trường tác nhân người dùng là một nỗ lực nhằm giảm các bề mặt nhận dạng thụ động bằng cách giảm thông tin trong chuỗi tác nhân người dùng xuống chỉ còn thương hiệu và phiên bản quan trọng của trình duyệt, điểm khác biệt giữa máy tính và thiết bị di động, cũng như nền tảng mà trình duyệt đang chạy.

Bắt đầu từ Chrome 95, có một bản dùng thử theo nguyên gốc mới cho phép bạn chọn nhận chuỗi UA đã rút gọn ngay bây giờ. Việc này sẽ giúp bạn phát hiện và khắc phục các vấn đề trước khi UA rút gọn trở thành hành vi mặc định trong Chrome.

Những thay đổi này sẽ được áp dụng tăng dần trong một số bản phát hành, nhưng mọi thứ bạn cần chuẩn bị và kiểm thử đều đã sẵn sàng ngay bây giờ.

Tất cả thông tin chi tiết và tiến trình đều có trong bài đăng Thử nghiệm nguồn gốc Giảm thông tin trong trường tác nhân người dùng trên developer.chrome.com.

Và nhiều tính năng khác!

Tất nhiên là còn nhiều điều khác nữa.

Tài liệu đọc thêm

Đây chỉ là một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm những thay đổi trong Chrome 95.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký theo dõi kênh YouTube của Chrome Developers. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage và ngay khi Chrome 96 được phát hành, tôi sẽ có mặt ở đây để cho bạn biết những điểm mới trong Chrome!