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

Pete LePage

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

Tôi là Pete LePage, đang làm việc và quay video tại nhà. Hãy cùng tìm hiểu những điểm mới dành cho nhà phát triển trong Chrome 93.

Tập lệnh mô-đun CSS

Giờ đây, bạn có thể tải biểu định kiểu CSS bằng câu lệnh import, giống như các mô-đun JavaScript. Sau đó, bạn có thể áp dụng biểu định kiểu cho tài liệu hoặc gốc bóng theo cách tương tự như biểu định kiểu có thể tạo.

Tính năng CSS Module Scripts mới rất phù hợp với các phần tử tuỳ chỉnh. Và không giống như các cách áp dụng CSS khác từ JavaScript, bạn không cần tạo phần tử hoặc can thiệp vào chuỗi JavaScript của văn bản CSS.

Để sử dụng, hãy nhập biểu định kiểu bằng assert {type: 'css'}, sau đó áp dụng biểu định kiểu đó cho document hoặc shadowRoot bằng cách gọi adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Nhưng hãy lưu ý, nếu bạn bỏ qua assert, tệp sẽ được coi là JavaScript và không hoạt động!

Hãy xem bài viết Sử dụng Tập lệnh mô-đun CSS để nhập biểu định kiểu trên web.dev để biết thông tin chi tiết.

Multi-Screen Window Placement API

Đối với một số ứng dụng, việc mở cửa sổ mới và đặt chúng ở những vị trí cụ thể hoặc màn hình cụ thể là một tính năng quan trọng. Ví dụ: khi sử dụng Trang trình bày để thuyết trình, tôi muốn các trang trình bày xuất hiện ở chế độ toàn màn hình trên màn hình chính và ghi chú của người thuyết trình xuất hiện trên màn hình còn lại.

Multi-Screen Window Placement API giúp bạn có thể liệt kê các màn hình được kết nối với máy của người dùng và đặt cửa sổ trên các màn hình cụ thể. Đây là bản dùng thử theo nguyên gốc thứ hai và chúng tôi đã thực hiện một số thay đổi dựa trên ý kiến phản hồi của bạn.

Bạn có thể nhanh chóng kiểm tra xem có nhiều màn hình được kết nối với thiết bị hay không:

const isExtended = window.screen.isExtended;
// returns true/false

Tuy nhiên, chức năng chính nằm trong window.getScreens(), cung cấp tất cả thông tin chi tiết về màn hình được đính kèm.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Ví dụ: bạn có thể xác định màn hình chính, sau đó sử dụng requestFullscreen() để hiển thị một phần tử trên màn hình đó.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Ngoài ra, lớp này còn cung cấp một cách để theo dõi các thay đổi, chẳng hạn như khi một màn hình mới được cắm vào hoặc tháo ra.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Hãy xem bài viết của Tom Quản lý nhiều màn hình bằng API Multi-Screen Window Placement trên web.dev để tìm hiểu sâu hơn.

Chu kỳ phát hành ngắn hơn

Vào tháng 3, chúng tôi đã thông báo về kế hoạch rút ngắn chu kỳ phát hành và ra mắt phiên bản Chrome mới sau mỗi 4 tuần.

Thời điểm đó đã đến và chúng tôi sẽ phát hành Chrome 94 vào ngày 21 tháng 9. Bạn có thể tìm thấy ngày phát hành dự kiến cho từng phiên bản trên Lịch Chrome.

Các tính năng mới của PWA

Nếu bạn đang xây dựng một Ứng dụng web tiến bộ, thì có hai bản dùng thử theo nguyên gốc mới đáng để xem.

Trình xử lý URL cho PWA

Nếu đã cài đặt một PWA và nhấp vào đường liên kết đến PWA đó, thì có thể bạn muốn mở đường liên kết đó trong PWA, chứ không phải trong thẻ trình duyệt.

Bằng cách chỉ định url_handlers trong tệp kê khai ứng dụng web và thêm tệp web-app-origin-association vào thư mục .well-known/, bạn có thể cho trình duyệt biết rằng nếu người dùng nhấp vào một đường liên kết đến PWA của bạn, thì đường liên kết đó sẽ mở trong PWA đã cài đặt.

Ví dụ về url_handlers trong tệp manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Tệp web-app-origin-association mẫu:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Và chỉ cần xác minh thêm một chút, bạn thậm chí có thể yêu cầu PWA xử lý các đường liên kết từ các nguồn gốc khác mà bạn sở hữu.

Tất cả thông tin chi tiết về bản dùng thử theo nguyên gốc đều có trong bài viết PWA dưới dạng Trình xử lý URL trên web.dev.

Lớp phủ điều khiển cửa sổ

Lớp phủ điều khiển cửa sổ mở rộng vùng ứng dụng để bao phủ toàn bộ cửa sổ, bao gồm cả thanh tiêu đề và các nút điều khiển cửa sổ, chẳng hạn như nút đóng, phóng to và thu nhỏ.

Bạn có thể sử dụng tính năng này để làm cho PWA đã cài đặt trông giống các ứng dụng cần cài đặt khác hơn.

Để biết thêm thông tin về bản dùng thử theo nguyên gốc, hãy xem bài viết Tuỳ chỉnh lớp phủ chế độ điều khiển cửa sổ trên thanh tiêu đề của PWA.

Hội nghị thượng đỉnh về PWA

Hội nghị thượng đỉnh PWA sắp diễn ra vào tháng 10. Đây là một hội nghị trực tuyến miễn phí, tập trung vào việc giúp mọi người thành công với Ứng dụng web tiến bộ. Hội nghị thượng đỉnh PWA là sự hợp tác giữa những người đến từ một số công ty khác nhau tham gia vào việc tạo ra các công nghệ PWA: Google, Intel, Microsoft và Samsung.

Có rất nhiều bài nói chuyện và nội dung hay. Bạn có thể tìm hiểu thêm và đăng ký tại PWASummit.org.

Và nhiều tính năng khác!

Tất nhiên là còn nhiều điều khác nữa.

  • Flexbox và các mục flexbox đã bổ sung tính năng hỗ trợ cho các từ khoá căn chỉnh: start, end, self-start, self-end, left và right.
  • API bảng nhớ tạm không đồng bộ hiện hỗ trợ tệp SVG.
  • Ngoài ra, thuộc tính media sẽ được áp dụng khi đặt meta theme-color, nhờ đó, bạn có thể chỉ định các màu giao diện khác nhau cho chế độ sáng và chế độ tối.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

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

Đây chỉ là 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 những thay đổi khác trong Chrome 93.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube của Chrome Developers. 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 94 ra mắt, tôi sẽ có mặt tại đây để chia sẻ với bạn những điểm mới trong Chrome!