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

Pete LePage

Trong Chrome 73, chúng tôi đã thêm tính năng hỗ trợ cho:

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

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

Nhật ký thay đổi

Nội dung 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 khác trong Chrome 73.

Ứng dụng web tiến bộ hoạt động ở mọi nơi

Ứng dụng web tiến bộ mang lại trải nghiệm giống như ứng dụng và có thể cài đặt, được tạo và phân phối trực tiếp qua web. Trong Chrome 73, chúng tôi đã thêm tính năng hỗ trợ cho macOS, để hỗ trợ Ứng dụng web tiến bộ cho tất cả nền tảng máy tính – Mac, Windows, ChromeOS và Linux, cũng như thiết bị di động, giúp đơn giản hoá việc phát triển ứng dụng web.

Ứng dụng web tiến bộ hoạt động nhanh và đáng tin cậy; luôn tải và hoạt động ở cùng tốc độ, bất kể kết nối mạng. Các ứng dụng này mang lại trải nghiệm phong phú, hấp dẫn thông qua các tính năng web hiện đại, khai thác tối đa các tính năng của thiết bị.

Người dùng có thể cài đặt PWA của bạn từ trình đơn theo bối cảnh của Chrome hoặc bạn có thể trực tiếp quảng bá trải nghiệm cài đặt bằng sự kiện beforeinstallprompt. Sau khi cài đặt, PWA sẽ tích hợp với hệ điều hành để hoạt động như một ứng dụng gốc: người dùng tìm và chạy ứng dụng này ở cùng một vị trí với các ứng dụng khác, ứng dụng chạy trong cửa sổ riêng, xuất hiện trong trình chuyển đổi tác vụ, biểu tượng của ứng dụng có thể hiển thị huy hiệu thông báo, v.v.

Chúng tôi muốn thu hẹp khoảng cách về chức năng giữa web và ứng dụng gốc để cung cấp nền tảng vững chắc cho các ứng dụng hiện đại được phân phối trên web. Chúng tôi đang nỗ lực bổ sung các tính năng mới cho nền tảng web để giúp bạn có quyền truy cập vào các tính năng như hệ thống tệp, khoá chế độ thức, thêm huy hiệu môi trường xung quanh vào thanh địa chỉ để cho người dùng biết họ có thể cài đặt PWA, cài đặt chính sách cho doanh nghiệp và nhiều tính năng khác.

Nếu bạn đang xây dựng một PWA dành cho thiết bị di động, thì PWA dành cho máy tính cũng không khác. Trên thực tế, nếu đã sử dụng thiết kế thích ứng, thì có thể bạn đã sẵn sàng. Một cơ sở mã duy nhất sẽ hoạt động trên máy tính và thiết bị di động. Nếu mới bắt đầu sử dụng PWA, bạn sẽ ngạc nhiên khi thấy việc tạo PWA thật dễ dàng!

  1. Thêm tệp kê khai
  2. Tạo một bộ biểu tượng
  3. Thêm trình chạy dịch vụ mẫu

Sau đó, hãy lặp lại từ đó.

Signed HTTP Exchange

Signed HTTP Exchange (SXG), một phần của công nghệ mới nổi có tên là Gói web hiện đã có trong Chrome 73. Signed HTTP Exchange cho phép tạo nội dung "có thể di chuyển" mà các bên khác có thể phân phối. Đây là khía cạnh chính, giúp giữ nguyên tính toàn vẹn và ghi nhận tác giả của trang web gốc.

Giao thức trao đổi nội dung đã ký: Bản chất

Thao tác này sẽ tách nguồn gốc của nội dung khỏi máy chủ phân phối nội dung đó, nhưng vì nội dung đã được ký, nên nó giống như đang được phân phối từ máy chủ của bạn. Khi tải Giao dịch trao đổi có chữ ký này, trình duyệt có thể hiển thị URL của bạn một cách an toàn trong thanh địa chỉ vì chữ ký trong giao dịch cho biết nội dung ban đầu đến từ nguồn gốc của bạn.

Giao dịch HTTP đã ký cho phép phân phối nội dung nhanh hơn cho người dùng, giúp bạn có thể tận dụng các lợi ích của CDN mà không phải từ bỏ quyền kiểm soát khoá riêng tư của chứng chỉ. Nhóm AMP dự định sử dụng các giao dịch trao đổi HTTP có chữ ký trên các trang kết quả tìm kiếm của Google để cải thiện URL AMP và tăng tốc số lượt nhấp vào kết quả tìm kiếm.

Hãy xem bài đăng của Kinuko về Signed HTTP Exchange để biết thông tin chi tiết về cách bắt đầu.

Biểu định kiểu có thể tạo

Trang tính kiểu có thể tạo, tính năng mới trong Chrome 73, cung cấp cho chúng ta một cách mới để tạo và phân phối các kiểu có thể sử dụng lại. Điều này đặc biệt quan trọng khi sử dụng Shadow DOM.

Bạn luôn có thể tạo các tệp kiểu bằng JavaScript. Tạo phần tử <style> bằng document.createElement('style'). Sau đó, truy cập vào thuộc tính trang tính để lấy thông tin tham chiếu đến thực thể CSSStyleSheet cơ bản và đặt kiểu.

Sơ đồ cho thấy cách chuẩn bị và áp dụng CSS

Việc sử dụng phương thức này có xu hướng làm tăng kích thước của trang tính kiểu. Tệ hơn nữa, việc này sẽ khiến nội dung không được định kiểu xuất hiện chớp nhoáng. Trang tính kiểu có thể tạo cho phép xác định và chuẩn bị các kiểu CSS dùng chung, sau đó áp dụng các kiểu đó cho nhiều Shadow Root hoặc Tài liệu một cách dễ dàng và không trùng lặp.

Các bản cập nhật cho CSSStyleSheet dùng chung được áp dụng cho tất cả các thư mục gốc đã sử dụng tệp này và việc sử dụng một bảng định kiểu sẽ diễn ra nhanh chóng và đồng bộ sau khi tải bảng.

Cách bắt đầu rất đơn giản, hãy tạo một thực thể mới của CSSStyleSheet, sau đó sử dụng replace hoặc replaceSync để cập nhật các quy tắc của tệp kiểu.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Hãy xem bài đăng Constructable Stylesheets: seamless reusable styles (Trang kiểu có thể tạo: các kiểu có thể sử dụng lại liền mạch) của Jason Miller để biết thêm thông tin chi tiết và mã mẫu!

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

Tất nhiên, đây chỉ là một vài thay đổi trong Chrome 73 dành cho nhà phát triển, còn có rất nhiều thay đổi khác.

  • matchAll() là một phương thức so khớp biểu thức chính quy mới trên nguyên mẫu chuỗi và trả về một mảng chứa các kết quả so khớp hoàn chỉnh.
  • Phần tử <link> hiện hỗ trợ các thuộc tính imagesrcset và imagesizes tương ứng với các thuộc tính srcset và sizes của HTMLImageElement.
  • Việc triển khai bán kính làm mờ bóng của Blink hiện khớp với Firefox và Safari.
  • Chế độ tối cho giao diện người dùng của Chrome hiện được hỗ trợ trên máy Mac và chúng tôi đang trong quá trình hỗ trợ Windows. Ngoài ra, có một truy vấn nội dung đa phương tiện CSS: prefers-color-scheme, có thể dùng để phát hiện xem người dùng có yêu cầu hệ thống sử dụng giao diện màu sáng hay tối hay không. Lỗi theo dõi cho vấn đề này là Thêm tính năng hỗ trợ cho tính năng đa phương tiện prefers-color-scheme CSS dành cho Chrome và Firefox.

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