Lời nhắc cài đặt ứng dụng gốc

Lời nhắc cài đặt ứng dụng gốc mang lại cho bạn khả năng cho phép người dùng cài đặt ứng dụng gốc một cách nhanh chóng và liền mạch trên thiết bị của họ ngay từ cửa hàng ứng dụng mà không phải rời khỏi trình duyệt cũng như không hiển thị quảng cáo xen kẽ gây khó chịu.

Có những tiêu chí nào?

Để hiển thị lời nhắc cài đặt ứng dụng gốc cho người dùng, trang web của bạn phải đáp ứng các tiêu chí sau:

  • Cả ứng dụng web và ứng dụng gốc hiện đã được cài đặt trên thiết bị.
  • Bao gồm một Tệp kê khai ứng dụng web bao gồm:
  • Được phân phát qua HTTPS

Sự kiện beforeinstallprompt sẽ kích hoạt khi bạn đáp ứng các tiêu chí này. Bạn có thể sử dụng lệnh này để nhắc người dùng cài đặt ứng dụng gốc.

Thuộc tính bắt buộc trong tệp kê khai

Để nhắc người dùng cài đặt ứng dụng gốc, bạn cần thêm 2 thuộc tính vào tệp kê khai ứng dụng web là prefer_related_applications và related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

Thuộc tính prefer_related_applications yêu cầu trình duyệt nhắc người dùng bằng ứng dụng gốc thay vì ứng dụng web. Nếu bạn không đặt giá trị này hoặc false, trình duyệt sẽ nhắc người dùng cài đặt ứng dụng web.

related_applications là một mảng chứa danh sách các đối tượng cho trình duyệt biết về ứng dụng gốc mà bạn ưu tiên. Mỗi đối tượng phải bao gồm một thuộc tính platform và một thuộc tính id. Trong đó platform là play và id là mã ứng dụng của bạn trên Cửa hàng Play.

Hiển thị lời nhắc cài đặt

Để hiển thị hộp thoại cài đặt, bạn cần:

  1. Theo dõi sự kiện beforeinstallprompt.
  2. Thông báo cho người dùng rằng ứng dụng gốc của bạn có thể được cài đặt bằng một nút hoặc phần tử khác sẽ tạo ra một sự kiện cử chỉ của người dùng.
  3. Hiển thị lời nhắc bằng cách gọi prompt() trên sự kiện beforeinstallprompt đã lưu.

Nghe beforeinstallprompt

Nếu đáp ứng các tiêu chí, Chrome sẽ kích hoạt sự kiện beforeinstallprompt. Bạn có thể sử dụng thuộc tính này để cho biết ứng dụng của bạn có thể được cài đặt, sau đó nhắc người dùng cài đặt.

Khi sự kiện beforeinstallprompt kích hoạt, hãy lưu thông tin tham chiếu đến sự kiện đó và cập nhật giao diện người dùng để cho biết người dùng có thể cài đặt ứng dụng của bạn.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Thông báo cho người dùng rằng họ có thể cài đặt ứng dụng của bạn

Cách tốt nhất để thông báo cho người dùng là ứng dụng của bạn có thể được cài đặt bằng cách thêm một nút hoặc phần tử khác vào giao diện người dùng. Đừng hiển thị quảng cáo xen kẽ toàn trang hoặc các thành phần khác có thể gây khó chịu hoặc mất tập trung.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Hiển thị lời nhắc

Để hiển thị lời nhắc cài đặt, hãy gọi prompt() trên sự kiện đã lưu ngay trong một cử chỉ của người dùng. Thao tác này sẽ hiển thị một hộp thoại phương thức, yêu cầu 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 được thuộc tính userChoice trả về. Lời nhắc này sẽ trả về một đối tượng có thuộc tính outcome sau khi lời nhắc xuất hiện và người dùng đã phản hồi lời nhắc đó.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Bạn chỉ có thể gọi prompt() một lần trên sự kiện bị trì hoãn. Nếu người dùng đóng, bạn sẽ cần đợi cho đến khi sự kiện beforeinstallprompt kích hoạt trong lần điều hướng trang tiếp theo.

Các điểm cần đặc biệt lưu ý khi sử dụng chính sách bảo mật nội dung

Nếu trang web của bạn có Chính sách bảo mật nội dung hạn chế, hãy nhớ thêm *.googleusercontent.com vào lệnh img-src để Chrome có thể tải biểu tượng liên kết với ứng dụng của bạn xuống từ Cửa hàng Play.

Trong một số trường hợp, *.googleusercontent.com có thể chi tiết hơn mong muốn. Bạn có thể thu hẹp phạm vi này bằng cách gỡ lỗi từ xa trên thiết bị Android để xác định URL của biểu tượng ứng dụng.