Các thay đổi cần thực hiện để thêm vào hành vi trên màn hình chính

Kể từ lần đầu ra mắt biểu ngữ thêm vào màn hình chính, chúng tôi đã nỗ lực để gắn nhãn Ứng dụng web tiến bộ một cách rõ ràng hơn và đơn giản hoá cách người dùng có thể cài đặt các ứng dụng này. Mục tiêu cuối cùng của chúng tôi là cung cấp nút cài đặt trong thanh địa chỉ trên tất cả các nền tảng và trong Chrome 68, chúng tôi đang thay đổi hướng tới mục tiêu đó.

Điều gì sẽ thay đổi?

Kể từ Chrome 68 trên Android (Ổn định vào tháng 7 năm 2018), Chrome sẽ không hiển thị biểu ngữ thêm vào màn hình chính nữa. Nếu trang web đáp ứng tiêu chí thêm vào màn hình chính, thì Chrome sẽ hiển thị thanh thông tin nhỏ. Sau đó, nếu người dùng nhấp vào thanh thông tin nhỏ hoặc bạn gọi prompt() trên sự kiện beforeinstallprompt ngay trong một cử chỉ của người dùng, thì Chrome sẽ hiển thị hộp thoại thêm vào màn hình chính.

Thanh thông tin nhỏ

Thanh thông tin nhỏ là một thành phần trên giao diện người dùng của Chrome và không thể điều khiển bằng trang web nhưng người dùng có thể dễ dàng đóng. Sau khi bị người dùng đóng, thông báo sẽ không xuất hiện lại cho đến khi một khoảng thời gian đủ lâu (hiện là 3 tháng). Thanh thông tin nhỏ sẽ xuất hiện khi trang web đáp ứng các tiêu chí thêm vào màn hình chính, bất kể bạn có preventDefault() trong sự kiện beforeinstallprompt hay không.

Thanh thông tin nhỏ là một trải nghiệm tạm thời cho Chrome trên Android khi chúng tôi nỗ lực hướng đến việc tạo ra trải nghiệm nhất quán trên tất cả các nền tảng, trong đó có nút cài đặt trong thanh địa chỉ. ## Kích hoạt hộp thoại thêm vào màn hình chính

Thay vì nhắc người dùng khi tải trang (phản mẫu đối với các yêu cầu cấp quyền), bạn có thể cho biết ứng dụng của mình có thể được cài đặt bằng một số giao diện người dùng, sau đó hiển thị lời nhắc cài đặt theo phương thức. Ví dụ: PWA dành cho máy tính này sẽ thêm nút "Cài đặt ứng dụng" ngay phía trên tên hồ sơ của người dùng.

Việc nhắc cài đặt ứng dụng qua một cử chỉ của người dùng khiến người dùng cảm thấy ít spam hơn và tăng khả năng họ sẽ nhấp vào "Thêm" thay vì "Huỷ". Việc kết hợp nút Cài đặt vào ứng dụng có nghĩa là ngay cả khi người dùng chọn không cài đặt ứng dụng của bạn ngay hôm nay, nút này vẫn sẽ ở đó vào ngày mai hoặc bất cứ khi nào họ sẵn sàng cài đặt.

Đang theo dõi sự kiện beforeinstallprompt

Nếu trang web của bạn đáp ứng tiêu chí thêm vào màn hình chính, thì Chrome sẽ kích hoạt sự kiện beforeinstallprompt, lưu tham chiếu đến sự kiện đó và cập nhật giao diện người dùng để cho biết rằng người dùng có thể thêm ứng dụng của bạn vào màn hình chính của họ.

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;
});

Sự kiện beforeinstallprompt sẽ không được kích hoạt nếu ứng dụng đã được cài đặt (xem tiêu chí thêm vào màn hình chính). Tuy nhiên, nếu sau đó người dùng gỡ cài đặt ứng dụng, thì sự kiện beforeinstallprompt sẽ lại được kích hoạt trên mỗi thao tác điều hướng trang.

Đang hiện hộp thoại với prompt()

Để hiện hộp thoại thêm vào màn hình chính, hãy gọi prompt() cho sự kiện đã lưu ngay trong một cử chỉ của người dùng. Chrome sẽ hiển thị hộp thoại phương thức, nhắc người dùng thêm ứng dụng của bạn vào màn hình chính của họ. Sau đó, hãy theo dõi lời hứa do thuộc tính userChoice của sự kiện beforeinstallprompt trả về. Lời hứa sẽ trả về một đối tượng có thuộc tính outcome sau khi lời nhắc hiện ra và người dùng đã phản hồi lời nhắc đó.

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(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

Bạn chỉ có thể gọi prompt() trên sự kiện bị trì hoãn một lần. Nếu người dùng nhấp vào huỷ trong hộp thoại, bạn sẽ phải đợi cho đến khi sự kiện beforeinstallprompt được kích hoạt trên thanh điều hướng trang tiếp theo. Không giống như các yêu cầu cấp quyền truyền thống, thao tác nhấp vào huỷ sẽ không chặn các lệnh gọi trong tương lai đến prompt() vì lệnh gọi này phải được gọi trong một cử chỉ của người dùng.

Nguồn thông tin khác

Hãy xem Biểu ngữ cài đặt ứng dụng để biết thêm thông tin, bao gồm:

• Thông tin chi tiết về sự kiện beforeinstallprompt
• Theo dõi phản hồi của người dùng với lời nhắc thêm vào màn hình chính
• Theo dõi xem ứng dụng đã được cài đặt hay chưa
• Xác định xem ứng dụng của bạn có đang chạy dưới dạng ứng dụng đã cài đặt hay không