Halaman ini diterjemahkan oleh Cloud Translation API.

Panduan Integrasi

André Cipriani Bandarra

Untuk menyiapkan Aktivitas Web Tepercaya, developer tidak harus menulis kode Java, tetapi Android Studio adalah tidak diperlukan. Panduan ini dibuat menggunakan Android Studio 3.3. Lihat dokumen tentang cara menginstalnya.

Membuat Project Aktivitas Web Tepercaya

Saat menggunakan Aktivitas Web Tepercaya, project harus menargetkan API level 16 atau yang lebih tinggi.

Buka Android Studio dan klik Start a new Android Studio project.

Android Studio akan meminta Anda memilih jenis Aktivitas. Karena Aktivitas Web Tepercaya menggunakan Aktivitas yang disediakan oleh support library, pilih Add No Activity, lalu klik Berikutnya.

Langkah selanjutnya, wizard akan meminta konfigurasi untuk project. Berikut adalah deskripsi singkat setiap kolom:

Nama: Nama yang akan digunakan untuk aplikasi Anda di Peluncur Android.
Nama Paket: ID unik untuk Aplikasi Android di Play Store dan di perangkat Android. Periksa dokumentasi untuk informasi selengkapnya tentang persyaratan dan praktik terbaik dalam membuat paket nama untuk aplikasi Android.
Save location: Tempat Android Studio akan membuat project dalam file sistem file.
Bahasa: Project tidak perlu menulis kode Java atau Kotlin. Pilih Java, sebagai default.
API Level Minimum: Support Library memerlukan setidaknya API Level 16. Pilih API 16 versi apa pun di atas.

Biarkan kotak centang yang tersisa tidak dicentang, karena kita tidak akan menggunakan Aplikasi Instan atau artefak AndroidX, lalu klik Finish.

Mendapatkan Trusted Web Activity Support Library

Untuk menyiapkan library Aktivitas Web Tepercaya dalam project, Anda harus mengedit Aplikasi file build-nya. Cari bagian Gradle Scripts di Project Navigator. Ada dua file bernama build.gradle, yang mungkin sedikit membingungkan dan deskripsi dalam tanda kurung membantu mengidentifikasi yang benar.

File yang kita cari adalah file dengan modul Module di sebelahnya nama.

Library Aktivitas Web Tepercaya menggunakan Fitur Java 8 dan perubahan pertama mengaktifkan Java 8. Tambahkan bagian compileOptions ke bawah bagian android, seperti di bawah ini:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

Langkah berikutnya akan menambahkan Trusted Web Activity Support Library ke project. Tambahkan baru dependensi ke bagian dependencies:

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

Android Studio akan menampilkan perintah yang meminta untuk menyinkronkan project sekali lagi. Klik link Sync Now dan sinkronkan.

Meluncurkan Aktivitas Web Tepercaya

Penyiapan Aktivitas Web Tepercaya dilakukan dengan mengedit Manifes Aplikasi Android.

Di Project Navigator, luaskan bagian app, diikuti dengan manifes dan klik dua kali pada AndroidManifest.xml untuk membuka file.

Karena kita meminta Android Studio untuk tidak menambahkan Aktivitas apa pun ke proyek ketika membuatnya, manifes akan kosong dan hanya berisi tag aplikasi.

Tambahkan Aktivitas Web Tepercaya dengan menyisipkan tag activity ke dalam tag application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

Tag yang ditambahkan ke XML bersifat standar Manifes Aplikasi Android. Ada dua informasi yang relevan untuk konteks Web Tepercaya. Aktivitas:

Tag meta-data memberi tahu Aktivitas Web Tepercaya URL mana yang harus dibuka. Mengubah atribut android:value dengan URL PWA yang ingin Anda buka. Di beberapa contoh ini, adalah https://airhorner.com.
Tag intent-filter kedua memungkinkan Aktivitas Web Tepercaya mencegat Android Intent yang membuka https://airhorner.com. Atribut android:host di dalam tag data harus mengarah ke domain yang dibuka oleh Aktivitas Web Tepercaya.

Bagian berikutnya akan menunjukkan cara menyiapkan AssetLink Digital untuk memverifikasi hubungan antara situs dan aplikasi, serta menghapus kolom URL.

Menghapus kolom URL

Aktivitas Web Tepercaya memerlukan pengaitan antara aplikasi Android dan situs web yang akan dibuat untuk menghapus bilah URL.

Pengaitan ini dibuat melalui Digital Asset Links dan pengaitan harus dibentuk dengan kedua cara, yang menautkan dari aplikasi ke situs dan dari situs ke aplikasi.

Anda dapat menyiapkan aplikasi ke validasi situs dan menyiapkan Chrome untuk melewatinya {i>website<i} ke validasi aplikasi, untuk tujuan {i>debugging<i}.

Membuat pengaitan dari aplikasi ke situs

Buka file resource string app > res > values > strings.xml dan tambahkan Pernyataan Digital AssetLinks di bawah ini:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Ubah konten untuk atribut site agar cocok dengan skema dan domain dibuka oleh Aktivitas Web Tepercaya.

Kembali ke file Manifes Aplikasi Android, AndroidManifest.xml, link ke dengan menambahkan tag meta-data baru, namun kali ini sebagai turunan dari Tag application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

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

        <activity>
            ...
        </activity>

    </application>
</manifest>

Kita kini telah menjalin hubungan dari aplikasi Android dengan situs Anda. Sangat membantu untuk men-debug bagian hubungan ini tanpa membuat {i>website<i} ke validasi aplikasi.

Berikut adalah cara mengujinya pada perangkat pengembangan:

Mengaktifkan mode debug

Buka Chrome di perangkat pengembangan, buka chrome://flags, telusuri untuk item yang disebut Aktifkan command line pada perangkat yang tidak di-root dan mengubahnya ke ENABLED, lalu mulai ulang browser.
Selanjutnya, pada aplikasi Terminal sistem operasi Anda, gunakan Android Debug Bridge (diinstal dengan Android Studio), dan jalankan perintah berikut:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Tutup Chrome dan luncurkan kembali aplikasi Anda dari Android Studio. Tujuan aplikasi kini akan ditampilkan dalam layar penuh.

Membuat pengaitan dari situs ke aplikasi

Ada 2 informasi yang perlu dikumpulkan pengembang dari aplikasi Anda untuk membuat atribusi:

Nama Paket: Informasi pertama adalah nama paket untuk aplikasi. Ini adalah nama paket yang sama dengan yang dibuat saat membuat aplikasi. Ini juga dapat ditemukan di dalam Module build.gradle, di bagian Skrip Gradle > build.gradle (Module: app), dan merupakan nilai atribut applicationId.
Sidik Jari SHA-256: Aplikasi Android harus ditandatangani agar dapat diupload ke Play Store. Tanda tangan yang sama digunakan untuk menetapkan koneksi antara situs web dan aplikasi melalui sidik jari SHA-256 dari kunci upload.

Dokumentasi Android menjelaskan secara mendetail cara membuat kunci menggunakan Android Studio. Pastikan untuk mencatat path, alias, dan passwords untuk key store, sebagai Anda akan memerlukannya untuk langkah berikutnya.

Ekstrak sidik jari SHA-256 menggunakan keytool, dengan perintah berikut:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

Nilai untuk sidik jari SHA-256 dicetak di bawah Sertifikat sidik jari. Berikut adalah contoh output:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

Setelah memiliki kedua informasi tersebut, buka generator assetlink, isi kolom, lalu klik Generate Statement. Salin pernyataan yang dihasilkan dan menayangkannya dari domain Anda, dari URL /.well-known/assetlinks.json.

Membuat Ikon

Saat Android Studio membuat project baru, project akan disertai dengan Ikon default. Sebagai pengembang, Anda pasti ingin membuat ikon sendiri dan membedakannya aplikasi dari orang lain pada Peluncur Android.

Android Studio berisi Image Asset Studio, yang menyediakan alat yang diperlukan untuk membuat ikon yang benar, resolusi dan membentuk kebutuhan aplikasi Anda.

Di dalam Android Studio, buka File > New > Image Asset, pilih Launcher Icons (Adaptative and Legacy) dan ikuti langkah-langkah dari Wizard. untuk membuat ikon khusus untuk aplikasi.

Membuat APK bertanda tangan

Dengan file assetlinks diterapkan di domain Anda dan tag asset_statements dikonfigurasikan dalam aplikasi Android, langkah berikutnya adalah menghasilkan aplikasi yang ditandatangani. Sekali lagi, langkah-langkah untuk hal ini umumnya terdokumentasi.

APK output dapat diinstal ke perangkat pengujian, menggunakan adb:

adb install app-release.apk

Jika langkah verifikasi gagal, Anda dapat memeriksa error menggunakan Android Debug Bridge, dari terminal OS Anda dan dengan perangkat pengujian terhubung.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Dengan APK upload yang dihasilkan, kini Anda dapat mengupload aplikasi ke Play Store.

Menambahkan Layar Pembuka

Mulai Chrome 75, Aktivitas Web Tepercaya memiliki dukungan untuk Layar Pembuka. Layar Pembuka dapat disiapkan dengan menambahkan beberapa file gambar dan konfigurasi ke proyek.

Pastikan untuk mengupdate ke Chrome 75 atau yang lebih baru dan gunakan Trusted Web Activity Support Library versi terbaru.

Membuat gambar untuk Layar Pembuka

Perangkat Android dapat memiliki ukuran layar yang berbeda-beda dan kepadatan piksel. Untuk memastikan Layar Pembuka terlihat bagus di semua perangkat, Anda harus membuat gambar untuk setiap kepadatan piksel.

Penjelasan lengkap tentang piksel yang tidak bergantung tampilan (dp atau dip) di luar cakupan artikel ini, tetapi satu contohnya adalah membuat gambar yang adalah 320x320 dp, yang mewakili persegi 2x2 inci pada layar perangkat dengan segala kepadatan dan setara dengan piksel 320x320 pada kepadatan mdpi.

Dari sana, kita bisa mendapatkan ukuran yang diperlukan untuk kepadatan piksel lainnya. Di bawah ini adalah daftar dengan kepadatan piksel, pengganda yang diterapkan ke ukuran dasar (320x320 dp), ukuran yang dihasilkan dalam {i>pixel<i} dan lokasi di mana gambar akan ditambahkan ke Project Android Studio.

Kepadatan	Pengganda	Ukuran	Lokasi Project
mdpi (dasar pengukuran)	1,0x	320x320 piksel	/res/drawable-mdpi/
ldpi	0,75x	240x240 piksel	/res/drawable-ldpi/
hdpi	1,5x	480x480 piksel	/res/drawable-hdpi/
xhdpi	2,0x	640x640 piksel	/res/drawable-xhdpi/
xxhdpi	3,0x	960 x 960 piksel	/res/drawable-xxhdpi/
xxxhdpi	4,0x	1280 x 1280 piksel	/res/drawable-xxxhdpi/

Mengupdate aplikasi

Dengan gambar untuk layar pembuka yang dibuat, inilah saatnya untuk menambahkan elemen konfigurasi project ke project.

Pertama, tambahkan content-provider ke Manifes Android (AndroidManifest.xml).

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

Kemudian, tambahkan resource res/xml/filepaths.xml, dan tentukan jalur ke layar pembuka twa:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

Terakhir, tambahkan meta-tags ke Manifes Android untuk menyesuaikan LauncherActivity:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

Pastikan nilai android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY cocok dengan nilai yang ditentukan dari atribut android:authorities di dalam tag tag provider.

Membuat LauncherActivity transparan

Selain itu, pastikan LauncherActivity transparan untuk menghindari layar putih ditampilkan sebelum pembuka dengan menyetel tema transparan untuk LauncherActivity:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

Kami tidak sabar untuk melihat apa saja yang dibangun developer dengan Web Tepercaya Aktivitas. Untuk memberikan masukan, hubungi kami di @ChromiumDev.