Penyiapan Aktivitas Web Tepercaya dapat sedikit sulit, terutama jika Anda hanya ingin menampilkan situs Anda. Panduan ini akan memandu Anda membuat project dasar yang menggunakan Aktivitas Web Tepercaya, yang mencakup semua hal yang perlu diperhatikan.
Di akhir panduan ini, Anda akan:
- Telah menggunakan Bubblewrap untuk mem-build aplikasi yang menggunakan Aktivitas Web Tepercaya dan lulus verifikasi.
- Pahami kapan kunci penandatanganan Anda digunakan.
- Mampu menentukan tanda tangan yang digunakan untuk membangun Aplikasi Android Anda.
- Mengetahui cara membuat file Digital Asset Links dasar.
Untuk mengikuti panduan ini, Anda memerlukan:
- Node.js 10 atau yang lebih baru diinstal di komputer pengembangan.
- Ponsel atau emulator Android yang terhubung dan disiapkan untuk pengembangan (Aktifkan proses debug USB jika Anda menggunakan ponsel fisik).
- Browser yang mendukung Aktivitas Web Tepercaya di ponsel pengembangan Anda. Chrome 72 atau yang lebih baru akan berfungsi. Dukungan di browser lain akan segera hadir.
- Situs yang ingin Anda lihat di Aktivitas Web Tepercaya.
Aktivitas Web Tepercaya memungkinkan Aplikasi Android Anda meluncurkan Tab Browser layar penuh tanpa UI browser apa pun. Kemampuan ini dibatasi untuk situs yang Anda miliki, dan Anda membuktikannya dengan menyiapkan Digital Asset Links. Kita akan membahasnya lebih lanjut nanti.
Saat Anda meluncurkan Aktivitas Web Tepercaya, browser akan memeriksa apakah Digital Asset Links check-out, yang disebut verifikasi. Jika verifikasi gagal, browser akan kembali menampilkan situs Anda sebagai Tab Kustom.
Menginstal dan mengonfigurasi Bubblewrap
Bubblewrap adalah serangkaian library dan alat command line (CLI) untuk Node.js yang membantu developer membuat, mem-build, dan menjalankan Progressive Web App di dalam aplikasi Android, menggunakan Aktivitas Web Tepercaya.
CLI dapat diinstal dengan perintah berikut:
npm i -g @bubblewrap/cli
Menyiapkan Lingkungan
Saat dijalankan untuk pertama kalinya, Bubblewrap akan menawarkan untuk otomatis mendownload dan menginstal dependensi eksternal yang diperlukan. Sebaiknya izinkan alat ini melakukannya karena hal ini menjamin bahwa dependensi dikonfigurasi dengan benar. Periksa dokumentasi Bubblewrap untuk menggunakan penginstalan alat command line Android atau Java Development Kit (JDK) yang ada.
Melakukan inisialisasi dan mem-build project
Memulai project Android yang menggabungkan PWA dilakukan dengan menjalankan perintah init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap akan membaca Manifes Web, meminta developer untuk mengonfirmasi nilai yang akan digunakan dalam project Android, dan membuat project menggunakan nilai tersebut. Setelah project dibuat, buat APK dengan menjalankan:
bubblewrap build
Jalankan
Langkah build akan menghasilkan file bernama app-release-signed.apk. File ini dapat diinstal di
perangkat pengembangan untuk pengujian atau diupload ke Play Store untuk dirilis.
Bubblewrap menyediakan perintah untuk menginstal dan menguji aplikasi di perangkat lokal. Dengan perangkat pengembangan yang terhubung ke komputer, jalankan:
bubblewrap install
Atau, alat adb dapat digunakan.
adb install app-release-signed.apk
Aplikasi kini akan tersedia di peluncur perangkat. Saat membuka aplikasi, Anda akan melihat bahwa situs Anda diluncurkan sebagai Tab Kustom, bukan Aktivitas Web Tepercaya, karena kami belum menyiapkan validasi Digital Asset Links, tetapi pertama-tama...
Alternatif Antarmuka Pengguna Grafis (GUI) untuk Bubblewrap
PWA Builder menyediakan antarmuka GUI yang menggunakan library Bubblewrap untuk mendukung pembuatan project Aktivitas Web Tepercaya. Temukan petunjuk selengkapnya tentang cara menggunakan PWA Builder untuk membuat Aplikasi Android yang membuka PWA Anda di postingan blog ini.
Catatan tentang kunci penandatanganan
Digital Asset Links mempertimbangkan kunci yang digunakan untuk menandatangani APK dan penyebab umum kegagalan verifikasi adalah penggunaan tanda tangan yang salah. (Ingat, verifikasi yang gagal berarti Anda akan meluncurkan situs sebagai Tab Kustom dengan UI browser di bagian atas halaman.) Saat Bubblewrap mem-build aplikasi, APK akan dibuat dengan penyiapan kunci selama langkah init. Namun, saat Anda memublikasikan aplikasi di Google Play, kunci lain mungkin dibuat untuk Anda, bergantung pada cara Anda memilih untuk menangani kunci penandatanganan. Pelajari lebih lanjut kunci penandatanganan dan hubungannya dengan Bubblewrap dan Google Play.
Menyiapkan file link aset
Digital Asset Links pada dasarnya terdiri dari file di situs Anda yang mengarah ke aplikasi dan beberapa metadata di aplikasi yang mengarah ke situs Anda.
Setelah membuat file assetlinks.json, upload file tersebut ke situs Anda di .well-known/assetlinks.json yang relatif terhadap root) agar aplikasi Anda dapat diverifikasi dengan benar oleh browser. Lihat pendalaman tentang Digital Asset Links untuk mengetahui informasi selengkapnya tentang hubungannya dengan kunci penandatanganan Anda.
Memeriksa browser Anda
Aktivitas Web Tepercaya akan mencoba mematuhi pilihan browser default pengguna. Jika browser default pengguna mendukung Aktivitas Web Tepercaya, browser tersebut akan diluncurkan. Jika tidak, browser yang diinstal yang mendukung Aktivitas Web Tepercaya akan dipilih. Terakhir, perilaku default-nya adalah kembali ke mode Tab Kustom.
Artinya, jika Anda men-debug sesuatu yang berkaitan dengan Aktivitas Web Tepercaya, Anda harus memastikan bahwa Anda menggunakan browser yang Anda pikir Anda gunakan. Anda dapat menggunakan perintah berikut untuk memeriksa browser yang digunakan:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Langkah Berikutnya
Semoga, jika telah mengikuti panduan ini, Anda akan memiliki Aktivitas Web Tepercaya yang berfungsi dan memiliki pengetahuan yang cukup untuk men-debug apa yang terjadi saat verifikasi gagal. Jika belum, lihat konsep Android lainnya untuk developer web atau laporkan masalah GitHub terkait dokumen ini.
Untuk langkah berikutnya, sebaiknya mulailah dengan membuat ikon untuk aplikasi Anda. Setelah itu, Anda dapat mempertimbangkan untuk men-deploy aplikasi ke Play Store.