Aktivitas Web Tepercaya Multi-Origin

André Cipriani Bandarra

Aktivitas Web Tepercaya adalah cara baru untuk mengintegrasikan konten aplikasi web Anda seperti PWA dengan aplikasi Android Anda menggunakan protokol berdasarkan Tab Khusus.

navigasi ff-origin

Aktivitas Web Tepercaya mengharuskan origin dibuka untuk divalidasi menggunakan Digital Asset Links, untuk menampilkan konten dalam layar penuh.

Saat pengguna keluar dari origin yang divalidasi, UI Tab Khusus akan ditampilkan. Kolom URL di tab Kustom Tab memberi tahu pengguna bahwa mereka sekarang bernavigasi dalam domain di luar aplikasi, sekaligus menyediakan tombol X kepada pengguna yang memungkinkan mereka untuk kembali dengan cepat ke asal yang divalidasi.

Namun, aplikasi Web juga umum membuat pengalaman yang mencakup berbagai tempat asal - Contoh akan menjadi aplikasi belanja dengan pengalaman utama di www.example.com, sedangkan alur dihosting di checkout.example.com.

Dalam kasus seperti itu, tidak diinginkan untuk menampilkan Tab Khusus, bukan hanya karena pengguna berada di aplikasi yang sama, tetapi juga karena bilah atas dapat membuat pengguna berpikir bahwa mereka meninggalkan aplikasi dan mengabaikan proses checkout.

Aktivitas Web Tepercaya memungkinkan developer memvalidasi beberapa origin, dan pengguna akan tetap berada layar penuh saat bernavigasi di seluruh sumber tersebut. Seperti halnya domain utama, pengembang harus mampu mengontrol setiap origin yang divalidasi.

Menyiapkan validasi untuk beberapa origin

Seperti pada asalnya, validasi dilakukan melalui Digital Asset Links dan setiap domain divalidasi harus memiliki file assetlinks.json sendiri.

Dalam contoh kami dengan www.example.com dan checkout.example.com, kita akan memiliki:

  • https://www.example.com/.well-known/assetlinks.json
  • https://checkout.example.com/.well-known/assetlinks.json

Karena setiap domain terhubung ke aplikasi Android yang sama, file assetlinks.json terlihat sama persis.

Dengan asumsi nama paket untuk aplikasi Android adalah com.example.twa, keduanya assetlink.json file tersebut akan berisi sesuatu yang mirip dengan berikut ini:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
  "namespace": "android_app",
  "package_name": "com.example",
   "sha256_cert_fingerprints": ["..."]}
}]

Menambahkan beberapa origin ke Aplikasi Android

Di aplikasi Android, deklarasi asset_statements harus diperbarui agar berisi semua origin yang perlu divalidasi:

<string name="asset_statements">
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://www.example.com\"
    }
}],
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://checkout.example.com\"
    }
}],
</string>

Menambahkan origin tambahan ke LauncherActivity

Menggunakan LauncherActivity default

LauncherActivity yang merupakan bagian dari support library android-browser-helper menyediakan cara untuk menambahkan beberapa origin untuk divalidasi dengan mengonfigurasi project Android.

Pertama, tambahkan elemen string-array ke file res/values/strings.xml. Setiap URL tambahan yang akan divalidasi akan berada di dalam sub-elemen item:

...
<string-array name="additional_trusted_origins">
    <item>https://www.google.com</item>
</string-array>
...

Selanjutnya, tambahkan tag meta-data baru di dalam elemen aktivitas yang ada yang mereferensikan LauncherActivity, di dalam AndroidManifest.xml:

...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/app_name">


    <meta-data
        android:name="android.support.customtabs.trusted.ADDITIONAL_TRUSTED_ORIGINS"
        android:resource="@array/additional_trusted_origins" />


    ...
</activity>
...

Menggunakan LauncherActivity kustom

Saat menggunakan kode kustom untuk meluncurkan Aktivitas Web Tepercaya, menambahkan origin tambahan dapat dilakukan dengan memanggil setAdditionalTrustedOrigins saat membuat Intent untuk meluncurkan Aktivitas Web Tepercaya:

public void launcherWithMultipleOrigins(View view) {
  List<String> origins = Arrays.asList(
      "https://checkout.example.com/"
  );


  TrustedWebActivityIntentBuilder builder = new TrustedWebActivityIntentBuilder(LAUNCH_URI)
      .setAdditionalTrustedOrigins(origins);


  new TwaLauncher(this).launch(builder, null, null);
}

Kesimpulan

Dengan langkah-langkah tersebut, Aktivitas Web Tepercaya kini siap mendukung beberapa origin. android-browser-helper memiliki aplikasi contoh untuk Aktivitas Web Tepercaya multi-asal. Merek pastikan untuk memeriksanya.

Pemecahan masalah

Ada beberapa langkah penyiapan Digital Asset Links. Jika aplikasi masih menampilkan Tab Khusus di bagian atas, sepertinya ada yang salah dengan konfigurasi.

Panduan Memulai Cepat Aktivitas Web Tepercaya memiliki bagian pemecahan masalah yang bagus tentang cara men-debug masalah Digital Asset Link.

Selain itu, ada juga Alat Link Aset Peter yang bermanfaat, yang membantu men-debug Digital Asset Links pada aplikasi yang diinstal di perangkat..