Panduan Memulai Cepat

Peter Conn
Peter Conn

Aktivitas Web Tepercaya dapat sedikit sulit disiapkan, terutama jika Anda hanya ingin menampilkan situs Anda. Panduan ini akan memandu Anda dalam membuat project dasar yang menggunakan Aktivitas Web Tepercaya, yang mencakup semua gocha.

Di akhir panduan ini, Anda akan:

  • Telah menggunakan Bubblewrap untuk membangun aplikasi yang menggunakan Aktivitas Web Tepercaya dan lulus verifikasi.
  • Ketahui kapan kunci penandatanganan Anda digunakan.
  • Dapat menentukan tanda tangan yang digunakan untuk membangun Aplikasi Android Anda.
  • Mengetahui cara membuat file Digital Asset Links dasar.

Untuk mengikuti panduan ini, Anda perlu:

  • Node.js 10 atau yang lebih baru diinstal di komputer pengembangan.
  • Ponsel atau emulator Android terhubung dan disiapkan untuk pengembangan (Aktifkan proses debug USB jika Anda menggunakan ponsel fisik).
  • Browser yang mendukung Aktivitas Web Tepercaya pada ponsel pengembangan Anda. Chrome 72 atau yang lebih baru akan berfungsi. Dukungan di browser lain sedang dalam proses.
  • 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 terbatas 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 proses check out Digital Asset Links disebut verifikasi. Jika verifikasi gagal, browser akan kembali menampilkan situs Anda sebagai Tab Kustom.

Menginstal dan mengonfigurasikan Bubblewrap

Bubblewrap adalah sekumpulan library dan alat command line (CLI) untuk Node.js yang membantu developer membuat, membangun, dan menjalankan Progressive Web App di dalam aplikasi Android, menggunakan Aktivitas Web Tepercaya.

CLI ini dapat diinstal dengan perintah berikut:

npm i -g @bubblewrap/cli

Menyiapkan Lingkungan

Saat menjalankan Bubblewrap untuk pertama kalinya, Bubblewrap akan menawarkan untuk mendownload dan menginstal dependensi eksternal yang diperlukan secara otomatis. Sebaiknya izinkan alat melakukannya karena hal ini menjamin bahwa dependensi dikonfigurasi dengan benar. Periksa dokumentasi Bubblewrap untuk menggunakan penginstalan alat command line Android (Java Development Kit (JDK)) atau Android yang sudah ada.

Menginisialisasi dan membangun 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 mengonfirmasi nilai yang akan digunakan dalam project Android, dan membuat project menggunakan nilai tersebut. Setelah project dibuat, buat APK dengan menjalankan:

bubblewrap build

Menjalankan

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 memberikan perintah untuk menginstal dan menguji aplikasi pada perangkat lokal. Dengan perangkat pengembangan yang terhubung ke komputer, jalankan:

bubblewrap install

Atau, alat adb dapat digunakan.

adb install app-release-signed.apk

Sekarang aplikasi seharusnya sudah tersedia di peluncur perangkat. Saat membuka aplikasi, Anda akan melihat bahwa situs diluncurkan sebagai Tab Khusus, bukan Aktivitas Web Tepercaya. Hal ini disebabkan karena kita belum menyiapkan validasi Digital Asset Links, namun terlebih dahulu...

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 lebih lanjut 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 telah ditandatangani dengan APK dan penyebab umum kegagalan verifikasi adalah menggunakan tanda tangan yang salah. (Ingat, jika verifikasi gagal berarti Anda akan meluncurkan situs sebagai Tab Khusus dengan UI browser di bagian atas halaman.) Ketika Bubblewrap membangun aplikasi, APK akan dibuat dengan penyiapan kunci selama langkah init. Namun, saat Anda memublikasikan aplikasi di Google Play, kunci lain mungkin akan dibuat untuk Anda, bergantung pada cara Anda memilih untuk menangani kunci penandatanganan. Pelajari lebih lanjut cara menandatangani kunci dan kaitannya dengan Bubblewrap dan Google Play.

Digital Asset Links pada dasarnya terdiri dari file di situs Anda yang mengarah ke aplikasi Anda dan beberapa metadata di aplikasi yang mengarah ke situs Anda.

Setelah membuat file assetlinks.json, upload ke situs Anda di .well-known/assetlinks.json yang relatif terhadap root) agar aplikasi Anda dapat diverifikasi dengan benar oleh browser. Baca penjelasan mendalam tentang Digital Asset Links untuk mengetahui informasi selengkapnya tentang kaitannya 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 akan diluncurkan. Jika tidak, browser yang terinstal akan dipilih jika ada yang mendukung Aktivitas Web Tepercaya. Terakhir, perilaku default adalah kembali ke mode Tab Khusus.

Artinya, jika Anda men-debug sesuatu yang berkaitan dengan Aktivitas Web Tepercaya, sebaiknya pastikan Anda menggunakan browser yang Anda inginkan. Anda dapat menggunakan perintah berikut untuk memeriksa browser mana yang sedang 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 cukup pengetahuan untuk men-debug apa yang terjadi saat verifikasi gagal. Jika belum, lihat konsep Android untuk developer web lainnya atau ajukan masalah GitHub pada dokumen ini.

Untuk langkah selanjutnya, sebaiknya mulai dengan membuat ikon untuk aplikasi Anda. Setelah itu, Anda dapat mempertimbangkan untuk men-deploy aplikasi ke Play Store.