Apakah aplikasi Anda sudah diinstal? API Aplikasi Terkait yang Terinstal akan memberi tahu Anda.

Pete LePage

Alexey Rodionov

Get Installed Related Apps API memungkinkan untuk mendapatkan daftar aplikasi terkait yang diinstal beserta detailnya.

API ini memungkinkan Anda memeriksa apakah aplikasi Progressive Web App (PWA), aplikasi Android, atau aplikasi Universal Windows Platform (UWP) diinstal di perangkat saat ini, baik dari PWA itu sendiri maupun dari halaman web terkait (misalnya, situs pemasaran produk).

Bubblewrap adalah kumpulan library open source dan alat command line (CLI) untuk Node.js. Bubblewrap dikembangkan oleh tim Google Chrome, untuk membantu developer membuat, mem-build, dan menandatangani project Android yang meluncurkan PWA Anda sebagai Trusted Web Activity (TWA).

PWABuilder adalah project open source yang dikembangkan oleh Microsoft, yang memungkinkan developer mengemas dan menandatangani PWA mereka untuk dipublikasikan ke berbagai app store, termasuk Microsoft Store, Google Play Store, App Store, dan Meta Quest Store, dengan memasukkan URL PWA, memasukkan/mengedit metadata untuk aplikasi, dan mengklik tombol Buat.

PWABuilder menggunakan Bubblewrap di balik layar untuk memaketkan PWA untuk Android dan ChromeOS.

Jika aplikasi sudah diinstal, Anda dapat menyesuaikan pengalaman pengguna.

Contoh:

• Tidak mempromosikan penginstalan PWA Anda jika aplikasi Anda yang lain sudah diinstal.
• Mengarahkan pengguna dari situs pemasaran produk langsung ke aplikasi Anda.
• Memusatkan beberapa fungsi seperti notifikasi di aplikasi lain untuk mencegah notifikasi duplikat.

Untuk menggunakan Get Installed Related Apps API, Anda harus memberi tahu aplikasi tentang halaman Anda, lalu memberi tahu halaman tentang aplikasi Anda. Setelah menentukan hubungan antara keduanya, Anda dapat memeriksa apakah aplikasi terkait diinstal.

Untuk mencegah situs menguji serangkaian aplikasi mereka sendiri yang terlalu luas, hanya tiga aplikasi pertama yang dideklarasikan dalam manifes aplikasi web yang akan diperhitungkan.

Seperti kebanyakan API web canggih lainnya, Get Installed Related Apps API hanya tersedia jika ditayangkan melalui HTTPS.

Apa yang dimaksud dengan Get Installed Related Apps API?

Memanggil metode navigator.getInstalledRelatedApps() asinkron menampilkan promise yang diselesaikan dengan array objek yang berisi detail tentang aplikasi yang:

• diinstal di perangkat saat ini,
• ditentukan di kolom related_applications manifes aplikasi web,
• memiliki hubungan yang terverifikasi dengan halaman tempat metode navigator.getInstalledRelatedApps() dipanggil (lihat bagian berikutnya untuk mengetahui detailnya).

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Memanggil console.log(installedRelatedApps) akan menampilkan sesuatu seperti:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

Misalnya, untuk memeriksa apakah ada aplikasi terkait yang diinstal di perangkat pengguna, Anda dapat menggunakan satu baris kode berikut:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

Jika Anda mengetahui ID paket, untuk mendapatkan nomor versi aplikasi Android terkait yang terinstal, Anda dapat menggunakan perintah satu baris berikut:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

Artinya, metode navigator.getInstalledRelatedApps() akan tetap menampilkan aplikasi terkait yang diinstal meskipun versinya lebih rendah dari min_version atau sertifikat penandatanganannya tidak cocok dengan fingerprints yang dideklarasikan di kolom related_applications pada manifes aplikasi web.

Jenis aplikasi yang didukung yang dapat Anda periksa

Memeriksa apakah aplikasi Android Anda telah diinstal

Situs Anda dapat memeriksa apakah aplikasi Android Anda diinstal.

Khusus Android: Chrome 80 atau yang lebih baru

Memberi tahu aplikasi Android Anda tentang situs Anda

Pertama, Anda harus mengupdate aplikasi Android untuk menentukan hubungan antara situs dan aplikasi Android menggunakan sistem Digital Asset Links. Hal ini memverifikasi 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, dengan 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, instal aplikasi yang telah diupdate di perangkat atau publikasikan ke Google Play Store atau platform distribusi aplikasi Android lainnya.

Memberi tahu situs Anda tentang aplikasi Android Anda

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

• platform harus play
• id adalah ID paket Android

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

Memeriksa apakah aplikasi Anda telah diinstal

Terakhir, panggil fungsi asinkron navigator.getInstalledRelatedApps() untuk memeriksa apakah aplikasi Android Anda telah diinstal.

Memeriksa apakah aplikasi Windows (UWP) Anda telah diinstal

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

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

Memberi tahu aplikasi Windows Anda tentang situs Anda

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

Tambahkan pendaftaran ekstensi Windows.appUriHandler ke file manifes aplikasi Anda Package.appxmanifest. Misalnya, jika alamat situs 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>

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 family paket aplikasi Anda. Tempatkan file tersebut di root server Anda, atau di direktori /.well-known/. Anda dapat menemukan nama keluarga paket di bagian Pengemasan di perancang manifes aplikasi.

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

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

Memberi tahu situs Anda tentang aplikasi Windows Anda

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

• platform harus windows
• id adalah nama family paket aplikasi Anda, yang ditambahkan dengan nilai <Application> Id dalam file Package.appxmanifest Anda.

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

Memeriksa apakah aplikasi Anda telah diinstal

Terakhir, panggil fungsi asinkron navigator.getInstalledRelatedApps() untuk memeriksa apakah aplikasi Windows Anda telah diinstal.

Lihat demo ini.

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 Anda, seperti yang ditentukan oleh cakupan dalam manifes aplikasi web.

Didukung di:

Android: Chrome 84 atau yang lebih baru

Desktop (Windows, macOS, Linux, ChromeOS): Chrome 140 atau yang lebih baru, Edge 140 atau yang lebih baru

Memberi tahu PWA tentang dirinya sendiri

Beritahukan PWA Anda tentang dirinya sendiri dengan menambahkan entri related_applications di manifes aplikasi web PWA Anda.

• platform harus webapp
• url adalah jalur (dapat berupa jalur relatif) ke manifes aplikasi web PWA Anda
• id adalah ID aplikasi web yang dideklarasikan di kolom id manifes aplikasi web atau dihitung oleh browser (wajib untuk Desktop, tidak diperlukan untuk Android)

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

Memeriksa apakah PWA Anda sudah diinstal

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

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

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

Didukung di:

Khusus 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 ditayangkan. Hal ini akan membantu menentukan hubungan antara situs dan PWA Anda, serta memverifikasi bahwa hanya situs Anda yang dapat memeriksa apakah PWA Anda diinstal.

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"
    }
  }
]

Selanjutnya, beri tahu situs Anda tentang aplikasi PWA Anda dengan menambahkan manifes aplikasi web ke halaman Anda. Manifes harus menyertakan properti related_applications, sebuah 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 Anda sudah diinstal

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

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 Anda di sana, dan pastikan untuk memberi tag progressive-web-apps. Tim kami sering memantau tag tersebut dan mencoba menjawab pertanyaan Anda.

Masukan

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

• Laporkan bug di https://new.crbug.com. Sertakan detail sebanyak mungkin, berikan petunjuk untuk mereproduksi bug, dan masukkan Mobile>WebAPKs di kotak Komponen.

Link bermanfaat

• Penjelasan publik untuk Get Installed Related Apps API
• Draf spesifikasi
• Melacak bug
• Entri ChromeStatus.com
• Komponen Blink: Mobile>WebAPKs

Terima kasih

Terima kasih khusus kepada Sunggook Chue di Microsoft yang telah membantu memberikan detail untuk menguji aplikasi Windows, dan Rayan Kanso yang telah membantu memberikan detail Chrome.