Ứ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 PWA hoặc ứng dụng web tiến bộ (PWA) dành cho iOS/Android/máy tính đã được cài đặt trên thiết bị của người dùng hay chưa.

Pete LePage

API getCài đặt Liên quan đến() là gì?

getInstalledRelatedApps() giúp trang của bạn có thể kiểm tra xem ứng dụng của bạn dành cho thiết bị di động hay máy tính, hoặc trong một số trường hợp, liệu ứ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 có).

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

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

Để sử dụng getInstalledRelatedApps() API, bạn cần cho ứng dụng biết về trang web của mình, sau đó nói với trang web về ứng dụng đó. Sau khi xác định mối quan hệ giữa hai API, bạn có thể kiểm tra xem ứng dụng đã được cài đặt hay chưa.

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

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

Trang web 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 hệ thống Đường liên kết đến tài sản kỹ thuật số. Điều này đảm bảo 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ục nhập 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 thành phầ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 xuất bản ứng dụng Android đã cập nhật của bạn lên Cửa hàng Play.

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

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

• platform phải là play
• id là mã ứng dụng trên Google Play cho ứng dụng Android của bạn

{
  "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 navigator.getInstalledRelatedApps() để kiểm tra xem ứng dụng Android của bạn đã được cài đặt hay chưa.

Thử bản minh hoạ

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

Trang web có thể kiểm tra xem ứng dụng Windows (được tạo bằng UWP) của bạn đã đượ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 đảm bảo rằng chỉ trang web của bạn mới có thể kiểm tra xem ứng dụng Windows đã được cài đặt hay chưa.

Thêm gói đă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 cần 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 phải 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 rồi cung cấp tên bộ ứng dụng cho gói của ứng dụng. Đặt tệp đó trên thư mục gốc của máy chủ hoặc trong thư mục /.well-known/. Bạn có thể tìm thấy tên nhóm gói trong phần Đóng gói của 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 đầy đủ thông tin chi tiết 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 bằng cách thêm tệp kê khai ứng dụng web vào trang của bạn. Tệp kê khai phải bao gồm thuộc tính related_applications. Đây là một mảng cung cấp thông tin chi tiết về ứng dụng của bạn, bao gồm cả platform và id.

• platform phải là windows
• id là tên bộ gói của ứng dụng, được thêm vào 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 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 hay chưa (thuộc phạm vi)

PWA của bạn có thể kiểm tra xem đã đượ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à nằm trong phạm vi của PWA, như được xác định theo 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 đầy đủ đến tệp kê khai ứng dụng web của PWA của bạn

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

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

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

Thử bản minh hoạ

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ó thể kiểm tra xem PWA của bạn đã được cài đặt hay chưa, ngay cả khi trang nằm ngoài phạm vi PWA của bạn. Ví dụ: trang đích phân phát từ /landing/ có thể kiểm tra xem PWA phân phát từ /pwa/ có được cài đặt hay không, hoặc trang đích có được phân phát từ www.example.com và PWA của bạn có được phân phát từ app.example.com hay không.

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 phân phát PWA của bạn. Điều này sẽ giúp xác định mối quan hệ giữa trang web và PWA, đồng thời đảm bảo rằng chỉ trang web của bạn mới có thể kiểm tra xem PWA đã đượ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 của bạn biết về ứng dụng PWA bằng cách thêm tệp kê khai ứng dụng web vào trang của bạn. Tệp kê khai phải bao gồm thuộc tính related_applications. Đây là một mảng cung cấp thông tin chi tiết về PWA của bạn, bao gồm cả 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 của bạn

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

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

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

Thử bản minh hoạ

Gọi getInstallLinksApps()

Việc gọi navigator.getInstalledRelatedApps() sẽ trả về một lời hứa sẽ giải quyết bằng một mảng các ứng dụng đã 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);
});

Để ngăn các trang web kiểm thử một nhóm ứng dụng riêng quá rộng, chỉ xem xét 3 ứng dụng đầu tiên được khai báo trong tệp kê khai ứng dụng web.

Giống như hầu hết các API web mạnh mẽ khác, API getInstalledRelatedApps() chỉ có sẵn khi được phân phát qua HTTPS.

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 có 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ẻ bằng thẻ progressive-web-apps. 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.

Ý kiến phản hồi

Bạn có phát hiện thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không?

• Gửi lỗi tại https://new.crbug.com. Hãy cung cấp nhiều thông tin chi tiết nhất có thể, cung cấp hướng dẫn đơn giản để tái tạo lỗi và nhập Mobile>WebAPKs vào hộp Thành phần. Sự cố giúp bạn chia sẻ các bản sửa lại nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng API getInstalledRelatedApps() không? Dịch vụ hỗ trợ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng, đồng thời cho các nhà cung cấp trình duyệt khác biết 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 bài viết WICG Discourse.
• Hãy gửi một bài đăng trên Twitter tới @ChromiumDev kèm theo hashtag #getInstalledRelatedApps và cho chúng tôi biết vị trí cũng như cách bạn sử dụng bài đăng này.

Các đường liên kết hữu ích

• Nội dung giải thích công khai cho API getInstalledRelatedApps()
• Bản nháp quy cách
• Theo dõi lỗi
• Mục ChromeStatus.com
• Thành phần nhấp nháy: Mobile>WebAPKs

Cảm ơn bạn!

Đặc biệt cảm ơn Sunggook Chue tại Microsoft đã trợ giúp chi tiết về việc kiểm thử các ứng dụng Windows và Rayan Kanso giúp đỡ về thông tin chi tiết của Chrome.