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ài đặt trên thiết bị của người dùng hay chưa.
API getInstalledRelatedApps() là gì?
getInstalledRelatedApps() để xác định xem ứng dụng Android của trang web đó đã được cài đặt hay chưa.
getInstalledRelatedApps() cho phép trang của bạn kiểm tra xem ứng dụng di động hoặc ứng dụng dành cho máy tính của bạn (hoặc trong một số trường hợp, Ứng dụng web tiến bộ (PWA)) đã đượ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á việc cài đặt PWA nếu ứng dụng khác của bạn đã được cài đặt.
Để sử dụng API getInstalledRelatedApps(), bạn cần cho ứng dụng biết về trang web của mình, sau đó cho trang web biết về ứng dụng của bạn. Sau khi xác định mối quan hệ giữa hai thành phần này, 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ể kiểm tra
| Loại ứng dụng | Có thể đánh dấu từ |
|---|---|
| Ứng dụng Android |
Chỉ dành cho Android Chrome phiên bản 80 trở lên |
| Ứng dụng Windows (UWP) |
Chỉ dành cho Windows Chrome 85 trở lên Edge 85 trở lên |
|
Ứng dụng web tiến bộ Được cài đặt trong cùng một phạm vi hoặc phạm vi khác. |
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.
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 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 xuất bản ứng dụng Android đã cập nhật lên Cửa hàng Play.
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.
platformphải làplayidlà mã ứng dụng 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 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.
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 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.
platformphải làwindowsidlà tên họ gói của ứng dụng, được thêm vào bằng giá trị<Application>Idtrong tệpPackage.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 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.
Android: Chrome 84 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.
platformphải làwebappurllà đường dẫn đầy đủ đến tệp kê khai ứng dụng web của PWAidlà đườ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ì hàm này sẽ trả về giá trị false. 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.
Android: Chrome phiên bản 84 trở lên
Máy tính (Windows, macOS, Linux, ChromeOS): Chrome 140 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 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.
platformphải làwebappurllà đườ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.
Cách sử dụng getInstalledRelatedApps()
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ủa bạn đã 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 quá rộng gồm các ứng dụng của riêng họ, chỉ 3 ứng dụng đầu tiên được khai báo trong tệp kê khai ứng dụng web sẽ được tính đến.
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 đã đặ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>WebAPKsvà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
#getInstalledRelatedAppsvà 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.