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, đang làm việc và chụp ảnh ở nhà, hãy cùng tìm hiểu 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ư tất cả các ứng dụng web đều phụ thuộc vào định tuyến theo một cách nào đó cho dù ứng dụng đó có đang chạy mã hay không trên máy chủ ánh xạ một đường dẫn đến các tệp trên đĩa hoặc logic trong ứng dụng trang đơn cập nhật DOM khi URL thay đổi. URLPattern là một môi trường web mới API nền tảng chuẩn hoá cú pháp mẫu định tuyến.

Chiến dịch này dựa trên nền tảng là các khung làm việc hiện có, giúp bạn dễ dàng thực hiện tác vụ định tuyến phổ biến. Ví dụ: so khớp với URL đầy đủ hoặc URL pathname, sau đó trả về thông tin về mã thông báo và nhóm trùng khớp.

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

Để sử dụng công cụ này, hãy tạo một URLPattern() mới và cung cấp thông tin chi tiết mà bạn muốn khớp với 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, tệp ID 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ư Nút (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 giúp định tuyến nền tảng web để biết đầy đủ thông tin!

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

Hầu như mọi ứng dụng thiết kế tôi từng sử dụng đều có công cụ chọn màu dễ dàng nhận ra một vật thể có màu gì. Một số trình duyệt có công cụ chọn màu được tích hợp 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 mang đến chức năng đó cho web. Để sử dụng thư viện này, hãy tạo một EyeDropper() mới , sau đó gọi open() trên đó.

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, hình ảnh sẽ được phân giải với màu mà họ đã nhấp vào.

Bạn có thể xem bản minh hoạ ngắn gọn rồi xem mã trên Glitch.

Hội nghị về PWA

Bạn có nắm bắt Hội nghị về PWA từ đầ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ẻ của bạn. Nếu bạn bỏ lỡ, video đã tải lên hết, vì vậy hãy nhớ kiểm tra truy cập 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

Giảm thiểu tác nhân người dùng là nỗ lực nhằm giảm tình trạng thụ động các bề mặt in vân tay, bằng cách giảm thông tin trong User-Agent thương hiệu và phiên bản quan trọng của trình duyệt, máy tính để bàn hoặc di động khác biệt và nền tảng mà nó đang chạy.

Kể từ Chrome 95, sẽ có một bản dùng thử theo nguyên gốc mới cho phép bạn chọn tham gia nhận chuỗi UA rút gọn ngay bây giờ. Thao tác này sẽ cho phép bạn khám phá và khắc phục sự cố trước khi UA bị giảm kích thước trở thành 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à thử nghiệm đã sẵn sàng ngay bây giờ.

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 Giảm thiểu 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 tính năng khác nữa.

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

Bài viết này chỉ đề cập đến 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 dưới đây các thay đổi bổ sung trong Chrome 95.

Đăng ký

Để cập nhật thông tin, hãy đăng ký lên kênh YouTube dành cho nhà phát triển Chrome, và 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 sau khi Chrome 96 được phát hành, tôi sẽ luôn sẵn sàng cho bạn biết các tính năng mới của Chrome!