Ứng dụng của bạn đã được cài đặt chưa? getInstalledBasicApps() cho bạn biết!

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

Pete LePage

Alexey Rodionov

API getInstalledRelatedApps() là gì?

Phương thức getInstalledRelatedApps() trả về danh sách các ứng dụng có liên quan đã cài đặt.

Việc gọi navigator.getInstalledRelatedApps() sẽ trả về một lời hứa được giải quyết bằng một mảng các ứng dụng có liên quan được cài đặt trên thiết bị của người dùng.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Nhờ đó, trang của bạn có thể kiểm tra xem ứng dụng Android, ứng dụng Universal Windows Platform (UWP) hoặc Ứng dụng web tiến bộ (PWA) của bạn đã được cài đặt trên thiết bị của người dùng hay chưa, đồng thời cho phép bạn tuỳ chỉnh trải nghiệm người dùng nếu ứng dụng đã được cài đặt.

Ví dụ: nếu ứng dụng của bạn đã được cài đặt:

• Chuyển hướng người dùng từ trang tiếp thị sản phẩm thẳng 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 khác để ngăn thông báo trùng lặp.
• Không quảng bá lượt cài đặt PWA nếu ứng dụng khác của bạn đã được cài đặt.

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

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.

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 cách sử dụ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 nội dung 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 hay 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 của bạn biết về ứng dụng Android của bạn bằng cách thêm một 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.

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 tên nhóm 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 bản minh hoạ này.

Hãy xem bài viết 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 của bạn 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.

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 nằm trên cùng một miền và 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.

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à đường dẫn đầy đủ đến ứng dụng web (bắt buộc đối với máy tính, không bắt buộc đối với Android)

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

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 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.

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 một 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 ở đó và nhớ gắn thẻ progressive-web-apps cho câu hỏi đó. Nhóm 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? Hay việc triển khai có khác với quy cách không?

• Báo cáo 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).

Thể hiện sự ủng hộ đối với API

Bạn có dự định sử dụng API getInstalledRelatedApps() không? Sự ủng hộ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng này.

• Chia sẻ cách bạn dự định sử dụng API này trên chuỗi thảo luận WICG.
• Gửi một tweet đến @ChromiumDev bằng thẻ bắt đầu bằng #getInstalledRelatedApps và cho chúng tôi biết bạn đang sử dụng tính năng này ở đâu và như thế nào.

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

• Giải thích công khai về API getInstalledRelatedApps()
• Bản nháp quy cách kỹ thuật
• Lỗi theo dõi
• Mục nhập trên ChromeStatus.com
• Thành phần Blink: Mobile>WebAPKs

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.