Thông báo cài đặt

Người dùng có thể chưa quen với quy trình cài đặt PWA. Là nhà phát triển, bạn sẽ hiểu được thời điểm thích hợp để mời người dùng cài đặt ứng dụng. Bạn cũng có thể cải thiện lời nhắc cài đặt trình duyệt mặc định. Hãy cùng khám phá những công cụ có sẵn.

Cải tiến hộp thoại cài đặt

Các trình duyệt sẽ đưa ra lời nhắc cài đặt mặc định khi PWA đáp ứng các tiêu chí cài đặt. Trình duyệt sử dụng các thuộc tính name và icons trong Tệp kê khai ứng dụng web của bạn để tạo lời nhắc.

Thông báo cài đặt Microsoft Edge.

Một số trình duyệt giúp cải thiện trải nghiệm cài đặt lời nhắc bằng cách sử dụng các trường quảng cáo trong tệp kê khai, trong đó có description, categories và screenshots. Ví dụ: khi dùng Chrome trên Android, nếu PWA của bạn cung cấp các giá trị cho các trường description và screenshots, thì hộp thoại cài đặt sẽ chuyển đổi từ thanh thông tin Thêm vào màn hình chính nhỏ thành một hộp thoại lớn hơn và chi tiết hơn, tương tự như lời nhắc cài đặt trong cửa hàng ứng dụng.

Xem các trường quảng cáo trong thực tế:

Sự kiện beforeinstallprompt

Lời nhắc cài đặt của trình duyệt là bước đầu tiên để khuyến khích người dùng cài đặt PWA của bạn. Để triển khai trải nghiệm cài đặt của riêng bạn, ứng dụng vẫn cần đáp ứng tiêu chí cài đặt: khi trình duyệt phát hiện thấy ứng dụng có thể cài đặt, trình duyệt sẽ kích hoạt sự kiện beforeinstallprompt. Bạn cần triển khai trình xử lý sự kiện này để tuỳ chỉnh trải nghiệm của người dùng. Cách làm như sau:

  1. Theo dõi sự kiện beforeinstallprompt.
  2. Hãy lưu (bạn sẽ sử dụng sau này).
  3. Kích hoạt việc này từ giao diện người dùng của bạn.

Hãy xem mã bên dưới để biết ví dụ về trình nghe sự kiện cho sự kiện beforeinstallprompt, việc thu thập và sử dụng tuỳ chỉnh sự kiện sau đó.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Sau đó, nếu người dùng nhấp vào nút cài đặt tuỳ chỉnh của bạn, hãy sử dụng deferredPrompt đã lưu trước đó và gọi phương thức prompt(), vì người dùng vẫn cần trải qua quy trình của trình duyệt để cài đặt ứng dụng. Việc bạn đã làm là trì hoãn sự kiện cho đến khi bạn cung cấp cho người dùng bối cảnh phù hợp nhằm khuyến khích họ cài đặt PWA.

Việc ghi lại sự kiện giúp bạn có cơ hội thêm gợi ý và chương trình khuyến khích để người dùng cài đặt ứng dụng của bạn, cũng như chọn nhắc cài đặt khi bạn biết rằng người dùng tương tác nhiều hơn.

Sự kiện sẽ không kích hoạt nếu:

  • Người dùng đã cài đặt PWA hiện tại (chỉ hợp lệ cho máy tính và WebAPK trên Android).
  • Ứng dụng không đáp ứng được tiêu chí cài đặt PWA.
  • Không thể cài đặt PWA trên thiết bị hiện tại vì các lý do khác (ví dụ: thiết bị ở chế độ kiosk hoặc không có quyền).

Vị trí tốt nhất để đưa ra lời nhắc

Vị trí cần nhắc tuỳ thuộc vào ứng dụng của bạn và thời điểm người dùng tương tác nhiều nhất với nội dung và dịch vụ của bạn. Khi chụp beforeinstallprompt, bạn có thể hướng dẫn người dùng về những lý do nên tiếp tục sử dụng ứng dụng cũng như những lợi ích mà họ sẽ nhận được khi cài đặt ứng dụng. Bạn có thể chọn hiển thị gợi ý cài đặt ở mọi nơi trong ứng dụng. Một số hình thức phổ biến là: trong trình đơn bên, sau một hành trình trọng yếu của người dùng (chẳng hạn như hoàn tất đơn đặt hàng hoặc sau một trang đăng ký). Bạn có thể đọc thêm về điều này trong bài viết Mẫu quảng cáo việc cài đặt PWA.

Thu thập số liệu phân tích

Khi sử dụng số liệu phân tích, bạn sẽ hiểu rõ hơn về vị trí và thời điểm cần đưa ra câu lệnh. Bạn có thể sử dụng thuộc tính userChoice từ sự kiện beforeinstallprompt; userChoice là một lời hứa sẽ giải quyết hành động mà người dùng đã thực hiện.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Xem ví dụ thực tiễn

Hãy thử ví dụ thực tế sau đây trên trình duyệt Chromium (máy tính hoặc Android).

Dự phòng

Nếu trình duyệt không hỗ trợ beforeinstallprompt hoặc sự kiện không kích hoạt, thì không có cách nào khác để kích hoạt lời nhắc cài đặt của trình duyệt. Tuy nhiên, trên những nền tảng cho phép người dùng cài đặt PWA theo cách thủ công, chẳng hạn như iOS, bạn có thể cho người dùng thấy những hướng dẫn này.

Bạn chỉ nên hiển thị những hướng dẫn này ở chế độ trình duyệt. Các tuỳ chọn hiển thị khác, chẳng hạn như standalone hoặc fullscreen có nghĩa là người dùng đã cài đặt ứng dụng.

Để chỉ hiển thị phần tử ở chế độ trình duyệt, hãy sử dụng truy vấn phương tiện display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Lớp học lập trình

Thư viện

Hãy xem các thư viện sau đây để được trợ giúp về cách hiển thị lời nhắc cài đặt tuỳ chỉnh:

Tài nguyên