Aktivitas Web Tepercaya Multi-Origin

André Cipriani Bandarra

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

Aktivitas Web Tepercaya memerlukan asal yang dibuka untuk divalidasi menggunakan Digital Asset Links, agar dapat menampilkan konten dalam layar penuh.

Saat pengguna keluar dari origin yang divalidasi, UI Tab Kustom akan ditampilkan. Kolom URL di Tab Kustom memberi tahu pengguna bahwa mereka sekarang sedang membuka domain di luar aplikasi, sekaligus memberikan tombol X kepada pengguna yang memungkinkan mereka kembali dengan cepat ke origin yang divalidasi.

Namun, Aplikasi Web juga sering kali membuat pengalaman yang mencakup beberapa origin. Contohnya adalah aplikasi belanja dengan pengalaman utama di www.example.com, sedangkan alur checkout dihosting di checkout.example.com.

Dalam kasus seperti itu, menampilkan Tab Kustom tidak diinginkan, tidak hanya karena pengguna berada di aplikasi yang sama, tetapi juga karena panel atas dapat membuat pengguna berpikir bahwa mereka telah keluar dari aplikasi dan membatalkan checkout.

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

Menyiapkan validasi untuk beberapa origin

Seperti pada origin utama, validasi dilakukan melalui Digital Asset Links dan setiap domain yang akan divalidasi harus memiliki file assetlinks.json-nya sendiri.

Menambahkan file assetlinks ke setiap origin

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, kedua file assetlink.json akan berisi sesuatu yang mirip dengan berikut:

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

Menambahkan beberapa origin ke Aplikasi Android

Pada aplikasi Android, deklarasi asset_statements perlu diperbarui agar berisi semua asal 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 library dukungan android-browser-helper menyediakan cara untuk menambahkan beberapa origin yang akan 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 mem-build 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 contoh aplikasi untuk Aktivitas Web Tepercaya multi-origin. Pastikan untuk memeriksanya.

Pemecahan masalah

Menyiapkan Digital Asset Links memiliki beberapa bagian yang bergerak. Jika aplikasi masih menampilkan panel Tab Kustom di bagian atas, kemungkinan ada yang salah dengan konfigurasi.

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

Ada juga Alat Link Aset Peter yang luar biasa, yang membantu proses debug Digital Asset Links pada aplikasi yang diinstal di perangkat.