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 tính năng khác!

Tôi là Pete LePage. Hãy cùng tìm hiểu kỹ 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ỉ bao gồm một số điểm nổi bật chính, hãy truy cập các đường liên kết bên dưới để biết thêm về những thay đổi 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 có thể cài đặt giống như ứng dụng, được xây dựng 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, tăng cường hỗ trợ Ứng dụng web tiến bộ trên tất cả cá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á quá trình phát triển ứng dụng web.

Progressive Web App hoạt động nhanh và ổn định; luôn tải và hoạt động ở cùng tốc độ, bất kể kết nối mạng. Các giải pháp này cung cấp 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 qua 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 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 các ứng dụng này từ cùng một nơi như các ứng dụng khác, chạy trong cửa sổ riêng, xuất hiện trong trình chuyển đổi tác vụ, các biểu tượ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ề khả năng giữa web và quảng cáo 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 của nền tảng web để giúp bạ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 bạn có thể cài đặt PWA, cài đặt chính sách cho doanh nghiệp và nhiều lợi ích khác.

Nếu bạn đã tạo PWA dành cho thiết bị di động, thì PWA dành cho máy tính cũng không phải là ngoại lệ. Trên thực tế, nếu đã từng sử dụng thiết kế đáp ứng, có nhiều khả năng bạn sẽ dùng thiết kế này. Cơ sở mã duy nhất của bạn sẽ hoạt động trên máy tính và thiết bị di động. Nếu chỉ mới bắt đầu sử dụng PWA, bạn sẽ ngạc nhiên vì việc tạo PWA dễ dàng đến mức nào!

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

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

Trao đổi HTTP đã ký

Cơ chế trao đổi HTTP có chữ ký (SXG), một phần của một công nghệ mới nổi có tên là Gói web hiện đã có trong Chrome 73. Nhờ cơ chế trao đổi HTTP đã ký, bạn có thể tạo nội dung "di động" mà các bên khác có thể phân phối. Đây là khía cạnh quan trọng, vẫn giữ tính toàn vẹn và thuộc tính của trang web gốc.

Cơ chế 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ủ cung cấp nội dung, nhưng vì nội dung đã được ký nên có vẻ như nội dung đang được gửi từ máy chủ của bạn. Khi tải quy trình 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 quy trình trao đổi cho biết nội dung ban đầu đến từ nguồn gốc của bạn.

Trao đổi HTTP đã ký cho phép người dùng phân phối nội dung nhanh hơn, giúp bạn có thể nhận được các lợi ích của CDN mà không phải nhường quyền kiểm soát khoá riêng tư của chứng chỉ. Nhóm AMP đang lên kế hoạch sử dụng các trao đổi HTTP đã 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 về Trao đổi HTTP có chữ ký của Kinuko để biết 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 đó, hãy 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.

Biểu đồ minh hoạ quá trình 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 đến biểu mẫu kiểu. Thậm chí tệ hơn, nó còn gây ra luồng nội dung chưa được định kiểu. Biểu định kiểu có thể tạo giúp bạn có thể xác định và chuẩn bị các kiểu CSS dùng chung rồi áp dụng các kiểu đó cho nhiều Gốc bóng hoặc Tài liệu một cách dễ dàng và không bị trùng lặp.

Nội dung cập nhật đối với CSSStyleSheet dùng chung được áp dụng cho mọi gốc mà biểu định kiểu đó được sử dụng. Đồng thời, việc sử 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.

Bạn có thể bắt đầu đơn giản bằng cách 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 biểu định 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 Biểu định 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 kiến thức khác!

Đây chỉ là một vài trong số những thay đổi trong Chrome 73 dành cho nhà phát triển. Tất nhiên, còn 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ả 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à cũng sắp được hỗ trợ Windows. Ngoài ra, còn có một truy vấn nội dung nghe nhìn CSS: prefers-color-scheme có thể 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 vấn đề này là Thêm hỗ trợ cho tính năng đa phương tiện của CSS prefers-color-scheme Dành cho Chrome và Firefox.

Đă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 74 được phát hành, tôi sẽ sẵn sàng cho bạn biết -- những điểm mới trong Chrome!