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 vào trình duyệt. - Eye Dropper API cung cấp một công cụ tích hợp sẵn để chọn màu.
- Đã có 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ờ.
- Các video về Hội nghị PWA đều có kết nối mạng.
- Và còn nhiều tính năng khác.
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.
- Nếu bạn đang theo dõi công việc của Storage Foundation API, thì sẽ có bản dùng thử theo nguyên gốc mới cho Tên người dùng truy cập.
- WebAssembly hiện cung cấp hỗ trợ xử lý ngoại lệ, cho phép mã phá vỡ luồng kiểm soát khi có một ngoại lệ được gửi.
- Chrome 100 sẽ ra mắt vào năm sau. Có nghĩa là đã đến lúc đảm bảo mã của bạn có thể xử lý nhiều hơn hai chữ số!
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.
- Tính năng mới trong Công cụ của Chrome cho nhà phát triển (95)
- Ngừng sử dụng và xoá Chrome 95
- Thông tin cập nhật về ChromeStatus.com cho Chrome 95
- Tính năng mới của JavaScript trên Chrome 95
- Danh sách thay đổi kho lưu trữ nguồn Chromium
- Lịch phát hành Chrome
Đă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!