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ẽ 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 các 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

Trình duyệt đưa ra lời nhắc cài đặt mặc định khi PWA vượt qua 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.

Lời nhắc cài đặt Microsoft Edge.

Một số trình duyệt giúp cải thiện trải nghiệm nhắc cài đặt bằng cách sử dụng các trường khuyến mãi trong tệp kê khai, bao gồm description, categories và screenshots. Ví dụ: khi sử dụng Chrome trên Android, nếu PWA cung cấp giá trị cho các trường description và screenshots, thì trải nghiệm hộp thoại cài đặt sẽ chuyển 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 một 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 để thu hút 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í về lượt 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, nó 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ẽ dùng sau này).
  3. Hãy kích hoạt từ giao diện người dùng.

Hãy xem mã bên dưới để biết ví dụ về trình nghe sự kiện cho sự kiện beforeinstallprompt, hoạt động thu thập và 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, 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 thực hiện quy trình của trình duyệt để cài đặt ứng dụng của bạn. 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 để khuyến khích họ cài đặt PWA.

Khi nắm bắt được sự kiện này, bạn sẽ có cơ hội thêm các gợi ý và phần thưởng 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).

Nơi tốt nhất để nhắc

Vị trí hiển thị thông báo 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 nắm bắt beforeinstallprompt, bạn có thể hướng dẫn người dùng lý do tiếp tục dùng ứng dụng cũng như những lợi ích mà họ sẽ có được khi cài đặt ứng dụng. Bạn có thể chọn hiển thị gợi ý cài đặt ở bất cứ đâu trong ứng dụng của mình. Có một số mẫu phổ biến: 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 thành đơn đặt hàng hoặc sau khi hoàn tất trang đăng ký). Bạn có thể đọc thêm về nội dung này trong bài viết Mẫu quảng bá 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ẽ biết rõ hơn về vị trí và thời điểm cần trình bày câu lệnh. Bạn có thể sử dụng thuộc tính userChoice từ sự kiện beforeinstallprompt; userChoice là lời hứa sẽ giải quyết vấn đề theo 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ử mẫu sau đây trong thực tế 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 các 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 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 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 nà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