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

Pete LePage

Chrome 79 hiện đang được triển khai!

Tôi là Pete LePage. Hãy cùng tìm hiểu những điểm mới dành cho nhà phát triển trong Chrome 79!

Biểu tượng có thể che

Nếu đang chạy Android O trở lên và đã cài đặt một Ứng dụng web tiến bộ, thì có thể bạn đã nhận thấy vòng tròn màu trắng gây khó chịu xung quanh biểu tượng.

Rất may, Chrome 79 hiện hỗ trợ các biểu tượng có thể che cho Ứng dụng web tăng tiến đã cài đặt.Bạn cần thiết kế biểu tượng của mình để vừa với vùng an toàn – về cơ bản là một vòng tròn có đường kính bằng 80% của canvas.

Sau đó, trong tệp kê khai ứng dụng web, bạn cần thêm một thuộc tính purpose mới vào biểu tượng và đặt giá trị của thuộc tính đó thành maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes có một bài đăng tuyệt vời trên CSS Tricks – Biểu tượng có thể che: Biểu tượng thích ứng của Android cho PWA của bạn với tất cả thông tin chi tiết và có một công cụ tuyệt vời mà bạn có thể sử dụng để kiểm thử biểu tượng nhằm đảm bảo chúng phù hợp.

Web XR

Giờ đây, bạn có thể tạo trải nghiệm sống động cho điện thoại thông minh và màn hình gắn đầu bằng WebXR Device API.

WebXR mang đến một loạt trải nghiệm sống động. Từ việc sử dụng công nghệ thực tế tăng cường để xem một chiếc ghế dài mới trông như thế nào trong nhà bạn trước khi mua, đến các trò chơi thực tế ảo và phim 360 độ, v.v.

Để bắt đầu sử dụng API mới, hãy đọc bài viết Thực tế ảo xuất hiện trên web.

Bản dùng thử theo nguyên gốc mới

Các thử nghiệm theo nguyên gốc giúp chúng tôi xác thực các tính năng và API thử nghiệm, đồng thời giúp bạn có thể đưa ra ý kiến phản hồi về khả năng hữu dụng và hiệu quả của các tính năng và API đó trong quá trình triển khai rộng rãi hơn.

Các tính năng thử nghiệm thường chỉ có sẵn sau một cờ, nhưng khi chúng tôi cung cấp Bản dùng thử theo nguyên gốc cho một tính năng, bạn có thể đăng ký bản dùng thử theo nguyên gốc đó để bật tính năng cho tất cả người dùng trên nguyên gốc của bạn.

Khi chọn sử dụng bản dùng thử theo nguồn gốc, bạn có thể tạo bản minh hoạ và nguyên mẫu mà người dùng thử nghiệm beta có thể dùng thử trong thời gian dùng thử mà không cần bật bất kỳ cờ đặc biệt nào trong Chrome.

Bạn có thể xem thêm thông tin về bản dùng thử theo nguyên gốc trong Hướng dẫn về bản dùng thử theo nguyên gốc dành cho nhà phát triển web. Bạn có thể xem danh sách các thử nghiệm theo nguyên gốc đang hoạt động và đăng ký tham gia các thử nghiệm đó trên trang Thử nghiệm theo nguyên gốc của Chrome.

Khoá chế độ thức

Một trong những điều tôi khó chịu nhất về Google Trang trình bày là nếu bạn để bộ bài mở trên một trang trình bày quá lâu, trình bảo vệ màn hình sẽ kích hoạt. Trước khi tiếp tục, bạn cần mở khoá máy tính. Hầy!

Tuy nhiên, với API Khoá chế độ thức mới, một trang có thể yêu cầu khoá và ngăn màn hình giảm độ sáng hoặc trình bảo vệ màn hình khởi động. Chế độ này rất phù hợp với Trang trình bày, nhưng cũng hữu ích cho các trang web như trang web công thức nấu ăn – nơi bạn có thể muốn giữ màn hình bật trong khi làm theo hướng dẫn.

Để yêu cầu khoá chế độ thức, bạn cần gọi navigator.wakeLock.request() và lưu đối tượng WakeLockSentinel mà hàm này trả về.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Khoá được duy trì cho đến khi người dùng rời khỏi trang hoặc bạn gọi release trên đối tượng WakeLockSentinel mà bạn đã lưu trước đó.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Bạn có thể xem thêm thông tin chi tiết tại web.dev/wakelock.

rendersubtree thuộc tính

Đôi khi, bạn không muốn một phần của DOM hiển thị ngay lập tức. Ví dụ: thanh cuộn có lượng nội dung lớn hoặc giao diện người dùng theo thẻ, trong đó chỉ một số nội dung hiển thị tại một thời điểm nhất định.

Thuộc tính rendersubtree mới cho trình duyệt biết rằng trình duyệt có thể bỏ qua việc hiển thị cây con đó. Điều này cho phép trình duyệt dành nhiều thời gian hơn để xử lý phần còn lại của trang, tăng hiệu suất.

Khi rendersubtree được đặt thành invisible, nội dung của phần tử sẽ không được vẽ hoặc kiểm thử lượt nhấn, cho phép tối ưu hoá kết xuất.

Thay đổi rendersubtree thành activatable, hiển thị nội dung bằng cách xoá thuộc tính invisible và hiển thị nội dung.

Chrome Dev Summit 2019

Nếu bạn bỏ lỡ Hội nghị Chrome Dev, tất cả các buổi trò chuyện đều có trên kênh YouTube của chúng tôi.

Jake cũng có một luồng tweet tuyệt vời với tất cả những điều thú vị diễn ra giữa các cuộc trò chuyện, bao gồm cả thành viên mới nhất của nhóm chúng tôi, Surjiko.

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

Đăng ký

Nếu muốn cập nhật video của chúng tôi, 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 80 được phát hành, tôi sẽ quay lại đây để cho bạn biết những tính năng mới trong Chrome!