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, làm việc và chụp ảnh tại nhà. Hãy cùng tìm hiểu sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 95.

Đang định tuyến bằng URLPattern

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

API 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 thực hiện các tác vụ định tuyến phổ biến dễ dàng hơn. Ví dụ: so khớp với URL đầy đủ hoặc tên đường dẫn URL, sau đó trả về thông tin về mã thông báo và nhóm khớp.

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

Để sử dụng đối tượng này, hãy tạo một URLPattern() mới và cung cấp thông tin chi tiết 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 và mode nào để 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 những trình duyệt hoặc môi trường như Node, chưa hỗ trợ công cụ này, bạn có thể sử dụng thư viện urlpattern-polyfill.

Hãy xem bài viết URLPattern giúp định tuyến trên nền tảng web của Jeff để biết đầy đủ thông tin chi tiết!

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

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

API công cụ chọn màu, do một số nhân viên tại Microsoft triển khai, sẽ mang chức năng đó lên web. Để sử dụng thực thể đó, 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 mà họ đã nhấp vào.

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

Hội nghị PWA

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

Tôi rất vui 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ỡ, thì các video đều sẽ xuất hiện. Vì vậy, hãy nhớ xem các video đó tại PWASummit.org hoặc kênh YouTube của Hội nghị PWA.

Bản dùng thử theo nguyên gốc rút gọn tác nhân người dùng

User-Agent Reduction (Giảm thiểu tác nhân người dùng) là một nỗ lực nhằm giảm các giao diện in dấu vân tay thụ động, bằng cách thu gọn thông tin trong chuỗi User-Agent thành 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 trên máy tính hoặc thiết bị di động, cũng như nền tảng mà trình duyệt đang chạy.

Kể từ Chrome 95, chúng tôi cung cấp bản dùng thử theo nguyên gốc mới cho phép bạn chọn nhận ngay chuỗi UA giảm. Điều này cho phé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 dần 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ử đã sẵn sàng.

Toàn bộ thông tin chi tiết và tiến trình đều có trong bài đăng Bản dùng thử theo nguyên gốc của tính năng Giảm thiểu tác nhân người dùng trên developer.chrome.com.

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm các thay đổi khác trong Chrome 95.

Đăng ký

Để 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 và ngay sau khi Chrome 96 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!