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à nhiều lợi ích khác!

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 73!

Nhật ký thay đổi

Bài viết 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, đồng thời 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 thiết bị này mang đến trải nghiệm phong phú, hấp dẫn thông qua các tính năng web hiện đại, giúp 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 này 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 tạo một ứng dụng web tiến bộ (PWA) 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 từng sử dụng thiết kế thích ứng, thì có lẽ 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ừ đó.

Trao đổi HTTP đã ký

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. Trao đổi HTTP có chữ ký giúp bạn có thể tạo nội dung "di động" mà các bên khác có thể phân phối và đây là khía cạnh quan trọng, nó giữ lại tính toàn vẹn và thuộc tính của trang web gốc.

Trao đổi có chữ ký: Bản chất

Thao tác này sẽ tách nguồn gốc của nội dung từ máy chủ phân phối nội dung, nhưng vì nội dung đã được ký nên giống như nội dung đ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

Biểu định kiểu có thể tạo, mới trong Chrome 73, mang đến 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 DOM bóng.

Bạn luôn có thể tạo biểu định 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 pháp này có xu hướng dẫn tới PH của biểu đị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 bị trùng lặp.

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

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 rất nhiều thay đổi khác nữa.

  • 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.
  • 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òn có một truy vấn đa phương tiện CSS: prefers-color-scheme, có thể được dùng để phát hiện xem người dùng đã yêu cầu hệ thống sử dụng giao diện màu sáng hay tối. Lỗi theo dõi cho lỗi này là Thêm tính năng hỗ trợ cho tính năng đa phương tiện prefers-color-scheme của CSS Đối với Chrome và Firefox.

Đăng ký

Nếu bạn muốn cập nhật video, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome của chúng tôi. 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!