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 quay video trong phòng thu, 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 96.

Tệp kê khai id cho PWA

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

Điều đó khiến bạn không thể thay đổi bất kỳ trường nào trong số đó mà không làm gián đoạn trải nghiệm cài đặt. Giờ đây, bạn có thể sử dụng thuộc tính id không bắt buộc mới để xác định rõ giá trị nhận dạng dùng cho PWA.

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 và cho phép cập nhật các trường đó.

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

Tính năng hỗ trợ thuộc tính id sẽ xuất hiện trên các trình duyệt dựa trên Chromium dành cho máy tính từ Chrome 96. Tính năng hỗ trợ cho thiết bị di động (hiện 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ó một PWA đang hoạt động 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 Tệp kê khai của bảng điều khiển Ứng dụng trong 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 bạn muốn, nhưng hãy nhớ rằng bạn sẽ không thể thay đổi giá trị này trong tương lai, vì vậy, hãy chọn thật khôn ngoan.

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

Hãy xem bài viết Nhận dạng riêng biệt các PWA bằng 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

Ứng dụng web có thể sử 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, giúp 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. Để thực hiện 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"
    }
  ]
}

Có một số hạn chế ở đây 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 Đăng ký trình xử lý giao thức URL cho PWA để biết thông tin chi tiết đầy đủ và cách sử dụng cú pháp web+ để tạo giao thức của riêng bạn!

Gợi ý về mức độ ư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 các 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 cho các tài nguyên đó để cố gắng tối ưu hoá quá trình tải trang. Trình duyệt khá tốt trong việc chỉ định mức độ ưu tiên, nhưng có thể không 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 bắt đầu 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à lần sơn nội dung lớn nhất (LCP).

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

Hãy xem cách tải ứng dụng có và không có gợi ý về mức độ ưu tiên. Khi đặt mức độ ưu tiên thành high trên hình nền, LCP giảm từ 2,6 giây xuống còn 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 mức độ ưu tiên tìm nạp để biết tất cả thông tin chi tiết, cách đăng ký thử nghiệm theo nguyên gốc và một số ví dụ tuyệt vời về cách API này có thể giúp 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, phiên bản có số ba chữ số. Bạn nên kiểm tra mọi mã 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ý được ba chữ số.

Kể từ Chrome 96, sẽ 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, nhờ đó, bạn có thể đảm bảo mọi thứ hoạt động như mong đợi.

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

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

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

Hội nghị Chrome Dev đã kết thúc. Tất cả video và nội dung đều có trên mạng. Hãy truy cập trang web của Hội nghị nhà phát triển Chrome. Nếu bạn đã bỏ lỡ bài phát biểu chính hoặc 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 tính năng khác!

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

  • Bộ nhớ đệm Quay lại, chuyển tiếp – hoặc bfcache – hiện đã có phiên bản ổn định và giúp Chrome phù hợp với cả Firefox và Safari.

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 các thay đổi trong Chrome 96.

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