Điểm mới trong Chrome 68

Pete LePage

Và nhiều tính năng 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 68!

Bạn muốn xem toàn bộ danh sách các thay đổi? Hãy xem danh sách thay đổi kho lưu trữ nguồn Chromium.

Các thay đổi về Thêm vào Màn hình chính

Nếu trang web của bạn đáp ứng tiêu chí thêm vào màn hình chính, Chrome sẽ không hiển thị biểu ngữ thêm vào màn hình chính nữa. Thay vào đó, bạn có quyền kiểm soát thời điểm và cách thức hiện thông báo nhắc người dùng.

Để nhắc người dùng, hãy theo dõi sự kiện beforeinstallprompt, sau đó lưu sự kiện và thêm nút hoặc thành phần trên giao diện người dùng khác vào ứng dụng để cho biết ứng dụng có thể cài đặt được.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Khi người dùng nhấp vào nút cài đặt, hãy gọi prompt() trên sự kiện beforeinstallprompt đã lưu, sau đó, Chrome sẽ hiển thị hộp thoại thêm vào màn hình chính.


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

Để bạn có thời gian cập nhật trang web, Chrome sẽ hiển thị thanh thông tin nhỏ vào lần đầu tiên người dùng truy cập vào một trang web đáp ứng tiêu chí thêm vào màn hình chính. Sau khi đóng, thanh thông tin nhỏ sẽ không xuất hiện lại trong một thời gian.

Bài viết Các thay đổi về hành vi thêm vào màn hình chính có đầy đủ thông tin chi tiết, bao gồm cả các mã mẫu mà bạn có thể dùng và nhiều nội dung khác.

API Vòng đời trang

Khi người dùng có một số lượng lớn thẻ đang chạy, các tài nguyên quan trọng như bộ nhớ, CPU, pin và mạng có thể bị đăng ký quá mức, dẫn đến trải nghiệm người dùng không tốt.

Nếu trang web của bạn đang chạy ở chế độ nền, hệ thống có thể tạm ngưng trang web đó để bảo toàn tài nguyên. Với API Vòng đời trang mới, giờ đây bạn có thể theo dõi và phản hồi các sự kiện này.

Ví dụ: nếu người dùng đã có một thẻ trong nền trong một khoảng thời gian, thì trình duyệt có thể chọn tạm ngưng thực thi tập lệnh trên trang đó để tiết kiệm tài nguyên. Trước khi thực hiện việc này, thao tác này sẽ kích hoạt sự kiện freeze, cho phép bạn đóng các kết nối mạng hoặc kết nối IndexedDB mở hoặc lưu mọi trạng thái thành phần hiển thị chưa được lưu. Sau đó, khi người dùng lấy tiêu điểm lại thẻ, sự kiện resume sẽ được kích hoạt. Tại đây, bạn có thể khởi chạy lại bất kỳ nội dung nào đã bị gỡ bỏ.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

Hãy xem bài đăng Page Lifecycle API của Phil để biết rất nhiều thông tin chi tiết, bao gồm cả mã mẫu, mẹo và nhiều nội dung khác. Bạn có thể tìm thấy spec và tài liệu giải thích trên GitHub.

API Trình xử lý thanh toán

API Yêu cầu thanh toán là một phương thức mở, dựa trên tiêu chuẩn để chấp nhận các khoản thanh toán. API Trình xử lý thanh toán giúp mở rộng phạm vi tiếp cận của Yêu cầu thanh toán bằng cách cho phép các ứng dụng thanh toán dựa trên nền tảng web hỗ trợ việc thanh toán ngay trong trải nghiệm Yêu cầu thanh toán.

Với người bán, việc thêm một ứng dụng thanh toán hiện có dựa trên nền tảng web cũng dễ dàng như việc thêm một mục nhập vào thuộc tính supportedMethods.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Nếu một trình chạy dịch vụ có thể xử lý phương thức thanh toán đã chỉ định được cài đặt, thì trình chạy đó sẽ hiển thị trong giao diện người dùng của Yêu cầu thanh toán và người dùng có thể thanh toán bằng phương thức thanh toán đó.

Eiji có một bài đăng tuyệt vời hướng dẫn cách triển khai tính năng này cho các trang web của người bán và cho trình xử lý thanh toán.

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

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

Tính năng mới trong Công cụ cho nhà phát triển

Hãy nhớ xem phần Mới trong Công cụ của Chrome cho nhà phát triển để tìm hiểu những điểm mới trong Công cụ cho nhà phát triển trong Chrome 68.

Đăng ký

Sau đó, hãy nhấp vào nút đăng ký trên kênh YouTube 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 69 đượ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!