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 menggunakan protokol berdasarkan Tab Khusus.

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

Saat pengguna keluar dari asal yang divalidasi, UI Tab Khusus akan ditampilkan. Kolom URL di Tab Khusus memberi tahu pengguna bahwa mereka sedang bernavigasi di domain di luar aplikasi, sekaligus memberi pengguna tombol X yang memungkinkan mereka dengan cepat kembali ke asal yang divalidasi.

Namun, merupakan hal umum bagi Aplikasi Web untuk membuat pengalaman yang mencakup beberapa origin - Contohnya adalah aplikasi belanja dengan pengalaman utama di www.example.com, sementara alur checkout dihosting di checkout.example.com.

Dalam kasus semacam itu, menampilkan Tab Khusus tidak diinginkan, bukan hanya karena pengguna berada dalam aplikasi yang sama, tetapi juga karena panel atas dapat membuat pengguna berpikir bahwa mereka telah meninggalkan aplikasi dan mengabaikan checkout.

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

Menyiapkan validasi untuk beberapa origin

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

Tambahkan file assetlink ke setiap origin

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

• 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 akan 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 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

Pada aplikasi Android, deklarasi asset_statements perlu diupdate agar memuat 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 membangun 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 origin. Pastikan untuk memeriksanya.

Pemecahan masalah

Ada beberapa proses yang harus dilalui untuk menyiapkan Digital Asset Links. Jika aplikasi masih menampilkan panel Tab Khusus di bagian atas, mungkin 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.

Kami juga menyediakan Peter's Asset Link Tool yang luar biasa untuk membantu men-debug Digital Asset Links pada aplikasi yang diinstal di perangkat.