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

Pete LePage

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

Tôi là Pete LePage, cuối cùng cũng đã chụp ảnh trong studio, 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 96.

Tệp kê khai id cho PWA

Khi người dùng cài đặt PWA, trình duyệt cần có một cách để nhận dạng duy nhất PWA. Tuy nhiên, cho đến gần đây, thông số kỹ thuật của tệp kê khai ứng dụng web vẫn chưa chỉ rõ cách xác định PWA, khiến các trình duyệt phải quyết định, dẫn đến nhiều cách triển khai. Trong một số trình duyệt, start_url được dùng, trong khi ở các trình duyệt khác, đường dẫn đến tệp kê khai được dùng.

Điều đó khiến bạn không thể thay đổi một trong hai trường đó mà không làm hỏng trải nghiệm cài đặt. Giờ đây, đã có một thuộc tính id mới không bắt buộc, cho phép bạn xác định rõ giá trị nhận dạng dùng cho PWA của mình.

Việc thêm thuộc tính id vào tệp kê khai sẽ xoá phần phụ thuộc trên start_url hoặc vị trí của tệp kê khai, đồng thời cho phép cập nhật các trường đó.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Kể từ Chrome 96, tính năng hỗ trợ cho thuộc tính id sẽ có trong các trình duyệt dựa trên Chromium dành cho máy tính. Hỗ trợ cho thiết bị di động (hiện đang sử dụng URL tệp kê khai làm mã nhận dạng duy nhất) sẽ ra mắt vào nửa đầu năm 2022.

Công cụ cho nhà phát triển hiển thị mã ứng dụng đã tính toán

Nếu đã có PWA trong phiên bản chính thức và muốn thêm id vào tệp kê khai, bạn cần sử dụng mã nhận dạng do trình duyệt chỉ định. Bạn có thể tìm thấy id trong ngăn Manifest của bảng điều khiển Application (Ứng dụng) trong Dev Tools (Công cụ dành cho nhà phát triển).

Đối với một PWA hoàn toàn mới, bạn có thể đặt id thành bất kỳ giá trị chuỗi nào mà bạn muốn, nhưng hãy nhớ rằng bạn sẽ không thể thay đổi giá trị đó trong tương lai, vì vậy, hãy lựa chọn thật khôn ngoan.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Hãy xem bài viết Xác định duy nhất PWA với thuộc tính mã tệp kê khai ứng dụng web để biết thêm thông tin.

Trình xử lý giao thức URL cho PWA

Các ứng dụng web có thể dùng navigator.registerProtocolHandler() để đăng ký làm trình xử lý giao thức. Ví dụ: Gmail có thể đăng ký giao thức mailto. Sau đó, khi người dùng nhấp vào một đường liên kết có tiền tố mailto:, Gmail sẽ mở ra để người dùng dễ dàng gửi email.

Kể từ Chrome 96, PWA có thể đăng ký làm trình xử lý giao thức trong quá trình cài đặt. Để làm việc đó cho PWA, hãy thêm thuộc tính protocol_handlers vào tệp kê khai ứng dụng web, chỉ định protocol mà bạn muốn xử lý và url sẽ được mở khi được nhấp vào.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Ở đây có một số hạn chế và bạn không thể đăng ký bất kỳ giao thức nào, vì vậy, hãy xem bài viết Cách đăng ký trình xử lý giao thức URL cho PWA để biết đầy đủ thông tin và cách sử dụng cú pháp web+ để tạo giao thức của riêng bạn!

Gợi ý ưu tiên (bản dùng thử theo nguyên gốc)

Khi phân tích cú pháp một trang web và bắt đầu khám phá cũng như tải tài nguyên xuống (chẳng hạn như hình ảnh, tập lệnh hoặc CSS), trình duyệt sẽ chỉ định mức độ ưu tiên tìm nạp để cố gắng tối ưu hoá việc tải trang. Các trình duyệt khá tốt trong việc chỉ định mức độ ưu tiên, nhưng có thể không phải là cách tối ưu trong mọi trường hợp.

Gợi ý ưu tiên là một tính năng thử nghiệm, được cung cấp dưới dạng bản dùng thử theo nguyên gốc kể từ Chrome 96 và có thể giúp tối ưu hoá Các chỉ số quan trọng về trang web. Thuộc tính importance cho phép bạn chỉ định mức độ ưu tiên cho các loại tài nguyên như CSS, phông chữ, tập lệnh, hình ảnh và iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Ví dụ: đây là trang Google Chuyến bay. Hình nền đó là nội dung lớn nhất hiển thị (LCP).

Ảnh chụp màn hình Google Chuyến bay có hình nền lớn

Chúng ta sẽ thấy tính năng này có và không có gợi ý về mức độ ưu tiên. Khi mức độ ưu tiên được đặt thành high trên hình nền, LCP sẽ giảm từ 2,6 giây xuống 1,9 giây.

Hãy xem bài viết Tối ưu hoá việc tải tài nguyên bằng API ưu tiên tìm nạp để biết tất cả thông tin chi tiết, cách đăng ký bản dùng thử theo nguyên gốc và một số ví dụ tiêu biểu về cách cải thiện hiệu suất kết xuất.

Mô phỏng Chrome 100 trong chuỗi UA

Đầu năm sau, chúng tôi sẽ ra mắt Chrome 100, số phiên bản gồm ba chữ số. Bạn nên kiểm tra bất kỳ mã nào kiểm tra số phiên bản hoặc phân tích cú pháp chuỗi UA để đảm bảo mã đó xử lý 3 chữ số.

Kể từ Chrome 96, có một cờ mới #force-major-version-to-100 sẽ thay đổi số phiên bản hiện tại thành 100 để bạn có thể đảm bảo mọi thứ hoạt động như mong đợi.

Trang Cờ Chrome nêu bật tuỳ chọn mới #force-major-version-to-100

Để biết thông tin chi tiết, hãy xem phần Buộc phiên bản lớn của Chrome lên 100 trong chuỗi tác nhân người dùng.

Hội nghị Nhà phát triển Chrome

Hội nghị Nhà phát triển Chrome đã kết thúc. Tất cả video và nội dung đều có sẵn trực tuyến. Hãy xem trang web của Hội nghị Nhà phát triển Chrome, hoặc nếu bạn bỏ lỡ bài phát biểu khai mạc hay sự kiện phát trực tiếp, hãy xem Danh sách phát CDS trên Kênh YouTube dành cho nhà phát triển Chrome.

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

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

  • Bộ nhớ đệm cho thao tác tiến, quay lại – hay bfcache – hiện đã có phiên bản ổn định và giúp Chrome tương thích với cả Firefox và Safari.

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 96.

Đă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 97 đượ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!