Ứng dụng của bạn có được cài đặt không? Installed Related Apps API sẽ cho bạn biết!

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Get Installed Related Apps API cho phép lấy danh sách các ứng dụng có liên quan đã cài đặt cùng với thông tin chi tiết về các ứng dụng đó.

API này cho phép bạn kiểm tra xem Ứng dụng web tiến bộ (PWA), ứng dụng Android hay ứng dụng Universal Windows Platform (UWP) có được cài đặt trên thiết bị hiện tại hay không, cả từ chính PWA và từ một trang web có liên quan (ví dụ: trang web tiếp thị sản phẩm).

Nếu ứng dụng đã được cài đặt, bạn có thể tuỳ chỉnh trải nghiệm người dùng.

Ví dụ:

  • Không thúc đẩy việc cài đặt PWA nếu ứng dụng khác của bạn đã được cài đặt.
  • Chuyển hướng người dùng từ một trang web tiếp thị sản phẩm trực tiếp vào ứng dụng của bạn.
  • Tập trung một số chức năng như thông báo trong ứng dụng còn lại để tránh thông báo trùng lặp.

Get Installed Related Apps API là gì?

Việc gọi phương thức navigator.getInstalledRelatedApps() không đồng bộ sẽ trả về một lời hứa được giải quyết bằng một mảng các đối tượng chứa thông tin chi tiết về những ứng dụng:

  • được cài đặt trên thiết bị hiện tại,
  • được xác định trong trường related_applications của tệp kê khai ứng dụng web,
  • có mối quan hệ đã xác minh với một trang nơi phương thức navigator.getInstalledRelatedApps() được gọi (xem các phần tiếp theo để biết thông tin chi tiết).
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Việc gọi console.log(installedRelatedApps) sẽ trả về nội dung như sau:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

Ví dụ: để kiểm tra xem có ứng dụng liên quan nào được cài đặt trên thiết bị của người dùng hay không, bạn có thể sử dụng đoạn mã sau:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

Nếu biết mã gói, bạn có thể dùng lệnh sau để lấy số phiên bản của ứng dụng Android liên quan đã cài đặt:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

Các loại ứng dụng được hỗ trợ mà bạn có thể kiểm tra

Loại ứng dụng Có thể kiểm tra từ
Ứng dụng Android Chỉ dành cho Android:
Chrome 80 trở lên
Ứng dụng Universal Windows Platform (UWP) Chỉ dành cho Windows:
Chrome 85 trở lên
Edge 85 trở lên
Ứng dụng web tiến bộ (PWA) được cài đặt trong cùng một phạm vi trên cùng một nguồn gốc Android:
Chrome 84 trở lên
Máy tính (Windows, macOS, Linux, ChromeOS):
Chrome 140 trở lên
Edge 140 trở lên
Ứng dụng web tiến bộ (PWA)
được cài đặt trong phạm vi khác nhau trên cùng một hoặc nguồn gốc khác nhau 		Chỉ dành cho Android:
Chrome phiên bản 84 trở lên

Kiểm tra xem ứng dụng Android của bạn đã được cài đặt hay chưa

Trang web của bạn có thể kiểm tra xem ứng dụng Android của bạn đã được cài đặt hay chưa.

Được hỗ trợ trên:

  • Chỉ dành cho Android: Chrome phiên bản 80 trở lên

Cho ứng dụng Android biết về trang web của bạn

Trước tiên, bạn cần cập nhật ứng dụng Android để xác định mối quan hệ giữa trang web và ứng dụng Android bằng hệ thống Digital Asset Links. Điều này xác minh rằng chỉ trang web của bạn mới có thể kiểm tra xem ứng dụng Android của bạn đã được cài đặt hay chưa.

Trong AndroidManifest.xml của ứng dụng Android, hãy thêm một mục asset_statements:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Sau đó, trong strings.xml, hãy thêm câu lệnh tài sản sau đây, cập nhật site bằng miền của bạn. Hãy nhớ thêm các ký tự thoát.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

Sau khi hoàn tất, hãy cài đặt ứng dụng đã cập nhật trên thiết bị hoặc xuất bản lên Cửa hàng Google Play hoặc bất kỳ nền tảng phân phối ứng dụng Android nào khác.

Thông báo cho trang web của bạn về ứng dụng Android

Tiếp theo, hãy cho trang web biết về ứng dụng Android của bạn bằng cách thêm tệp kê khai ứng dụng web vào trang. Tệp kê khai phải bao gồm thuộc tính related_applications, một mảng cung cấp thông tin chi tiết về ứng dụng của bạn, bao gồm platform và id.

  • platform phải là play
  • id là mã nhận dạng gói Android
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Kiểm tra xem ứng dụng của bạn đã được cài đặt hay chưa

Cuối cùng, hãy gọi hàm không đồng bộ navigator.getInstalledRelatedApps() để kiểm tra xem ứng dụng Android của bạn đã được cài đặt hay chưa.

Kiểm tra xem ứng dụng Windows (UWP) của bạn đã được cài đặt hay chưa

Trang web của bạn có thể kiểm tra xem ứng dụng Windows (được tạo bằng UWP) đã được cài đặt hay chưa.

Được hỗ trợ trên:

  • Chỉ dành cho Windows: Chrome 85 trở lên, Edge 85 trở lên

Cho ứng dụng Windows biết về trang web của bạn

Bạn cần cập nhật ứng dụng Windows để xác định mối quan hệ giữa trang web và ứng dụng Windows bằng cách sử dụng Trình xử lý URI. Điều này xác minh rằng chỉ trang web của bạn mới có thể kiểm tra xem ứng dụng Windows của bạn đã được cài đặt hay chưa.

Thêm chế độ đăng ký tiện ích Windows.appUriHandler vào tệp kê khai Package.appxmanifest của ứng dụng. Ví dụ: nếu địa chỉ trang web của bạn là example.com, bạn sẽ thêm mục sau vào tệp kê khai của ứng dụng:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

Xin lưu ý rằng bạn có thể cần thêm không gian tên uap3 vào thuộc tính <Package>.

Sau đó, hãy tạo một tệp JSON (không có đuôi tệp .json) có tên là windows-app-web-link và cung cấp tên họ gói của ứng dụng. Đặt tệp đó vào thư mục gốc của máy chủ hoặc thư mục /.well-known/. Bạn có thể tìm thấy tên họ gói trong phần Đóng gói trong trình thiết kế tệp kê khai ứng dụng.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

Hãy xem phần Bật ứng dụng cho trang web bằng trình xử lý URI ứng dụng để biết thông tin chi tiết đầy đủ về cách thiết lập trình xử lý URI.

Cho trang web biết về ứng dụng Windows của bạn

Tiếp theo, hãy cho trang web biết về ứng dụng Windows của bạn bằng cách thêm tệp kê khai ứng dụng web vào trang. Tệp kê khai phải bao gồm thuộc tính related_applications, một mảng cung cấp thông tin chi tiết về ứng dụng của bạn, bao gồm platform và id.

  • platform phải là windows
  • id là tên họ gói của ứng dụng, được thêm vào bằng giá trị <Application> Id trong tệp Package.appxmanifest.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Kiểm tra xem ứng dụng của bạn đã được cài đặt hay chưa

Cuối cùng, hãy gọi hàm không đồng bộ navigator.getInstalledRelatedApps() để kiểm tra xem ứng dụng Windows của bạn đã được cài đặt hay chưa.

Hãy xem bản minh hoạ này.

Kiểm tra xem Ứng dụng web tiến bộ của bạn đã được cài đặt (trong phạm vi) hay chưa

PWA của bạn có thể kiểm tra để xem ứng dụng này đã được cài đặt hay chưa. Trong trường hợp này, trang đưa ra yêu cầu phải thuộc cùng một miền và nằm trong phạm vi của PWA, như được xác định bằng phạm vi trong tệp kê khai ứng dụng web.

Được hỗ trợ trên:

  • Android: Chrome phiên bản 84 trở lên
  • Máy tính (Windows, macOS, Linux, ChromeOS): Chrome 140 trở lên, Edge 140 trở lên

Cho PWA biết về chính nó

Cho PWA biết về chính nó bằng cách thêm một mục related_applications vào tệp kê khai ứng dụng web của PWA.

  • platform phải là webapp
  • url là đường dẫn (có thể là đường dẫn tương đối) đến tệp kê khai ứng dụng web của PWA
  • id là mã ứng dụng web được khai báo trong trường id của tệp kê khai ứng dụng web hoặc do trình duyệt tính toán (bắt buộc đối với máy tính, không bắt buộc đối với Android)
{
  …
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  …
}

Kiểm tra xem PWA của bạn đã được cài đặt hay chưa

Cuối cùng, hãy gọi hàm không đồng bộ navigator.getInstalledRelatedApps() trong phạm vi của PWA để kiểm tra xem hàm này đã được cài đặt hay chưa. Nếu navigator.getInstalledRelatedApps() được gọi bên ngoài phạm vi của PWA, thì nó sẽ trả về []. Xem phần tiếp theo để biết chi tiết.

Kiểm tra xem Ứng dụng web tiến bộ của bạn đã được cài đặt hay chưa (ngoài phạm vi)

Trang web của bạn có thể kiểm tra xem PWA đã được cài đặt hay chưa, ngay cả khi trang đó nằm ngoài phạm vi của PWA. Ví dụ: một trang đích được phân phát từ /landing/ có thể kiểm tra xem PWA được phân phát từ /pwa/ đã được cài đặt hay chưa, hoặc nếu trang đích của bạn được phân phát từ www.example.com và PWA của bạn được phân phát từ app.example.com.

Được hỗ trợ trên:

  • Chỉ dành cho Android: Chrome phiên bản 84 trở lên

Cho PWA biết về trang web của bạn

Trước tiên, bạn cần thêm các đường liên kết đến tài sản kỹ thuật số vào máy chủ nơi PWA của bạn được phân phát. Điều này sẽ giúp xác định mối quan hệ giữa trang web và PWA của bạn, đồng thời xác minh rằng chỉ trang web của bạn mới có thể kiểm tra xem PWA của bạn đã được cài đặt hay chưa.

Thêm tệp assetlinks.json vào thư mục /.well-known/ của miền nơi PWA hoạt động, ví dụ: app.example.com. Trong thuộc tính site, hãy cung cấp đường dẫn đầy đủ đến tệp kê khai ứng dụng web sẽ thực hiện quy trình kiểm tra (không phải tệp kê khai ứng dụng web của PWA).

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

Cho trang web biết về PWA của bạn

Tiếp theo, hãy cho trang web biết về ứng dụng PWA của bạn bằng cách thêm tệp kê khai ứng dụng web vào trang. Tệp kê khai phải bao gồm thuộc tính related_applications, một mảng cung cấp thông tin chi tiết về PWA của bạn, bao gồm platform và url.

  • platform phải là webapp
  • url là đường dẫn đầy đủ đến tệp kê khai ứng dụng web của PWA
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]
}

Kiểm tra xem PWA của bạn đã được cài đặt hay chưa

Cuối cùng, hãy gọi hàm không đồng bộ navigator.getInstalledRelatedApps() để kiểm tra xem PWA của bạn đã được cài đặt hay chưa.

Bạn vẫn còn thắc mắc?

Bạn vẫn còn thắc mắc? Kiểm tra thẻ getInstalledRelatedApps trên StackOverflow để xem có ai khác đã đặt câu hỏi tương tự hay không. Nếu không, hãy đặt câu hỏi của bạn tại đó và nhớ gắn thẻ progressive-web-apps. Nhóm của chúng tôi thường xuyên theo dõi thẻ đó và cố gắng trả lời các câu hỏi của bạn.

Phản hồi

Bạn có phát hiện thấy lỗi trong quá trình triển khai của Chrome không? Hoặc việc triển khai có khác với quy cách không?

  • Gửi lỗi tại https://new.crbug.com. Cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn cách mô phỏng lỗi và nhập Mobile>WebAPKs vào hộp Components (Thành phần).

Đường liên kết hữu ích

Cảm ơn bạn!

Xin chân thành cảm ơn Sunggook Chue tại Microsoft vì đã giúp cung cấp thông tin chi tiết để kiểm thử các ứng dụng Windows và Rayan Kanso vì đã giúp cung cấp thông tin chi tiết về Chrome.