Điểm mới trong Chrome 68

Pete LePage

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

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

Bạn muốn xem danh sách đầy đủ các thay đổi? Hãy xem danh sách thay đổi về kho lưu trữ nguồn Chromium.

Thay đổi đối với tính năng Thêm vào Màn hình chính

Nếu trang web của bạn đáp ứng các tiêu chí để thêm vào màn hình chính, thì Chrome sẽ không còn 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 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 một nút hoặc phần tử giao diện người dùng khác vào ứng dụng để cho biết người dùng có thể cài đặt ứng dụng.

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ị một thanh thông tin thu nhỏ trong 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 thu nhỏ sẽ không xuất hiện lại trong một thời gian.

Bài viết Những thay đổi cần thêm vào hành vi trên màn hình chính cung cấp thông tin chi tiết đầy đủ, bao gồm cả các mã mẫu mà bạn có thể sử dụng và nhiều thông tin khác.

API Vòng đời trang

Khi người dùng có nhiều 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, thì hệ thống có thể tạm ngưng trang web đó để tiết kiệm tài nguyên. Giờ đây, với Page Lifecycle API mới, 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 mở một thẻ ở chế độ nền trong một 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, ứng dụng sẽ kích hoạt sự kiện freeze, cho phép bạn đóng các kết nối IndexedDB hoặc mạng đang mở hoặc lưu mọi trạng thái chế độ xem chưa lưu. Sau đó, khi người dùng lấy lại tiêu điểm của thẻ, sự kiện resume sẽ được kích hoạt, tại đó bạn có thể khởi chạy lại mọi nội dung đã bị huỷ.

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 của Phil về API Vòng đời trang để biết thêm nhiều thông tin chi tiết, bao gồm cả mã mẫu, mẹo và nhiều thông tin khác. Bạn có thể tìm thấy thông số kỹ thuật và tài liệu giải thích trên GitHub.

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

Payment Request API là một phương thức mở, dựa trên tiêu chuẩn để chấp nhận thanh toán. API Trình xử lý thanh toán mở rộng phạm vi 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 web hỗ trợ thanh toán ngay trong trải nghiệm Yêu cầu thanh toán.

Là người bán, bạn có thể dễ dàng thêm một ứng dụng thanh toán dựa trên web hiện có bằng cách thêm một mục 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 bạn cài đặt một worker dịch vụ có thể xử lý phương thức thanh toán đã chỉ định, thì worker dịch vụ đó sẽ xuất hiện trong Giao diện người dùng yêu cầu thanh toán và người dùng có thể thanh toán bằng worker dịch vụ đó.

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

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

Tất nhiên, đây chỉ là một số thay đổi dành cho nhà phát triển trong Chrome 68. 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 bài viết Tính năng mới trong Chrome DevTools để tìm hiểu các tính năng mới trong DevTools của Chrome 68.

Đăng ký

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