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

Pete LePage

Xuất bản: Ngày 14 tháng 2 năm 2020

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

Khi cân nhắc việc có nên quảng bá lượt cài đặt hay không, hãy xem xét 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ự tiện lợi khi khởi chạy ứng dụng từ màn hình chính của điện thoại hoặc từ trình đơn Start trong hệ điều hành máy tính. Một số ứng dụng giải trí và năng suất cũng được hưởng lợi từ không gian màn hình bổ sung do việc xoá thanh công cụ trình duyệt khỏi cửa sổ ở chế độ standalone, minimal-ui hoặc window-control-overlay đã 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ó một tệp kê khai ứng dụng web.

Thúc đẩy lượt cài đặt

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

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

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í bắt buộc về việc cài đặt, 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.`);
});

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

Để cung cấp hoạt động 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 hoặc nhấn vào thành phần này, hãy gọi prompt() trên sự kiện beforeinstallprompt đã lưu (được lưu trữ trong biến deferredPrompt). Thao tác này sẽ cho người dùng thấy một hộp thoại cài đặt phương thức, 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 được giải quyết theo lựa chọn của người dùng. Bạn chỉ có thể gọi prompt() một lần cho sự kiện bị hoãn. Nếu người dùng đóng thông báo này, bạn sẽ cần đợi cho đến khi sự kiện beforeinstallprompt kích hoạt lại, thường là ngay sau khi thuộc tính userChoice đã phân giải.

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

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ừ trong giao diện người dùng hay không. Nhưng 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 trình duyệt khác, thì 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ể cơ chế nào được dùng để 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 PWA được khởi chạy

Truy vấn nội dung nghe nhìn display-mode của CSS cho biết cách PWA được khởi chạy, trong 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 kiểu khác nhau tuỳ thuộc vào cách ứng dụng được khởi chạy. 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 PWA được khởi chạy

Để 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 nội dung nghe nhìn display-mode.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

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

Để theo dõi xem người dùng có thay đổi giữa browser và các chế độ hiển thị khác 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.

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

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ột 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 biểu tượng và tên ứng dụng

Trường hợp 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 bài viết Cách Chrome xử lý các nội dung cập nhật đối với tệp kê khai ứng dụng web để biết thời điểm và cách những thay đổi đó được phản ánh trong Chrome.