Metode getInstalledRelatedApps()
memungkinkan situs Anda memeriksa apakah
aplikasi iOS/Android/desktop atau PWA Anda diinstal di perangkat pengguna.
Apa itu getInstallRelatedApps() API?
getInstalledRelatedApps()
memungkinkan halaman Anda untuk
periksa apakah aplikasi seluler atau desktop Anda, atau dalam kasus tertentu, apakah
Aplikasi Web (PWA) sudah diinstal di perangkat pengguna, dan memungkinkan Anda untuk
menyesuaikan pengalaman
pengguna jika ada.
Misalnya, jika aplikasi Anda sudah diinstal:
- Mengalihkan pengguna dari halaman pemasaran produk langsung ke aplikasi Anda.
- Memusatkan beberapa fungsi seperti notifikasi di aplikasi lain untuk mencegah duplikasi notifikasi.
- Tidak mempromosikan penginstalan PWA Anda jika aplikasi lain sudah diinstal.
Untuk menggunakan getInstalledRelatedApps()
API, Anda perlu memberi tahu aplikasi tentang
situs Anda, lalu memberi tahu situs tentang aplikasi Anda. Setelah Anda menentukan
hubungan di antara keduanya, Anda dapat
memeriksa apakah aplikasi sudah diinstal.
Jenis aplikasi yang didukung dan dapat Anda periksa
Jenis aplikasi | Dapat dicentang dari |
---|---|
Aplikasi Android |
Khusus Android Chrome 80 atau yang lebih baru |
Aplikasi Windows (UWP) |
Khusus Windows Chrome 85 atau yang lebih baru Edge 85 atau yang lebih baru |
Progressive Web App Diinstal dalam cakupan yang sama atau cakupan yang berbeda. |
Khusus Android Chrome 84 atau yang lebih baru |
Periksa apakah aplikasi Android Anda sudah diinstal
Situs Anda dapat memeriksa apakah aplikasi Android Anda sudah diinstal.
Android: Chrome 80 atau yang lebih baru
Memberi tahu aplikasi Android tentang situs Anda
Pertama, Anda harus memperbarui aplikasi Android untuk menentukan hubungan antara situs web dan aplikasi Android menggunakan Sistem Digital Asset Links. Hal ini memastikan bahwa hanya situs web dapat memeriksa apakah aplikasi Android Anda sudah diinstal.
Di AndroidManifest.xml
aplikasi Android, tambahkan asset_statements
entri:
<manifest>
<application>
…
<meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
…
</application>
</manifest>
Kemudian, di strings.xml
, tambahkan pernyataan aset berikut, perbarui site
dengan
domain Anda. Pastikan untuk menyertakan karakter escaping.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
Setelah selesai, publikasikan aplikasi Android yang telah diupdate ke Play Store.
Menceritakan situs Anda tentang aplikasi Android
Selanjutnya, beri tahu situs tentang aplikasi Android Anda dengan
menambahkan manifes aplikasi web ke halaman Anda. Manifes harus
menyertakan properti related_applications
, array yang memberikan detail
tentang aplikasi Anda, termasuk platform
dan id
.
platform
harusplay
id
adalah ID aplikasi Google Play untuk aplikasi Android Anda
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
Periksa apakah aplikasi Anda sudah diinstal
Terakhir, panggil navigator.getInstalledRelatedApps()
untuk memeriksa apakah
Aplikasi Android telah diinstal.
Coba demo
Periksa apakah aplikasi Windows (UWP) sudah diinstal
Situs Anda dapat memeriksa apakah aplikasi Windows (dibuat menggunakan UWP) telah diinstal.
Windows: Chrome 85 atau yang lebih baru, Edge 85 atau yang lebih baru
Memberi tahu aplikasi Windows tentang situs Anda
Anda harus memperbarui aplikasi Windows untuk menentukan hubungan antara situs dan aplikasi Windows menggunakan Pengendali URI. Ini memastikan bahwa hanya situs Anda yang dapat memeriksa apakah aplikasi Windows telah diinstal.
Menambahkan pendaftaran ekstensi Windows.appUriHandler
ke manifes aplikasi Anda
file Package.appxmanifest
. Misalnya, jika alamat situs web Anda adalah
example.com
, Anda akan menambahkan entri berikut dalam manifes aplikasi:
<Applications>
<Application Id="App" ... >
...
<Extensions>
<uap3:Extension Category="windows.appUriHandler">
<uap3:AppUriHandler>
<uap3:Host Name="example.com" />
</uap3:AppUriHandler>
</uap3:Extension>
</Extensions>
</Application>
</Applications>
Perlu diperhatikan, Anda mungkin perlu menambahkan namespace uap3
ke elemen
Atribut <Package>
.
Kemudian, buat file JSON (tanpa ekstensi file .json
) yang diberi nama
windows-app-web-link
dan berikan nama keluarga paket aplikasi Anda. Letakkan
file tersebut, baik di root server atau di direktori /.well-known/
. Anda
dapat menemukan nama kelompok paket di bagian Packaging dalam manifes aplikasi
desainer.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
Lihat Mengaktifkan aplikasi untuk situs menggunakan pengendali URI aplikasi untuk detail lengkap tentang cara menyiapkan pengendali URI.
Memberi tahu situs tentang aplikasi Windows Anda
Selanjutnya, beri tahu situs web Anda
tentang aplikasi Windows Anda dengan
menambahkan manifes aplikasi web ke halaman Anda. Manifes harus
menyertakan properti related_applications
, array yang memberikan detail
tentang aplikasi Anda, termasuk platform
dan id
.
platform
haruswindows
id
adalah nama keluarga paket aplikasi Anda, ditambahkan oleh<Application>
Id
dalam filePackage.appxmanifest
.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
Periksa apakah aplikasi Anda sudah diinstal
Terakhir, panggil navigator.getInstalledRelatedApps()
untuk memeriksa apakah
Aplikasi Windows telah diinstal.
Memeriksa apakah Progressive Web App Anda sudah diinstal (dalam cakupan)
PWA Anda dapat memeriksa apakah PWA sudah diinstal. Dalam hal ini, halaman membuat permintaan harus berada di domain yang sama dan dalam cakupan PWA Anda, seperti yang ditentukan oleh cakupan di manifes aplikasi web.
Android: Chrome 84 atau yang lebih baru
Memberi tahu PWA Anda tentang dirinya sendiri
Beri tahu PWA Anda tentang dirinya sendiri dengan menambahkan entri related_applications
di
manifes aplikasi web PWA.
platform
haruswebapp
url
adalah jalur lengkap ke manifes aplikasi web PWA Anda
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
Memeriksa apakah PWA Anda sudah diinstal
Terakhir, panggil navigator.getInstalledRelatedApps()
dari dalam
cakupan PWA Anda untuk memeriksa apakah PWA sudah diinstal. Jika
getInstalledRelatedApps()
dipanggil di luar cakupan PWA Anda, dan akan
return false. Lihat bagian berikutnya untuk detail lebih lanjut.
Coba demo
Memeriksa apakah Progressive Web App Anda telah diinstal (di luar cakupan)
Situs Anda dapat memeriksa apakah PWA sudah diinstal, meskipun halaman berada di luar
cakupan PWA Anda. Misalnya, halaman landing yang ditayangkan dari
/landing/
dapat memeriksa apakah PWA yang disalurkan dari /pwa/
sudah diinstal, atau apakah
halaman landing ditayangkan dari www.example.com
dan PWA Anda ditayangkan dari
app.example.com
.
Android: Chrome 84 atau yang lebih baru
Memberi tahu PWA tentang situs Anda
Pertama, Anda harus menambahkan link aset digital ke server tempat PWA Anda berada dari mereka. Hal ini akan membantu menentukan hubungan antara {i>website<i} dan PWA Anda, dan memastikan bahwa hanya situs Anda yang dapat memeriksa apakah PWA Anda diinstal.
Tambahkan file assetlinks.json
ke direktori /.well-known/
dari domain tempat PWA berada, misalnya app.example.com
. Di site
menyediakan jalur lengkap ke manifes aplikasi web yang akan menjalankan
pemeriksaan tersebut (bukan manifes aplikasi web PWA Anda).
// 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"
}
}
]
Memberi tahu situs tentang PWA Anda
Selanjutnya, beri tahu situs tentang aplikasi PWA Anda dengan
menambahkan manifes aplikasi web ke halaman Anda. Manifes harus
menyertakan properti related_applications
, array yang memberikan detail
PWA Anda, termasuk platform
dan url
.
platform
haruswebapp
url
adalah jalur lengkap ke manifes aplikasi web PWA Anda
{
"related_applications": [{
"platform": "webapp",
"url": "https://app.example.com/manifest.json",
}]
}
Memeriksa apakah PWA Anda sudah diinstal
Terakhir, panggil navigator.getInstalledRelatedApps()
untuk memeriksa apakah
PWA diinstal.
Coba demo
Memanggil get installedRelatedApps()
Memanggil navigator.getInstalledRelatedApps()
akan menampilkan promise yang
di-resolve dengan array aplikasi Anda yang diinstal di perangkat pengguna.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
Untuk mencegah situs menguji kumpulan aplikasinya sendiri yang terlalu luas, hanya tiga aplikasi pertama yang dideklarasikan dalam manifes aplikasi web yang akan diperhitungkan.
Seperti kebanyakan API web canggih lainnya, getInstalledRelatedApps()
API memiliki
hanya tersedia jika ditayangkan melalui HTTPS.
Masih ada pertanyaan?
Masih ada pertanyaan? Periksa tag getInstalledRelatedApps
di StackOverflow
untuk melihat apakah ada orang lain yang memiliki
pertanyaan serupa. Jika tidak, tanyakan
pertanyaan di sana, dan pastikan untuk memberi tag dengan
Tag progressive-web-apps
. Tim kami sering memantau
tag itu dan mencoba menjawab pertanyaan Anda.
Masukan
Apakah Anda menemukan bug pada implementasi Chrome? Ataukah implementasi berbeda dengan spesifikasi?
- Laporkan bug di https://new.crbug.com. Sertakan sebanyak mungkin
sedetail mungkin, berikan petunjuk sederhana untuk mereproduksi bug, dan
masukkan
Mobile>WebAPKs
di kotak Components. Glitch bekerja dengan sangat baik untuk berbagi laporan dengan cepat dan mudah.
Menunjukkan dukungan untuk API
Anda berencana menggunakan getInstalledRelatedApps()
API? Publik Anda
dukungan membantu tim Chrome untuk memprioritaskan fitur dan menunjukkan
vendor browser web betapa pentingnya
untuk mendukung mereka.
- Bagikan rencana Anda untuk menggunakan API di thread Discourse WICG.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#getInstalledRelatedApps
dan beri tahu kami tempat serta cara Anda menggunakannya.
Link bermanfaat
- Penjelasan publik untuk
getInstalledRelatedApps()
API - Draf spesifikasi
- Bug pelacakan
- Entri ChromeStatus.com
- Komponen Kedipan:
Mobile>WebAPKs
Terima kasih
Terima kasih khusus kepada Sunggook Chue di Microsoft yang telah membantu detailnya untuk menguji aplikasi Windows, dan Rayan Kanso untuk mendapatkan bantuan terkait detail Chrome.