Phát hiện

Bạn có thể phát hiện xem người dùng đang sử dụng PWA của bạn 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 thành phần đ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ể dùng dữ liệu này để phân tích, tìm hiểu sở thích của người dùng và tuỳ chỉnh trải nghiệm của họ. Để ghi lại những 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ể 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 của bạn, bạn có thể sử dụng matchMedia() để kiểm thử truy vấn nội dung nghe nhìn display-mode.

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

Nếu bạn sử dụng ví dụ này, hãy nhớ khớp chế độ hiển thị trong tệp kê khai ứng dụng web, chẳng hạn như standalone, minimal-ui hoặc fullscreen. Bạn cũng có thể so khớp nhiều truy vấn trong chuỗi truy vấn phương tiệ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 tham số truy vấn vào start_url của tệp kê khai. Bạn có thể thu thập tham số này 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 độ mà PWA đang được sử dụng.

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 tuyệt vời cho 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');
});

Hãy nhớ rằng trên các thiết bị Android có WebAPK, sự kiện đượ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 WebAPK được tạo và cài đặt. Ứng dụng có thể bị chậm trễ vài giây trước khi được cài đặt hoàn toàn.

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à lựa chọn của người dùng.

Chuyển phiên

Người dùng có thể sử dụng PWA của bạn trong trình duyệt và trong biểu mẫu độ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 hiện tại giữa các bối cảnh này bằng huy hiệu hoặc mục trong trình đơn, như trong hình sau.

Trên Android, có một mục trong trình đơn tương tự như mục trên máy tính trong trình duyệt chuyển thao tác sang ứng dụng. Trong trường hợp này, URL hiện tại sẽ mở nhưng sẽ là một thành phần điều hướng trang mới trong ứng dụng.

Trong hình sau, bạn có thể thấy mục trong trình đơn trong Android khi ứng dụng đã được cài đặt.

Chuyển sau khi cài đặt

Trong trình duyệt dành cho máy tính, thao tác điều hướng hiện tại sẽ được chuyển ngay sang ứng dụng khi cài đặt. Thẻ của trình duyệt đóng và ứng dụng mới cài đặt được mở ra, tiếp tục những gì người dùng đang làm.

Trên trình duyệt dành cho thiết bị di động, thao tác hiện tại của bạn vẫn ở trong trình duyệt khi bạn cài đặt ứng dụng. Nếu muốn chuyển sang ứng dụng đó, người dùng cần mở ứng dụng theo cách thủ công và đó sẽ là một thao tác mới.

Phát hiện quá trình chuyển

Để phát hiện hoạt động chuyển giữa trình duyệt và cửa sổ, bạn có thể sử dụng truy vấn phương tiện:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  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);
    });
});

Tách biệt bộ nhớ iOS và iPadOS

Trên iOS và iPadOS, sẽ không có thao tác điều hướng hay chuyển URL nào giữa trình duyệt và biểu tượng đã cài đặt. Ngay cả khi là cùng một PWA, mọi biểu tượng PWA mà người dùng cài đặt sẽ có bộ nhớ riêng, tách biệt với thẻ của Safari và các biểu tượng khác. Khi người dùng mở biểu tượng đã cài đặt, bộ nhớ sẽ không được chia sẻ với Safari. Nếu PWA của bạn cần đăng nhập, người dùng sẽ phải đăng nhập lại. Nếu ứng dụng đã được thêm vào màn hình chính nhiều lần, thì đối với mỗi phiên bản PWA, người dùng sẽ có một phiên khác nhau.

Ứng dụng liên quan

Một trang web cho biết mối quan hệ với ứng dụng thông qua tệp kê khai. Để thực hiện việc này, hãy sử dụng thành viên related_applications của thông số kỹ thuật của Tệp kê khai ứng dụng web. Khoá related_applications là một mảng các đối tượng đại diện cho từng ứng dụng có liên quan. Mỗi mục nhập đều chứa platform, url và một id không bắt buộc.

Sau đây là những giá trị có thể có cho nền tảng:

• chrome_web_store: Cửa hàng Google Chrome trực tuyến.
• play: Các ứng dụng trên Google Play (Android và ChromeOS).
• chromeos_play: ChromeOS Play.
• webapp: Ứng dụng web.
• windows: Microsoft Store (Windows 10 và 11).
• f-droid: F-droid.
• amazon: Amazon AppStore (FireOS).

Ưu tiên một ứng dụng có liên quan

Khi người dùng cài đặt một ứng dụng, bạn có thể chuyển hướng người dùng đến một ứng dụng có liên quan nếu bạn đặt trường prefer_related_applications thành true trong tệp kê khai. Với chế độ thiết lập này, trên các trình duyệt tương thích, quy trình cài đặt sẽ không cài đặt PWA; thay vào đó, chúng sẽ kích hoạt lượt cài đặt cửa hàng từ url hoặc id mà bạn đã chỉ định trong mục nhập related_applications.

Ứng dụng có liên quan có thể là PWA của bạn và sẽ được cài đặt thông qua một cửa hàng ứng dụng. Một ưu điểm của cấu hình này là hiện tại, chỉ những ứng dụng được cài đặt thông qua cửa hàng ứng dụng mới được khôi phục bằng bản sao lưu hoặc khi bạn chuyển sang thiết bị mới.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Biểu ngữ ứng dụng thông minh của Apple

Safari không hỗ trợ thành viên related_applications, nhưng cung cấp Biểu ngữ ứng dụng thông minh cho các ứng dụng trong App Store. Vì vậy, nếu muốn quảng bá PWA hoặc ứng dụng khác mà bạn đã xuất bản trong App Store, bạn có thể đưa thẻ meta vào HTML của PWA để mời người dùng cài đặt ứng dụng (xem đường liên kết vừa được cung cấp) hoặc chuyển phần điều hướng nếu ứng dụng đó đã được cài đặt.

Phát hiện các ứng dụng đã cài đặt có liên quan

Phương thức getInstalledRelatedApps() cho phép trang web của bạn kiểm tra xem ứng dụng iOS/Android/máy tính hoặc PWA của bạn có được cài đặt trên thiết bị của người dùng hay không.

Việc kiểm tra xem ứng dụng liên quan đã được cài đặt hay chưa giúp bạn triển khai các tính năng như ẩn lời nhắc được cài đặt tuỳ chỉnh hoặc chuyển hướng người dùng trực tiếp đến ứng dụng đã cài đặt, thay vì truy cập vào một trang web chung. Để sử dụng phương thức getInstalledRelatedApps(), cả ứng dụng đã cài đặt và trang web đều phải định cấu hình kết nối với nhau. Mỗi ứng dụng (tuỳ thuộc vào nền tảng của ứng dụng đó) có chứa siêu dữ liệu để nhận dạng trang web và trang web chứa ứng dụng cần cài đặt trong trường related_applications của tệp kê khai.

Các công cụ như BubbleWrap hoặc Trình tạo PWA (cho phép bạn xuất bản PWA lên các cửa hàng ứng dụng) đã thêm siêu dữ liệu bắt buộc để trang web của bạn có thể sử dụng getInstalledRelatedApps() ngay lập tức. Để phát hiện xem PWA đã được cài đặt bằng getInstalledRelatedApps() hay chưa, hãy xác định webapp trong trường tệp kê khai related_applications bằng URL dẫn đến tệp kê khai của bạn:

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() trả về một mảng đối tượng ứng dụng. Nếu mảng trống thì ứng dụng liên quan chưa được cài đặt.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

Phát hiện lượt cài đặt từ bên ngoài phạm vi của PWA

Trên Chrome trên Android 89, bạn có thể phát hiện xem một ứng dụng web tiến bộ (PWA) đã được cài đặt hay chưa, ngay cả từ bên ngoài phạm vi của PWA. PWA của bạn phải đặt một tệp JSON trong thư mục /.well-known/ để cấp quyền cho phạm vi khác, như mô tả trong bài viết này.

Tài nguyên

• Ứng dụng của bạn đã được cài đặt chưa? getInstallRelatedApps() sẽ cho bạn biết!
• MDN: Ứng dụng liên quan
• MDN: Sự kiện cài đặt ứng dụng
• Apple: Quảng bá ứng dụng bằng Biểu ngữ ứng dụng thông minh