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á việc cài đặt Ứng dụng web tiến bộ (PWA) ngay trong giao diện người dùng của PWA. Việc cài đặt (trước đây gọi là Thêm vào màn hình chính) giúp người dùng dễ dàng cài đặt PWA của bạn trên thiết bị di động hoặc máy tính. Việc cài đặt PWA sẽ thêm PWA vào trình chạy của người dùng, cho phép ứng dụng này chạy như mọi ứng dụng đã cài đặt 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.

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

Khi cân nhắc xem có nên quảng bá lượt cài đặt hay không, tốt nhất bạn nên nghĩ đến cách người dùng thường sử dụng PWA của bạn. Ví dụ: nếu có một nhóm người dùng sử dụng PWA của bạn nhiều lần trong một tuần, thì những người dùng này có thể hưởng lợi từ sự thuận tiện hơn khi khởi 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 Bắt đầu trong hệ điều hành của máy tính. Một số ứng dụng giải trí và cải thiện hiệu suất cũng hưởng lợi từ không gian màn hình bổ sung được tạo bằng cách xoá thanh công cụ của trình duyệt khỏi cửa sổ ở các 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 các yêu cầu về khả năng cài đặt, thường bao gồm việc có tệp kê khai ứng dụng web.

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

Cách cho biết Ứng dụng web tiến bộ của bạn có thể cài đặt được và để cung cấp quy trình cài đặt trong ứng dụng tuỳ chỉnh:

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

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

Theo dõi sự kiện beforeinstallprompt

Nếu Ứng dụng web tiến bộ của bạn đáp ứng các tiêu chí cài đặt bắt buộc, thì trình duyệt sẽ kích hoạt sự kiện beforeinstallprompt. Lưu thông tin 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ó thể sử dụng nhiều mẫu để 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 một quy trình cài đặt trong ứng dụng, chẳng hạn như một nút ở 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 phần tử giao diện khác mà người dùng có thể nhấp để cài đặt ứng dụng. Khi người dùng nhấp vào phần tử này, hãy gọi prompt() trên sự kiện beforeinstallprompt đã lưu (được lưu trữ trong biến deferredPrompt). Khi đó, người dùng sẽ thấy hộp thoại cài đặt theo phương thức, yêu cầu họ xác nhận 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 đi kèm với 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, bạn sẽ cần đợi cho đến khi sự kiện beforeinstallprompt được kích hoạt lại, thường là ngay sau khi thuộc tính userChoice đã giải quyết xong.

Thử cách này: Tạo một trang web có thể cài đặt bằ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ó cài đặt ứng dụng của bạn từ bên trong giao diện người dùng hay không. Tuy nhiên, nếu người dùng cài đặt PWA của bạn từ thanh địa chỉ hoặc thành phần khác của trình duyệt, thì userChoice sẽ không giúp ích. Thay vào đó, bạn nên theo dõi sự kiện appinstalled. Tệp này được kích hoạt bất cứ khi nào PWA của bạn được cài đặt, bất kể cơ chế nào được dùng để cài đặt PWA của bạn.

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 thức PWA được chạy

Truy vấn nội dung nghe nhìn display-mode của CSS cho biết cách PWA được chạy, trong thẻ trình duyệt hoặc dưới dạng PWA đã cài đặt. Nhờ vậy, bạn có thể áp dụng nhiều kiểu tuỳ thuộc vào cách khởi chạy ứng dụng. Ví dụ: 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 một PWA đã cài đặt.

Theo dõi cách thức 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ử truy vấn phương tiện display-mode. Safari trên iOS chưa hỗ trợ tính năng này. Vì vậy, bạn phải kiểm tra navigator.standalone, trình duyệt sẽ trả về một giá trị boolean cho biết trình duyệt có đang chạy ở chế độ độc lập hay không.

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 thời điểm chế độ hiển thị thay đổi

Để theo dõi xem người dùng có thay đổi trong khoảng thời gian từ standalone đến browser tab hay không, hãy theo dõi các thay đổi đối với truy vấn nội dung nghe nhì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

Để áp dụng màu nền khác cho PWA khi khởi chạy dưới dạng PWA đã cài đặt, hãy 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 phần Cách Chrome xử lý bản cập nhật cho tệp kê khai ứng dụng web để xem thời điểm và cách thức những thay đổi đó được phản ánh trong Chrome.