Ứ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 iOS/Android/máy tính để bàn hoặc PWA của bạn được cài đặt trên thiết bị của người dùng.

Pete LePage

API getInstallRelatedApps() 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 hoặc máy tính hay trong một số trường hợp Ứng dụng web (PWA) đã được cài đặt trên thiết bị của người dùng và 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 từ trang tiếp thị sản phẩm đến thẳng ứ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 để để tránh thông báo trùng lặp.
• Không quảng bá quá trình cài đặt PWA nếu ứng dụng khác đã được cài đặt.

Để sử dụng API getInstalledRelatedApps(), bạn cần cho ứng dụng của mình biết về trang web của bạn, sau đó cho trang web biết về ứng dụng của bạn. Sau khi xác định được mối quan hệ giữa hai ứng dụng, 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 cách sử dụng Hệ thống Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số). Điều này đảm bảo rằng chỉ 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 asset_statements mục nhập:

<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, cập nhật site thành 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 phát hành ứng dụng Android đã cập nhật lên Cửa hàng Play.

Thông báo cho trang web 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 platform và id.

• platform phải là play
• id là mã ứng dụng Google Play dành 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 chưa

Cuối cùng, hãy gọi navigator.getInstalledRelatedApps() để kiểm tra xem Đã cài đặt ứng dụng Android.

Xem 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 cài đặt hay chưa.

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

Bạn sẽ 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 Trình xử lý URI. Chiến dịch 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ủa bạn đã được cài đặt hay chưa.

Thêm gói đăng ký tiện ích Windows.appUriHandler vào tệp kê khai của ứng dụng tệp Package.appxmanifest. Ví dụ: nếu địa chỉ trang web của bạn là example.com bạn sẽ thêm mục nhập 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>

Lưu ý: 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 windows-app-web-link và cung cấp tên bộ gói của ứng dụng. Địa điểm 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 trong tệp kê khai ứng dụng thiết kế của bạn.

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

Xem bài viết Bật ứng dụng cho các trang web bằng trình xử lý URI ứng dụng để thông tin đầy đủ về cách thiết lập trình xử lý URI.

Giới thiệu trang web của bạn về ứng dụng Windows

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 platform và id.

• platform phải là windows
• id là tên nhóm gói của ứng dụng, được nối thêm bằng <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 chưa

Cuối cùng, hãy gọi navigator.getInstalledRelatedApps() để kiểm tra xem Đã cài đặt ứng dụng Windows.

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

PWA của bạn có thể kiểm tra xem ứng dụng đó đã được cài đặt hay chưa. Trong trường hợp này, trang việc đư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 của bạn, như được xác định theo phạm vi trong tệp kê khai ứng dụng web.

Thông báo cho PWA của bạn về chính nó

Thông báo cho PWA của bạn về chính nó bằng cách thêm một mục nhập 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 PWA của bạn đã được cài đặt 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 ứng dụng đó đã được cài đặt hay chưa. Nếu getInstalledRelatedApps() được gọi bên ngoài phạm vi PWA của bạn, nó sẽ trả về false. Xem phần tiếp theo để biết chi tiết.

Xem thử bản minh hoạ

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

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

Thông báo cho PWA về trang web của bạn

Trước tiên, bạn cần thêm đường liên kết đến tài sản kỹ thuật số vào máy chủ chứa PWA của bạn được phân phát từ đó. Điều này sẽ giúp xác định mối quan hệ giữa trang web của bạn và PWA của bạn đồ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 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 site hãy cung cấp đường dẫn đầy đủ đến tệp kê khai ứng dụng web sẽ hoạt động bước 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"
    }
  }
]

Thông báo cho trang web của bạn về PWA

Tiếp theo, hãy thông báo cho trang web của bạn 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 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 PWA 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 Đã cài đặt PWA.

Xem thử bản minh hoạ

Gọi getInstallRelatedApps()

Việc gọi navigator.getInstalledRelatedApps() sẽ trả về lời hứa rằng phân giải bằng một loạt ứng dụng của bạn đượ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);
});

Để ngăn các trang web thử nghiệm một nhóm quá rộng các ứng dụng của chính họ, chỉ ba ứng dụng đầu tiên được khai báo trong tệp kê khai ứng dụng web được tính đến.

Giống như hầu hết các API web mạnh mẽ khác, API getInstalledRelatedApps() cũng 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 có câu hỏi tương tự không. Nếu không, hãy hỏi câu hỏi ở đó và hãy nhớ gắn thẻ câu hỏi đó bằng Thẻ progressive-web-apps. Nhóm của chúng tôi thường xuyên giám sát 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 lỗi trong quá trình triển khai Chrome không? Hoặc là triển khai khác với thông số kỹ thuật không?

• Báo cáo lỗi tại https://new.crbug.com. Thêm tối đa 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 Components (Thành phần). Nhỏm rất phù hợp để chia sẻ các bản lặp lại nhanh chóng và dễ dàng.

Hiện thông tin hỗ trợ về API này

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

• Chia sẻ cách bạn dự định sử dụng API trên chuỗi bài thuyết trình về WICG.
• Gửi một bài đăng đến @ChromiumDev kèm theo hashtag #getInstalledRelatedApps đồng thời cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

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

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

Cảm ơn bạn!

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