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

Lời nhắc cài đặt ứng dụng gốc giúp bạn 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 cần rời khỏi trình duyệt cũng như không hiện 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 đều không đượ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 thanh này để nhắc người dùng cài đặt ứng dụng gốc.

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

Để nhắc người dùng cài đặt ứng dụng gốc, bạn cần thêm hai thuộc tính vào tệp kê khai ứng dụng web, 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 trong 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 phải:

  1. Theo dõi sự kiện beforeinstallprompt.
  2. Thông báo cho người dùng rằng họ có thể cài đặt ứng dụng gốc của bạn bằng một nút hoặc thành phần 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.

Theo dõi beforeinstallprompt

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

Khi sự kiện beforeinstallprompt được kích hoạt, hãy lưu tệp 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 về việc có thể cài đặt ứng dụng của bạn là 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 phiền toái 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 từ trong 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.

Sau đó, hãy theo dõi lời hứa do thuộc tính userChoice trả về. Lời hứa 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() trên sự kiện bị trì hoãn một lần. Nếu người dùng đóng cửa sổ này, bạn sẽ cần đợi cho đến khi sự kiện beforeinstallprompt kích hoạt trên thao tác điều hướng trang tiếp theo.

Những điều cần cân nhắc đặc biệt 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ể dài dòng 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 một thiết bị Android để xác định URL của biểu tượng ứng dụng.