Cách cung cấp trải nghiệm cài đặt trong ứng dụng của riêng bạn

Pete LePage

Nhiều trình duyệt cho phép bạn bật và quảng bá cài đặt của Ứng dụng web tiến bộ (PWA) ngay trong giao diện người dùng của ứng dụng đó. Cài đặt (đôi khi trước đây được gọi là Thêm vào Màn hình chính) cho phép người dùng cài đặt PWA của bạn trên thiết bị di động hoặc máy tính của họ. Khi bạn cài đặt một ứng dụng web tiến bộ (PWA), PWA sẽ được thêm vào trình chạy để nó có thể chạy như bất kỳ ứng dụng đã cài đặt nào khác.

Ngoài trải nghiệm cài đặt do trình duyệt cung cấp, bạn có thể cung cấp quy trình cài đặt tuỳ chỉnh của riêng mình ngay trong ứng dụng.

"Cài đặt ứng dụng" nút có trong PWA Spotify.

Khi cân nhắc có nên đẩy mạnh việc cài đặt hay không, hãy cân nhắc cách người dùng thường thấy dùng PWA của bạn. Ví dụ: nếu có một nhóm người dùng sử dụng nhiều PWA của bạn mỗi tuần, những người dùng này có thể hưởng lợi nhờ việc chạy ứng dụng của bạn từ màn hình chính của điện thoại hoặc từ trình đơn Start (Bắt đầu) trên máy tính hệ điều hành. Một số ứng dụng giải trí và cải thiện hiệu suất cũng được hưởng lợi từ không gian màn hình bổ sung được tạo ra bằng cách xoá thanh công cụ của trình duyệt khỏi cửa sổ ở chế độ standalone hoặc minimal-ui đã cài đặt.

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo PWA của bạn đáp ứng yêu cầu về khả năng cài đặt, thường là bao gồm cả việc có tệp kê khai ứng dụng web.

Quảng bá việc cài đặt

Để cho thấy rằng ứng dụng web tiến bộ của bạn có thể cài đặt được và để cung cấp ứng dụng quy trình cài đặt trong ứng dụng:

1. Theo dõi sự kiện beforeinstallprompt.
2. Lưu sự kiện beforeinstallprompt để có thể kích hoạt quy trình cài đặt sau.
3. Thông báo cho người dùng rằng ứng dụng web tiến bộ (PWA) của bạn có thể cài đặt và cung cấp một nút hoặc để bắt đầu quy trình cài đặt trong ứng dụng.

Lưu ý: Sự kiện beforeinstallprompt và appinstalled đã được đã chuyển từ thông số tệp kê khai ứng dụng web sang thông số của tệp lồng ươm. Nhóm Chrome vẫn cam kết ủng hộ những video đó và không có kế hoạch loại bỏ hay ngừng sử dụng của Google. Nhóm Web DevRel của Google tiếp tục đề xuất sử dụng chúng để cung cấp trải nghiệm cài đặt tuỳ chỉnh.

Theo dõi sự kiện beforeinstallprompt

Nếu Progressive Web App của bạn đáp ứng tiêu chí cài đặt bắt buộc, trình duyệt sẽ kích hoạt sự kiện beforeinstallprompt. 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 rằng người dùng có thể cài đặt PWA của bạn.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

Lưu ý: Bạn có nhiều hoa văn khác nhau có thể sử dụng để thông báo cho người dùng rằng ứng dụng của bạn có thể được cài đặt và cung cấp quy trình cài đặt. Chúng có thể bao gồm một nút trong tiêu đề, một mục trong trình đơn điều hướng hoặc một mục trong nguồn cấp nội dung của bạn.

Quy trình cài đặt trong ứng dụng

Để cung cấp chế độ cài đặt trong ứng dụng, hãy cung cấp một nút hoặc thành phần giao diện khác mà người dùng có thể nhấp hoặc nhấn để cài đặt ứng dụng của bạn. Khi người dùng nhấp vào phần tử này hoặc đã nhấn, hãy gọi prompt() trên sự kiện beforeinstallprompt đã lưu (được lưu trữ trong biến deferredPrompt). Hộp thoại này cho người dùng thấy hộp thoại cài đặt cửa sổ phụ, yêu cầu họ xác nhận rằng họ muốn cài đặt PWA của bạn.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

Thuộc tính userChoice là một lời hứa phân giải theo lựa chọn của người dùng. 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 thông báo này, bạn sẽ phải đợi đến khi sự kiện beforeinstallprompt diễn ra kích hoạt lại, thường là ngay sau thuộc tính userChoice đã được giải quyết.

Thực hành: Cho phép người dùng cài đặt một trang web bằng cách sử dụng sự kiện beforeinstallprompt.

Phát hiện thời điểm cài đặt thành công PWA

Bạn có thể sử dụng thuộc tính userChoice để xác định xem người dùng đã cài đặt hay chưa ứng dụng của bạn từ trong giao diện người dùng. Tuy nhiên, nếu người dùng cài đặt PWA của bạn từ thanh địa chỉ hoặc một thành phần khác của trình duyệt, userChoice sẽ không giúp ích. Thay vào đó, bạn nên theo dõi sự kiện appinstalled. Sự kiện này sẽ kích hoạt bất cứ khi nào PWA của bạn đã được cài đặt, bất kể dùng cơ chế nào để cài đặt.

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

Phát hiện cách khởi chạy PWA

Truy vấn nội dung nghe nhìn display-mode của CSS cho biết cách khởi chạy PWA, theo định dạng thẻ trình duyệt hoặc dưới dạng PWA đã cài đặt. Điều này giúp bạn có thể áp dụng các tuỳ thuộc vào cách khởi chạy ứng dụng. Ví dụ: bạn có thể định cấu hình để luôn ẩn nút cài đặt và cung cấp nút quay lại khi khởi chạy dưới dạng PWA đã cài đặt.

Theo dõi cách khởi chạy PWA

Để theo dõi cách người dùng chạy PWA của bạn, hãy sử dụng matchMedia() để kiểm thử display-mode truy vấn phương tiện. Safari trên iOS chưa hỗ trợ tính năng này, vì vậy bạn phải thay vào đó, hãy kiểm tra navigator.standalone. Phương thức này sẽ trả về một giá trị boolean cho biết liệu trình duyệt đang chạy ở chế độ độc lập.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

Theo dõi khi chế độ hiển thị thay đổi

Để theo dõi xem người dùng có thay đổi giữa standalone và browser tab hay không, hãy theo dõi các thay đổi đối với truy vấn phương tiện display-mode.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

Cập nhật giao diện người dùng dựa trên chế độ hiển thị hiện tại

Cách áp dụng màu nền khác cho PWA khi khởi chạy dưới dạng ứng dụng đã cài đặt PWA, sử dụng CSS có điều kiện:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Cập nhật tên và biểu tượng của ứng dụng

Nếu bạn cần cập nhật tên ứng dụng hoặc cung cấp biểu tượng mới thì sao? Hãy xem Cách Chrome xử lý các bản cập nhật đối với tệp kê khai ứng dụng web để xem thời điểm và cách những thay đổi đó được phản ánh trong Chrome.