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

Pete LePage

Chrome 79 vừa ra mắt!

Tôi là Pete LePage, 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 79!

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

Nếu đang chạy Android O trở lên và đã cài đặt Ứng dụng web tiến bộ, thì bạn có thể 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 giấu cho các Ứng dụng web tiến bộ đã cài đặt.Bạn cần thiết kế biểu tượng cho vừa với vùng an toàn – về cơ bản là một hình tròn có đường kính chiếm 80% canvas.

Sau đó, trong tệp kê khai ứng dụng web, bạn cần thêm 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"
  ]
  ...
}

Trong bài đăng rất hay về các thủ thuật CSS – các biểu tượng có thể che: Biểu tượng thích ứng của Android cho PWA của bạn, bạn có thể xem đầy đủ thông tin, đồng thời có một công cụ hữu ích mà bạn có thể dùng để kiểm tra xem biểu tượng của mình có phù hợp hay không.

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 hiển thị đeo đầu bằng WebXR Device API.

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

Để bắt đầu với API mới, hãy đọc bài viết Thực tế ảo trên web.

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

Bản dùng thử theo nguyên gốc mang đến cho chúng tôi cơ hộ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 chúng 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ỉ hoạt động sau 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 này cho tất cả người dùng trên nguồn gốc của bạn.

Việc chọn sử dụng bản dùng thử theo nguyên gốc cho phép bạn tạo các bản minh hoạ và nguyên mẫu mà người dùng đang kiểm thử beta có thể dùng trong suốt thời gian dùng thử mà không yêu cầu họ lậ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 bản dùng thử theo nguyên gốc đang hoạt động và đăng ký dùng các bản dùng đó trên trang Bản dùng thử theo nguyên gốc của Chrome.

Khoá chế độ thức

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

Tuy nhiên, với API Wake Lock 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ông kích hoạt. Công cụ này phù hợp với Trang trình bày, nhưng cũng hữu ích cho những nội dung như trang web về công thức nấu ăn, tức là bạn có thể muốn màn hình luôn 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à đối tượng 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á này đượ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 DOM hiển thị ngay lập tức. Ví dụ: những thanh cuộn có lượng lớn nội dung hoặc giao diện người dùng dạng thẻ mà chỉ hiển thị một số nội dung tại một thời điểm bất kỳ.

Thuộc tính rendersubtree mới cho trình duyệt biết là có thể bỏ qua quá trình kết xuất 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, giúp tăng hiệu suất.

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

Việc thay đổi rendersubtree thành activatable sẽ khiến nội dung hiển thị bằng cách xoá thuộc tính invisible và hiển thị nội dung đó.

Hội nghị Chrome cho nhà phát triển năm 2019

Nếu bạn bỏ lỡ Hội nghị Nhà phát triển Chrome, thì tất cả các cuộc trò chuyện đều có trên kênh YouTube của chúng tôi.

Jake cũng có một chuỗi bài đăng trên Twitter rất hay, chia sẻ mọi nội dung 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 trong nhóm của chúng tôi là Surjiko.

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

Phần này chỉ đề cập đến một số điểm chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm những thay đổi trong Chrome 78.

Đăng ký

Nếu bạn muốn luôn nhận được thông tin mới nhất về video của chúng tôi, hãy đăng ký 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 bất cứ khi nào chúng tôi ra mắt video mới.

Tôi là Pete LePage và ngay sau khi Chrome 80 được phát hành, tôi sẽ có mặt tại đây để cho bạn biết -- những điểm mới trong Chrome!