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

Người dùng có thể không quen với quy trình cài đặt PWA. Là nhà phát triển, bạn sẽ biết 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 xem các công cụ có sẵn.

Cải thiệ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 để tạo lời nhắc.

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

Một số trình duyệt cải thiện trải nghiệm về lời nhắc cài đặt bằng cách sử dụng các trường quảng bá trong tệp kê khai, bao gồm description, categories và screenshots. Ví dụ: khi bạn dùng Chrome trên Android, nếu PWA cung cấp các giá trị cho trường description và screenshots, thì hộp thoại cài đặt sẽ chuyển từ một thanh thông tin nhỏ Thêm vào màn hình chí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 của một cửa hàng ứng dụng.

Sự kiện beforeinstallprompt

Lời nhắc cài đặt của trình duyệt là bước đầu tiên để 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 của bạn vẫn cần phải đáp ứng các tiêu chí cài đặt: khi trình duyệt phát hiện thấy ứng dụng của bạn 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. Lưu lại (bạn sẽ cần đến nó sau này).
  3. Kích hoạt tính năng này từ giao diện người dùng.

Hãy xem đoạn mã bên dưới để biết ví dụ về trình nghe sự kiện cho sự kiện beforeinstallprompt, hoạt động ghi lại và việc sử dụng tuỳ chỉnh sau này.

// 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 đã được lưu trước đó và gọi phương thức prompt() của nút đó, vì người dùng vẫn cần thực hiện quy trình của trình duyệt để cài đặt ứng dụng của bạn. Những gì bạn đã làm là trì hoãn sự kiện cho đến khi bạn cung cấp cho người dùng ngữ cảnh phù hợp để khuyến khích họ cài đặt PWA.

Việc ghi lại sự kiện này giúp bạn có cơ hội thêm gợi ý và ưu đãi để người dùng cài đặt ứng dụng của bạn, đồng thời chọn nhắc cài đặt khi bạn biết người dùng có 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ỉ có hiệu lực đối với máy tính và WebAPK trên Android).
  • Ứng dụng không đáp ứng tiêu chí cài đặt PWA.
  • PWA không cài đặt được trên thiết bị hiện tại vì những lý do khác (ví dụ: thiết bị ở chế độ kiosk hoặc không có quyền).

Nơi tốt nhất để đưa ra câu lệnh

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

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

Việc sử dụng số liệu phân tích sẽ giúp bạn hiểu rõ hơn về thời điểm và vị trí thích hợp để trình bày lời nhắc. Bạn có thể sử dụng thuộc tính userChoice từ sự kiện beforeinstallprompt; userChoice là một promise sẽ phân giải bằng 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');
  }
});

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 các hướng dẫn này.

Bạn chỉ nên hiển thị các hướng dẫn này ở chế độ trình duyệt; các lựa 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ỉ kết xuất phần tử ở chế độ trình duyệt, hãy sử dụng truy vấn nội dung nghe nhì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 này để được trợ giúp về việc hiển thị lời nhắc cài đặt tuỳ chỉnh:

Tài nguyên