Halaman ini diterjemahkan oleh Cloud Translation API.

Apakah aplikasi Anda sudah terinstal? getinstalledRecentApps() akan memberi tahu Anda.

Metode getInstalledRelatedApps() memungkinkan situs Anda memeriksa apakah aplikasi iOS/Android/desktop atau PWA diinstal di perangkat pengguna.

Pete LePage

Apa yang dimaksud dengan getinstalledRelatedApps() API?

Situs yang menggunakan `getInstalledRelatedApps()` untuk menentukan apakah aplikasi Android-nya sudah diinstal.

getInstalledRelatedApps() memungkinkan halaman Anda memeriksa apakah aplikasi seluler atau desktop Anda, atau dalam beberapa kasus, apakah Progressive Web App (PWA) sudah terinstal di perangkat pengguna, dan memungkinkan Anda menyesuaikan pengalaman pengguna jika sudah terinstal.

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 notifikasi duplikat.
Tidak mempromosikan penginstalan PWA Anda jika aplikasi lain sudah diinstal.

Untuk menggunakan getInstalledRelatedApps() API, Anda harus memberi tahu aplikasi tentang situs Anda, lalu memberi tahu situs tentang aplikasi tersebut. Setelah menentukan hubungan antara keduanya, Anda dapat memeriksa apakah aplikasi sudah diinstal.

Jenis aplikasi yang didukung yang 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

Catatan: getInstalledRelatedApps() API hanya memungkinkan Anda memeriksa apakah aplikasi Anda telah diinstal. Anda tidak bisa mendapatkan daftar semua aplikasi yang terinstal, atau memeriksa apakah aplikasi pihak ketiga lainnya telah diinstal.

Memeriksa apakah aplikasi Android sudah diinstal

Situs Anda dapat memeriksa apakah aplikasi Android telah diinstal.

Didukung di

Android: Chrome 80 atau yang lebih baru

Memberi tahu aplikasi Android tentang situs Anda

Pertama, Anda harus mengupdate aplikasi Android untuk menentukan hubungan antara situs dan aplikasi Android menggunakan sistem Digital Asset Links. Hal ini memastikan bahwa hanya situs Anda yang dapat memeriksa apakah aplikasi Android Anda diinstal.

Di AndroidManifest.xml aplikasi Android Anda, tambahkan entri asset_statements:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Kemudian, di strings.xml, tambahkan pernyataan aset berikut, yang memperbarui site dengan domain Anda. Pastikan untuk menyertakan karakter escape.

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

Memberi tahu situs tentang aplikasi Android Anda

Selanjutnya, beri tahu situs Anda tentang aplikasi Android 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 harus play
id adalah ID aplikasi Google Play untuk aplikasi Android Anda

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Periksa apakah aplikasi sudah diinstal

Terakhir, panggil navigator.getInstalledRelatedApps() untuk memeriksa apakah aplikasi Android Anda sudah diinstal.

Coba demonya

Memeriksa apakah aplikasi Windows (UWP) sudah terinstal

Situs Anda dapat memeriksa apakah aplikasi Windows (dibuat menggunakan UWP) telah diinstal.

Didukung di

Windows: Chrome 85 atau yang lebih baru, Edge 85 atau yang lebih baru

Beri tahu aplikasi Windows tentang situs Anda

Anda harus mengupdate aplikasi Windows untuk menentukan hubungan antara situs dan aplikasi Windows menggunakan Pengendali URI. Hal ini memastikan bahwa hanya situs Anda yang dapat memeriksa apakah aplikasi Windows Anda telah diinstal.

Tambahkan pendaftaran ekstensi Windows.appUriHandler ke file manifes Package.appxmanifest aplikasi Anda. Misalnya, jika alamat situs Anda adalah example.com, Anda perlu menambahkan entri berikut ke 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>

Perhatikan bahwa Anda mungkin perlu menambahkan namespace uap3 ke atribut <Package>.

Kemudian, buat file JSON (tanpa ekstensi file .json) bernama windows-app-web-link dan berikan nama kelompok paket aplikasi Anda. Tempatkan file tersebut di root server atau di direktori /.well-known/. Anda dapat menemukan nama jenis paket di bagian Kemasan pada desainer manifes aplikasi.

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

Lihat Mengaktifkan aplikasi untuk situs yang menggunakan pengendali URI aplikasi untuk mengetahui detail lengkap tentang menyiapkan pengendali URI.

Memberi tahu situs tentang aplikasi Windows Anda

Selanjutnya, beri tahu situs Anda tentang aplikasi Windows 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 harus windows
id adalah nama keluarga paket aplikasi Anda, yang ditambahkan oleh nilai Id <Application> dalam file Package.appxmanifest.

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

Periksa apakah aplikasi 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 yang membuat permintaan harus berada di domain yang sama, dan dalam cakupan PWA, seperti yang ditentukan oleh cakupan dalam manifes aplikasi web.

Didukung di

Android: Chrome 84 atau yang lebih baru

Memberi tahu PWA itu sendiri

Beri tahu PWA Anda sendiri dengan menambahkan entri related_applications di manifes aplikasi web PWA Anda.

platform harus webapp
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 sudah diinstal

Terakhir, panggil navigator.getInstalledRelatedApps() dari dalam cakupan PWA untuk memeriksa apakah PWA telah diinstal. Jika getInstalledRelatedApps() dipanggil di luar cakupan PWA Anda, nilai akan ditampilkan salah. Lihat bagian berikutnya untuk detail lebih lanjut.

Coba demonya

Memeriksa apakah Progressive Web App Anda sudah diinstal (di luar cakupan)

Situs Anda dapat memeriksa apakah PWA sudah diinstal, meskipun halaman tersebut berada di luar cakupan PWA. Misalnya, halaman landing yang ditayangkan dari /landing/ dapat memeriksa apakah PWA yang ditayangkan dari /pwa/ telah diinstal, atau apakah halaman landing Anda ditayangkan dari www.example.com dan PWA Anda ditayangkan dari app.example.com.

Didukung di

Android: Chrome 84 atau yang lebih baru

Memberi tahu PWA tentang situs Anda

Pertama, Anda harus menambahkan link aset digital ke server tempat PWA ditayangkan. Hal ini akan membantu menentukan hubungan antara situs dan PWA Anda, serta memastikan bahwa hanya situs Anda yang dapat memeriksa apakah PWA Anda terinstal.

Tambahkan file assetlinks.json ke direktori /.well-known/ domain tempat PWA berada, misalnya app.example.com. Di properti site, berikan jalur lengkap ke manifes aplikasi web yang akan melakukan pemeriksaan (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"
    }
  }
]

Catatan: Periksa kembali nama file ketika Anda membuat file assetlinks.json. Saya telah membuang banyak waktu untuk melakukan debug, hanya untuk menyadari bahwa saya telah menambahkan 's' ekstra dalam nama file.

Memberi tahu situs Anda tentang PWA

Selanjutnya, beri tahu situs Anda tentang aplikasi PWA dengan menambahkan manifes aplikasi web ke halaman. Manifes harus menyertakan properti related_applications, array yang memberikan detail tentang PWA Anda, termasuk platform dan url.

platform harus webapp
url adalah jalur lengkap ke manifes aplikasi web PWA Anda

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

Memeriksa apakah PWA sudah diinstal

Terakhir, panggil navigator.getInstalledRelatedApps() untuk memeriksa apakah PWA Anda sudah diinstal.

Coba demonya

Memanggil getMenghubungi terkaitApps()

Memanggil navigator.getInstalledRelatedApps() akan menampilkan promise yang akan diselesaikan 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);
});

Agar situs tidak menguji kumpulan aplikasi mereka yang terlalu luas, hanya tiga aplikasi pertama yang dideklarasikan dalam manifes aplikasi web yang akan dipertimbangkan.

Seperti sebagian besar API web canggih lainnya, getInstalledRelatedApps() API hanya tersedia saat disalurkan 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, ajukan pertanyaan di sana, dan pastikan untuk memberinya tag progressive-web-apps. Tim kami sering memantau tag tersebut dan mencoba menjawab pertanyaan Anda.

Masukan

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?

Laporkan bug di https://new.crbug.com. Sertakan detail sebanyak mungkin, berikan petunjuk sederhana untuk mereproduksi bug, dan masukkan Mobile>WebAPKs di kotak Components. Glitch sangat cocok untuk berbagi repro yang cepat dan mudah.

Menunjukkan dukungan untuk API

Apakah Anda berencana menggunakan getInstalledRelatedApps() API? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.

Bagikan rencana Anda untuk menggunakan API ini di rangkaian pesan Discourse WiCG.
Kirim tweet ke @ChromiumDev menggunakan hashtag #getInstalledRelatedApps dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

Penjelasan publik untuk getInstalledRelatedApps() API
Draf spesifikasi
Bug pelacakan
Entri ChromeStatus.com
Komponen Blink: Mobile>WebAPKs

Terima kasih

Terima kasih banyak kepada Sunggook Chue di Microsoft yang telah membantu dengan detail untuk menguji aplikasi Windows, dan Rayan Kanso atas bantuan terkait detail Chrome.