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 nhanh chóng và cài đặt liền mạch ứng dụng gốc của bạn trên thiết bị của họ ngay trong cửa hàng ứng dụng, mà không cần rời khỏi trình duyệt và 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 đều không được cài đặt trên thiết bị.
  • Bao gồm Tệp kê khai ứng dụng web, trong đó có:
  • Đượ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 nó để nhắc người dùng cài đặt ứng dụng gốc của bạn.

Cá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 với ứng dụng gốc của bạn 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 có danh sách các đối tượng cho biết về ứng dụng gốc ưa thích của bạ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 sự kiện cử chỉ của người dùng.
  3. Hiện lời nhắc bằng cách gọi prompt() trên beforeinstallprompt đã lưu sự kiện.

Nghe beforeinstallprompt

Nếu đáp ứng tiêu chí, Chrome sẽ kích hoạt beforeinstallprompt sự kiện. Bạn có thể sử dụng tệp 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 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 rằng họ 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 của bạn. Đừ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 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ị 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ề. Chiến lược phát hành đĩa đơn Promise trả về một đối tượng có thuộc tính outcome sau lời nhắc hiển thị và người dùng đã phản hồi.

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 nó, bạn sẽ phải đợi cho đến khi sự kiện beforeinstallprompt kích hoạt trên điều hướng trang tiếp theo.

Những đ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ể dài dòng hơn mong muốn. Bây giờ có thể thu hẹp phạm vi này bằng cách gỡ lỗi từ xa thiết bị Android để xác định URL của biểu tượng ứng dụng.