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:

  • Việc định tuyến trở nên dễ dàng hơn nhờ URLPattern được tích hợp sẵn trong trình duyệt.
  • Eye Dropper API (API công cụ chọn màu) cung cấp một công cụ tích hợp để chọn màu.
  • Hiện có một thử nghiệm mới về nguồn gốc cho phép bạn chọn nhận chuỗi UA rút gọn.
  • Tất cả video của Hội nghị PWA đều có trên mạng.
  • Và còn nhiều tính năng khác.

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu những tính năng 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áy chủ ánh xạ đường dẫn đến các tệp trên ổ đĩa hay logic trong ứ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.

Lớp này được xây dựng 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 phổ biến. 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à kết quả so khớp nhóm.

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

Để 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à đối tượng 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, 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ể sử dụng thư viện urlpattern-polyfill.

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

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

Hầu hết 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 sắc của một đối tượng. Một số trình duyệt có khả năng chọn màu được tích hợp sẵn vào <input type=color>, nhưng không lý tưởng.

API công cụ chọn màu mắt, do một số nhân viên của Microsoft triển khai, mang chức năng đó đến với 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 họ muốn, màu đó sẽ được phân giải bằng màu họ đã nhấp vào.

Bạn có thể thử một bản minh hoạ nhanh và xem mã trên Glitch.

Hội nghị PWA

Bạn có xem Hội nghị PWA vào đầu tháng này không?

Thật tuyệt khi thấy nhiều người nói về PWA và chia sẻ kinh nghiệm của họ. Nếu bạn đã bỏ lỡ sự kiện này, hãy nhớ xem các video trên 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 nền tảng thu thập vân tay thụ động, bằng cách giảm thông tin trong chuỗi User-Agent chỉ còn thương hiệu và phiên bản quan trọng của trình duyệt, sự khác biệt giữa máy tính hoặc thiết bị di động và nền tảng mà trình duyệt đang chạy.

Kể từ Chrome 95, chúng tôi sẽ ra mắt 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. Điều này sẽ cho phép bạn khám phá 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.

Các thay đổi sẽ được áp dụng dần qua 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 tính năng Giảm thông tin trong trường tác nhân người dùng theo nguyên gốc trên developer.chrome.com.

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

Tất nhiên còn rất nhiều tính năng khác.

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

Phần này chỉ đề cập đến 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 về các thay đổi khác trong Chrome 95.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. 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. Ngay khi Chrome 96 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!