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 sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 76!

Nút cài đặt thanh địa chỉ PWA

Trong Chrome 76, chúng tôi sẽ giúp người dùng cài đặt Ứng dụng web tiến bộ trên máy tính dễ dàng hơn 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ộ, Chrome sẽ hiển thị một nút cài đặt trên thanh địa chỉ cho người dùng biết rằng họ có thể cài đặt PWA của bạn. Nếu người dùng nhấp vào nút cài đặt, thì về cơ bản cũng giống như việc gọi prompt() trên sự kiện beforeinstallprompt; tuỳ chọn này hiển thị hộp thoại cài đặt, giúp người dùng dễ dàng cài đặt PWA của bạn.

Xem bài viết Cài đặt thanh địa chỉ cho các Ứng dụng web tiến bộ trên máy tính để biết đầy đủ thông tin chi tiết.


Tăng khả năng kiểm soát đối với thanh thông tin nhỏ về PWA

Ví dụ về thanh thông tin nhỏ Thêm vào Màn hình chính của AirHorner

Trên thiết bị di động, Chrome sẽ hiển thị thanh thông tin nhỏ khi người dùng truy cập vào trang web của bạn lần đầu tiên nếu trang web đó đáp ứng 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 về việc bạn muốn có thể ngăn thanh thông tin nhỏ xuất hiện và cung cấp chương trình khuyến mãi cài đặt của riêng mình.

Kể từ Chrome 76, việc gọi preventDefault() trên sự kiện beforeinstallprompt sẽ dừng hiển thị thanh thông tin nhỏ.

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 rằng bạn có thể cài đặt PWA. Hãy xem bài viết Mẫu quảng cáo chế độ cài đặt PWA để biết các phương pháp hay nhất được đề xuất của chúng tôi nhằm thúc đẩy quá trình cài đặt các Ứ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 cài đặt, Chrome kiểm tra định kỳ 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 đổi tên ứng dụng, để xem 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ì ba 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 đều là mới nhất.

Xem phần Cập nhật tệp WebAPK thường xuyên hơn để biết đầy đủ thông tin chi tiết.

Chế độ tối

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

Truy vấn phương tiện prefers-color-scheme cho phép bạn điều chỉnh giao diện của trang web để 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 Xin chào bóng tối, người bạn cũ của tôi trên web.dev, trong đó trình bày mọi điều bạn cần biết, cùng với các mẹo thiết kế biểu định kiểu để hỗ trợ cả chế độ sáng và chế độ tối.

Và nhiều kiến thức khác!

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

Promise.allSettled()

Cá nhân, tôi thực sự hào hứng về Promise.allSettled(). Điều này tương tự như Promise.all(), ngoại trừ việc nó chờ cho đến khi tất cả các lời hứa được giải quyết trước khi quay lại.

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).

Đọc blob dễ dàng hơn

Blob dễ đọc hơn bằng 3 phương thức mới: text(), arrayBuffer() và stream(). Điều này có nghĩa là chúng ta không phải tạo một 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ộ

Ngoài ra, chúng tôi thêm tính năng hỗ trợ 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

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 dưới đây để biết thêm về những thay đổi trong Chrome 76.

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