Penyiapan Aktivitas Web Tepercaya tidak mengharuskan developer untuk menulis kode Java, tetapi Android Studio 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 16 atau yang lebih tinggi.
Buka Android Studio dan klik Start a new Android Studio project.
Android Studio akan meminta untuk memilih jenis Aktivitas. Karena Aktivitas Web Tepercaya menggunakan Aktivitas yang disediakan oleh support library, pilih Add No Activity, lalu klik Next.
Langkah berikutnya, wizard akan meminta konfigurasi untuk project. Berikut adalah deskripsi singkat dari setiap {i>field<i}:
- Nama: Nama yang akan digunakan untuk aplikasi Anda di Peluncur Android.
- Nama Paket: ID unik untuk Aplikasi Android di Play Store dan perangkat Android. Lihat dokumentasi untuk mengetahui informasi selengkapnya tentang persyaratan dan praktik terbaik untuk membuat nama paket untuk aplikasi Android.
- Save location: Tempat Android Studio akan membuat project dalam sistem file.
- Bahasa: Project tidak memerlukan penulisan kode Java atau Kotlin apa pun. Pilih Java, sebagai default.
- API Level Minimum: Support Library memerlukan setidaknya API Level 16. Pilih API 16 dari versi apa pun di atas.
Biarkan kotak yang tersisa tidak dicentang, karena kita tidak akan menggunakan Aplikasi Instan atau artefak AndroidX, lalu klik Finish.
Mendapatkan Support Library Aktivitas Web Tepercaya
Untuk menyiapkan library Aktivitas Web Tepercaya di project, Anda perlu mengedit file build
Aplikasi. Cari bagian Gradle Scripts di Project Navigator.
Ada dua file bernama build.gradle, yang mungkin sedikit membingungkan dan
deskripsi dalam tanda kurung membantu mengidentifikasi file yang benar.
File yang kita cari adalah file dengan modul Module di samping namanya.
Library Aktivitas Web Tepercaya menggunakan
fitur Java 8
dan perubahan pertama mengaktifkan Java 8. Tambahkan bagian compileOptions ke
bagian bawah android, seperti di bawah:
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
Langkah berikutnya akan menambahkan Library Dukungan Aktivitas Web Tepercaya ke project. Tambahkan dependensi
baru 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 dapat dilakukan dengan mengedit Manifes Aplikasi Android.
Di Project Navigator, luaskan bagian app, diikuti dengan
manifests, lalu klik dua kali AndroidManifest.xml untuk membuka file.
Karena kita meminta Android Studio untuk tidak menambahkan Aktivitas apa pun ke project saat membuatnya, manifes akan kosong dan hanya berisi tag aplikasi.
Tambahkan Aktivitas Web Tepercaya dengan memasukkan 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 adalah Manifes Aplikasi Android standar. Ada dua informasi yang relevan untuk konteks Aktivitas Web Tepercaya:
- Tag
meta-datamemberi tahu Aktivitas Web Tepercaya URL mana yang harus dibuka. Ubah atributandroid:valuedengan URL PWA yang ingin Anda buka. Dalam contoh ini, nilainya adalahhttps://airhorner.com. - Tag
intent-filterkedua memungkinkan Aktivitas Web Tepercaya menangkap Intent Android yang membukahttps://airhorner.com. Atributandroid:hostdalam tagdataharus mengarah ke domain yang dibuka oleh Aktivitas Web Tepercaya.
Bagian berikutnya akan menunjukkan cara menyiapkan Digital AssetLinks untuk memverifikasi hubungan antara situs dan aplikasi, serta menghapus kolom URL.
Menghapus kolom URL
Aktivitas Web Tepercaya memerlukan pengaitan antara aplikasi Android dan situs agar dibuat untuk menghapus kolom URL.
Pengaitan ini dibuat melalui Digital Asset Links dan pengaitan harus dibuat dengan kedua cara, dengan menautkan dari aplikasi ke situs dan dari situs ke aplikasi.
Anda dapat menyiapkan aplikasi ke validasi situs dan menyiapkan Chrome untuk melewati situs ke validasi aplikasi, untuk tujuan proses debug.
Membuat atribusi dari aplikasi ke situs
Buka file resource string app > res > values > strings.xml dan tambahkan
pernyataan Digital AssetLinks di bawah:
<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 atribut site agar sesuai dengan skema dan domain
yang dibuka oleh Aktivitas Web Tepercaya.
Kembali ke file Manifes Aplikasi Android, AndroidManifest.xml, tautkan ke
pernyataan dengan menambahkan tag meta-data baru, tetapi 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>
Kami telah membuat hubungan dari aplikasi Android dengan situs. Sebaiknya debug bagian hubungan ini tanpa membuat situs ke validasi aplikasi.
Berikut cara mengujinya di perangkat pengembangan:
Mengaktifkan mode debug
- Buka Chrome di perangkat pengembangan, buka
chrome://flags, telusuri item bernama Enable command line pada perangkat yang tidak di-root dan ubah menjadi DIAKTIFKAN, 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. Kini aplikasi akan ditampilkan dalam layar penuh.
Membuat pengaitan dari situs ke aplikasi
Ada 2 informasi yang perlu dikumpulkan developer dari aplikasi untuk membuat pengaitan:
- Package Name: Informasi pertama adalah nama paket untuk aplikasi. Ini
adalah nama paket yang sama dengan yang dihasilkan ketika membuat aplikasi. Ini juga dapat ditemukan
di dalam Module
build.gradle, di bagian Gradle Scripts > build.gradle (Module: app), dan merupakan nilai atributapplicationId. - Sidik Jari SHA-256: Aplikasi Android harus ditandatangani agar dapat diupload ke Play Store. Tanda tangan yang sama digunakan untuk menghubungkan situs dan aplikasi melalui sidik jari SHA-256 dari kunci upload.
Dokumentasi Android menjelaskan secara detail cara membuat kunci menggunakan Android Studio. Pastikan Anda mencatat jalur, alias, dan sandi untuk key store karena 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 bagian sidik jari Sertifikat. 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 link aset. Isi kolom yang tersedia, lalu klik Buat Pernyataan. Salin pernyataan yang dihasilkan dan tayangkan dari domain Anda, dari URL /.well-known/assetlinks.json.
Membuat Ikon
Saat Android Studio membuat project baru, project tersebut akan dilengkapi dengan Ikon default. Sebagai pengembang, Anda sebaiknya membuat ikon Anda sendiri dan membedakan aplikasi Anda dari orang lain di Peluncur Android.
Android Studio berisi Image Asset Studio, yang menyediakan alat yang diperlukan untuk membuat ikon yang tepat, untuk setiap resolusi dan membentuk kebutuhan aplikasi Anda.
Di dalam Android Studio, buka File > New > Image Asset, pilih
Launcher Icons (Adaptative and Legacy), lalu ikuti langkah-langkah dari Wizard.
untuk membuat ikon khusus aplikasi.
Membuat APK yang ditandatangani
Setelah file assetlinks diterapkan di domain Anda dan tag asset_statements
yang dikonfigurasi di aplikasi Android, langkah selanjutnya adalah membuat aplikasi yang ditandatangani.
Sekali lagi, langkah-langkah untuk hal ini
didokumentasikan secara luas.
APK output dapat diinstal ke dalam perangkat pengujian, menggunakan adb:
adb install app-release.apk
Jika langkah verifikasi gagal, Anda dapat memeriksa pesan error menggunakan Android Debug Bridge, dari terminal OS, dan dengan perangkat pengujian yang terhubung.
adb logcat | grep -e OriginVerifier -e digital_asset_links
Dengan APK upload yang dibuat, Anda kini dapat mengupload aplikasi ke Play Store.
Menambahkan Layar Pembuka
Mulai Chrome 75, Aktivitas Web Tepercaya akan memiliki dukungan untuk Layar Pembuka. Layar Pembuka dapat disiapkan dengan menambahkan beberapa konfigurasi dan file gambar baru ke project.
Pastikan Anda mengupdate ke Chrome 75 atau yang lebih baru dan menggunakan versi terbaru Support Library Aktivitas Web Tepercaya.
Membuat gambar untuk Layar Pembuka
Perangkat Android dapat memiliki ukuran layar dan kepadatan piksel yang berbeda. 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) berada di luar cakupan artikel ini, tetapi salah satu contohnya adalah membuat gambar berukuran 320x320 dp, yang merepresentasikan persegi berukuran 2x2 inci di layar perangkat dengan kepadatan apa pun dan setara dengan 320x320 piksel pada kepadatan mdpi.
Dari sana, kita bisa mendapatkan ukuran yang diperlukan untuk kepadatan piksel lainnya. Berikut adalah daftar dengan kepadatan piksel, pengganda yang diterapkan pada ukuran dasar (320x320 dp), ukuran yang dihasilkan dalam piksel, dan lokasi tempat gambar harus ditambahkan dalam project Android Studio.
| Kepadatan | Pengganda | Ukuran | Lokasi Project |
|---|---|---|---|
| mdpi (baseline) | 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 | 960x960 piksel | /res/drawable-xxhdpi/ |
| xxxhdpi | 4,0x | 1280x1280 piksel | /res/drawable-xxxhdpi/ |
Mengupdate aplikasi
Dengan gambar untuk layar pembuka yang dihasilkan, kini saatnya menambahkan konfigurasi yang diperlukan ke project.
Pertama, tambahkan penyedia konten
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 tag android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY
cocok dengan nilai yang ditentukan dari atribut android:authorities di dalam
tag provider.
Membuat LauncherActivity transparan
Selain itu, pastikan LauncherActivity transparan agar layar putih tidak muncul 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 hasil kreasi developer dengan Aktivitas Web Tepercaya. Untuk memberikan masukan, hubungi kami di @ChromiumDev.