Phát hiện

Bạn có thể phát hiện xem người dùng đang sử dụng PWA trong trình duyệt hay ở chế độ độc lập. Trên các trình duyệt dựa trên Chromium (Android và máy tính), bạn cũng có thể phát hiện các sự kiện sau:

  • Trạng thái và kết quả của hộp thoại lời mời cài đặt.
  • Đã cài đặt xong.
  • Chuyển thao tác điều hướng từ trình duyệt sang cửa sổ PWA và ngược lại.
  • Trạng thái cài đặt PWA.
  • Ứng dụng có liên quan được cài đặt từ một cửa hàng ứng dụng.

Bạn có thể sử dụng dữ liệu này cho mục đích phân tích, để hiểu rõ lựa chọn ưu tiên của người dùng và để tuỳ chỉnh trải nghiệm của họ. Để ghi lại các sự kiện này, bạn có thể sử dụng các công cụ như truy vấn nội dung nghe nhìn, sự kiện từ window hoặc sử dụng các API chức năng mà bạn có thể tìm thấy trong danh sách này.

Phát hiện chế độ hiển thị

Để theo dõi cách người dùng chạy PWA, bạn có thể 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)
    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';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

Nếu bạn sử dụng ví dụ này, hãy nhớ so khớp chế độ hiển thị trong tệp kê khai ứng dụng web, ví dụ: standalone, minimal-ui hoặc fullscreen. Bạn cũng có thể so khớp nhiều cụm từ tìm kiếm trong chuỗi truy vấn nội dung nghe nhìn bằng cách sử dụng các điều kiện được phân tách bằng dấu phẩy.

Bạn cũng có thể thêm một thông số truy vấn vào start_url của tệp kê khai mà bạn có thể thu thập bằng số liệu phân tích để theo dõi số liệu thống kê về thời điểm, cách thức và mức độ sử dụng PWA.

Lượt cài đặt ứng dụng

Khi người dùng chấp nhận lời nhắc cài đặt trong trình duyệt, sự kiện appinstalled sẽ kích hoạt trên các trình duyệt dựa trên Chromium. Một cách sử dụng hiệu quả của trình xử lý sự kiện này là xoá mọi chương trình khuyến mãi cài đặt trong ứng dụng mà bạn đã thêm.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

Xin lưu ý rằng trên các thiết bị Android có WebAPK, sự kiện này sẽ được kích hoạt khi người dùng chấp nhận hộp thoại, chứ không phải sau khi tạo và cài đặt WebAPK. Có thể mất vài giây thì ứng dụng mới cài đặt xong.

Chương Lời nhắc cài đặt giải thích cách phát hiện xem có lời nhắc cài đặt hay không và người dùng chọn lựa chọn nào.

Chuyển phiên

Người dùng có thể sử dụng PWA của bạn trong trình duyệt và ở dạng ứng dụng độc lập đã cài đặt. Trên trình duyệt dành cho máy tính, bạn có thể chuyển thao tác điều hướng hiện tại giữa các ngữ cảnh này bằng huy hiệu hoặc mục trong trình đơn, như trong hình sau.