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

Pete LePage

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

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

Nút cài đặt ứng dụng web tiến bộ (PWA) trên thanh địa chỉ toàn năng

Trong Chrome 76, chúng tôi giúp người dùng dễ dàng cài đặt Ứng dụng web tiến bộ trên máy tính bằng cách thêm nút cài đặt vào thanh địa chỉ, đôi khi còn gọi là thanh địa chỉ.

Nếu trang web của bạn đáp ứng tiêu chí về khả năng cài đặt Ứng dụng web tiến bộ, thì Chrome sẽ hiển thị nút cài đặt trong thanh địa chỉ để cho người dùng biết rằng ứng dụng web tiến bộ (PWA) của bạn có thể được cài đặt. Nếu người dùng nhấp vào nút cài đặt, về cơ bản, thao tác này giống như việc gọi prompt() trên sự kiện beforeinstallprompt; nút này sẽ hiện hộp thoại cài đặt, giúp người dùng dễ dàng cài đặt PWA của bạn.

Hãy xem bài viết Cài đặt thanh địa chỉ cho ứng dụng web tiến bộ trên máy tính để biết toàn bộ thông tin chi tiết.


Có nhiều quyền kiểm soát hơn đối với thanh thông tin thu nhỏ của PWA

Ví dụ về thanh thông tin thu nhỏ Thêm vào màn hình chính dành cho AirHorner

Trên thiết bị di động, Chrome sẽ hiển thị thanh thông tin thu nhỏ trong lần đầu tiên người dùng truy cập vào trang web của bạn nếu trang web đó đáp ứng các tiêu chí về khả năng cài đặt Ứng dụng web tiến bộ. Chúng tôi đã nhận được ý kiến phản hồi của các bạn rằng bạn muốn có khả năng ngăn thanh thông tin nhỏ xuất hiện và thay vào đó, hãy cung cấp quảng cáo cài đặt của riêng bạn.

Kể từ Chrome 76, việc gọi preventDefault() trên sự kiện beforeinstallprompt sẽ ngăn thanh thông tin mini xuất hiện.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Hãy nhớ cập nhật giao diện người dùng để cho người dùng biết họ có thể cài đặt PWA của bạn. Hãy xem bài viết Mô hình để thúc đẩy lượt cài đặt PWA để biết các phương pháp hay nhất mà chúng tôi đề xuất nhằm thúc đẩy lượt cài đặt Ứng dụng web tiến bộ.

Cập nhật WebAPK nhanh hơn

Khi một Ứng dụng web tiến bộ được cài đặt trên Android, Chrome sẽ tự động yêu cầu và cài đặt APK web. Sau khi cài đặt, Chrome sẽ định kỳ kiểm tra xem tệp kê khai ứng dụng web có thay đổi hay không, có thể bạn đã cập nhật biểu tượng, màu sắc hoặc thay đổi tên ứng dụng, để xem liệu có cần WebAPK mới hay không.

Kể từ Chrome 76, Chrome sẽ kiểm tra tệp kê khai thường xuyên hơn; kiểm tra hằng ngày thay vì 3 ngày một lần. Nếu bất kỳ thuộc tính chính nào đã thay đổi, Chrome sẽ yêu cầu và cài đặt một WebAPK mới, đảm bảo tiêu đề, biểu tượng và các thuộc tính khác được cập nhật.

Hãy xem phần Cập nhật WebAPK thường xuyên hơn để biết toàn bộ thông tin chi tiết.

Chế độ tối

Nhiều hệ điều hành hiện hỗ trợ chế độ tối hay giao diện tối.

Truy vấn nội dung đa phương tiện prefers-color-scheme cho phép bạn điều chỉnh giao diện trang web cho phù hợp với chế độ ưu tiên của người dùng.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom có một bài viết tuyệt vời Hello darkness, my old friend (Xin chào bóng tối, người bạn cũ của tôi) trên web.dev với mọi thông tin bạn cần biết, cùng với các mẹo thiết kế trang tính kiểu để hỗ trợ cả chế độ sáng và chế độ tối.

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

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

Promise.allSettled()

Cá nhân tôi rất hào hứng với Promise.allSettled(). Hàm này tương tự như Promise.all(), ngoại trừ việc hàm này sẽ đợi cho đến khi tất cả các lời hứa được thực hiện trước khi trả về.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Dễ đọc hơn blob

Blob dễ đọc hơn với 3 phương thức mới: text(), arrayBuffer() và stream(); điều này có nghĩa là chúng ta không cần tạo trình bao bọc xung quanh trình đọc tệp nữa!

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Hỗ trợ hình ảnh trong API bảng nhớ tạm không đồng bộ

Đồng thời, chúng tôi đã thêm tính năng hỗ trợ cho hình ảnh vào API Bảng nhớ tạm không đồng bộ, giúp bạn dễ dàng sao chép và dán hình ảnh theo phương thức lập trình.

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

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 về các thay đổi khác trong Chrome 76.

Đă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 và ngay sau khi Chrome 77 được phát hành, tôi sẽ có mặt ngay tại đây để cho bạn biết -- tính năng mới trong Chrome!