Menambahkan Progressive Web App Anda ke Google Play

1. Selamat Datang

Dalam lab ini, Anda akan mengambil Progressive Web App yang sudah di-deploy dan membungkusnya dalam aplikasi untuk didistribusikan di Play Store Google.

Yang akan Anda pelajari

• Cara menggunakan Bubblewrap untuk mengemas Aplikasi Web Progresif Anda untuk Play Store Google
• Pengertian Kunci Penandatanganan dan cara menggunakannya
• Cara membuat aplikasi baru di Konsol Developer Google Play dan menyiapkan rilis pengujian untuk menguji aplikasi Anda sebelum dipublikasikan
• Pengertian Digital Asset Links dan cara menambahkannya ke aplikasi web Anda

Yang perlu Anda ketahui

• Apa itu Progressive Web App
• Cara menggunakan alat command line
• Perintah shell Bash dasar, atau cara menerjemahkannya ke shell pilihan Anda

Yang Anda butuhkan

• Aplikasi Web Progresif yang dipublikasikan secara langsung di internet dan dapat Anda ubah
• Antarmuka Command Line Bubblewrap telah diinstal dan siap digunakan
• Akun developer Google Play
• Kunci Penandatanganan yang ada, jika Anda sudah meluncurkan aplikasi di Google Play
• Perangkat Android atau ChromeOS untuk diuji

Yang tidak akan dicakup

• Membatasi PWA Anda hanya untuk perangkat Android atau hanya untuk perangkat ChromeOS
• Men-deploy PWA untuk ChromeOS dan aplikasi Android untuk perangkat seluler dalam aplikasi yang sama.
• Cara mematuhi kebijakan pembayaran Google Play di PWA Anda.

2. Membungkus PWA Anda dengan Bubblewrap

Bubblewrap adalah alat untuk membuat pembungkusan Progressive Web App Anda ke dalam Android App Bundle semudah menjalankan beberapa perintah CLI. Hal ini dilakukan dengan membuat project Android yang meluncurkan PWA Anda sebagai Aktivitas Web Tepercaya.

Sebelum Anda Memulai Jenis informasi apa yang mungkin dibutuhkan Bubblewrap tentang PWA Anda untuk membuat project Android?

Untuk memulai, buat direktori untuk project Anda dan pindahkan ke dalamnya:

$ mkdir my-pwa && cd my-pwa

Kemudian, jalankan alat command line Bubblewrap untuk membuat konfigurasi dan project Android untuk Android App Bundle yang akan Anda upload ke Play:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

Penting: Saat Bubblewrap dijalankan untuk pertama kalinya, Bubblewrap akan meminta untuk mendownload dependensi tambahan. Dependensi tersebut adalah Java Development Kit dan alat command line Android. Untuk memastikan versi yang benar didownload untuk setiap dependensi, sebaiknya izinkan Bubblewrap mendownload versi yang benar, bukan menggunakan versi yang sudah tersedia di komputer Anda.

Di sini, Bubblewrap diinisialisasi dengan lokasi file Manifes Aplikasi Web PWA. Tindakan ini akan menghasilkan konfigurasi default dari Manifes Aplikasi Web, dan memulai wizard dalam konsol yang akan memungkinkan Anda mengubah konfigurasi default. Ikuti wizard untuk mengubah nilai yang dihasilkan oleh alat.

Kunci Penandatanganan

Play Store Google mewajibkan paket aplikasi ditandatangani secara digital dengan sertifikat saat diupload, yang sering disebut sebagai kunci penandatanganan. Ini adalah sertifikat yang ditandatangani sendiri dan berbeda dengan sertifikat yang digunakan untuk menyajikan aplikasi Anda melalui HTTPS.

Bubblewrap akan meminta jalur untuk kunci saat membuat aplikasi. Jika menggunakan listingan Play Store yang sudah ada untuk aplikasi, Anda harus menambahkan jalur ke kunci yang sama yang digunakan oleh listingan tersebut.

Jika Anda tidak memiliki kunci penandatanganan yang ada dan membuat listingan baru di Play Store, Anda dapat menggunakan nilai default yang disediakan oleh Bubblewrap agar membuat kunci baru untuk Anda:

Penting: Pastikan kunci dan sandi Anda disimpan di tempat yang aman. Anda akan memerlukannya untuk membangun aplikasi pertama kali dan juga untuk mengupdate aplikasi Anda di Play Store secara rutin.

Output Bubblewrap

Setelah menginisialisasi project Bubblewrap dan menyelesaikan wizard, item berikut akan dibuat:

• twa-manifest.json - Konfigurasi project, yang mencerminkan nilai yang dipilih dalam wizard Bubblewrap. Anda harus melacak file ini dengan sistem kontrol versi, karena file ini dapat digunakan untuk membuat ulang seluruh project Bubblewrap jika diperlukan.
• File project Android - File yang tersisa di direktori adalah project Android yang dihasilkan. Project ini adalah sumber yang digunakan untuk perintah build Bubblewrap. Anda juga dapat melacak file ini dengan sistem kontrol versi.
• (Opsional) Kunci Penandatanganan - Jika Anda memilih agar Bubblewrap membuat kunci penandatanganan untuk Anda, kunci akan ditampilkan ke lokasi yang dijelaskan di wizard. Pastikan kunci disimpan di tempat yang aman dan batasi jumlah orang yang memiliki akses ke kunci tersebut; kunci ini digunakan untuk membuktikan bahwa aplikasi di Play Store berasal dari Anda.

Dengan file ini, kita sekarang memiliki semua yang kita butuhkan untuk membuat Android Application Bundle.

Membangun Android App Bundle Anda

Dari dalam direktori yang sama tempat Anda menjalankan perintah inisialisasi Bubblewrap, jalankan perintah berikut (Anda akan memerlukan sandi untuk kunci penandatanganan):

$ bubblewrap build

Perintah build akan menghasilkan dua file penting:

• app-release-bundle.aab - Android App Bundle PWA Anda. File ini adalah file yang akan Anda upload ke Google Play Store.
• app-release-signed.apk - Format pengemasan Android yang dapat digunakan untuk menginstal aplikasi langsung ke perangkat pengembangan menggunakan perintah bubblewrap install.

3. Coba - Bubblewrap

Sekarang giliran Anda! Dengan menggunakan apa yang Anda pelajari di langkah sebelumnya, coba selesaikan hal berikut:

1. Buat direktori untuk menyimpan project Android yang dihasilkan.
2. Lakukan inisialisasi direktori tersebut dengan Bubblewrap dan Manifes Aplikasi Web PWA Anda.
3. Buat Kunci Penandatanganan baru, atau gunakan kembali kunci yang sudah ada jika Anda memilikinya.
4. Bangun Android App Bundle Anda dari project Android yang dihasilkan.

4. Menambahkan Aplikasi Anda ke Google Play Store

Setelah memiliki Android App Bundle untuk PWA, sekarang saatnya menguploadnya ke Play Store Google. Setelah mendaftarkan akun developer, Anda dapat membuka Konsol Play untuk login dan memulai.

Sebelum Memulai: Apa saja jenis kunci penandatanganan yang perlu Anda buat untuk membuat rilis di Play?

Membuat Aplikasi

Setelah login, Anda akan melihat layar yang menampilkan semua aplikasi Anda. Di dekat bagian atas, ada tombol Buat aplikasi yang, jika diklik, akan menampilkan layar berikut untuk memandu Anda membuat listingan aplikasi Android baru.

Ada sejumlah kolom yang harus diisi di sini, termasuk nama aplikasi, bahasa default, apakah itu aplikasi atau game, apakah gratis atau berbayar, dan sejumlah pernyataan. Anda tidak akan dapat membuat aplikasi tanpa menyetujui pernyataan tersebut, jadi penting bagi Anda untuk membaca dan memahaminya sebelum menyetujuinya.

Meskipun diberi opsi untuk membuat aplikasi Anda gratis atau berbayar, PWA yang Anda gabungkan untuk disertakan di Play harus tersedia di Internet yang lebih luas agar dapat berfungsi, dan tidak ada cara untuk mendeteksi secara andal bahwa pengguna mengaksesnya dari aplikasi Anda, bukan dari browser atau metode penginstalan lain. Oleh karena itu, sebaiknya Anda memonetisasi PWA melalui cara selain mengenakan biaya untuk mendownloadnya dari toko.

Setelah mengisi semua informasi dan mengklik tombol Buat aplikasi di bagian bawah formulir, Anda akan diarahkan ke dasbor untuk aplikasi baru. Di dasbor, Anda akan melihat checklist tugas yang perlu diselesaikan untuk menyiapkan, memulai pengujian, dan merilis aplikasi.

Menyiapkan Pengujian Internal

Pengujian internal adalah cara yang tepat untuk merilis aplikasi Anda dengan cepat tanpa peninjauan kepada sekelompok penguji tepercaya yang Anda pilih. Lihat tugas dalam checklist Mulai pengujian sekarang, lalu pilih Pilih penguji.

Mengklik tugas tersebut akan mengarahkan Anda ke halaman Pengujian Internal. Di sinilah Anda akan mengelola penyiapan pengujian untuk aplikasi Anda. Anda dapat membukanya lagi dengan membuka bagian Pengujian di menu Rilis di sidebar. Hal pertama yang harus dilakukan di sini adalah membuat daftar email penguji untuk menguji aplikasi Anda. Untuk melakukannya, klik link Buat daftar email di bagian Penguji pada halaman. Tindakan ini akan membuka pop-up untuk membuat daftar email Anda.

Di jendela pop-up ini, Anda akan memberi nama daftar email, dan dapat memasukkan alamat email secara manual, atau mengupload CSV alamat email yang akan digunakan. Setelah selesai, tekan tombol Simpan perubahan. Anda dapat kembali ke daftar email yang telah dibuat untuk menambahkan atau menghapus alamat email sesuai kebutuhan. Setelah menambahkan penguji, saatnya membuat rilis pengujian. Klik tombol Buat rilis baru di bagian atas halaman.

Membuat Rilis Pengujian

Setelah mengklik tombol Buat rilis baru, Anda akan diminta untuk mengisi sejumlah bagian. Yang pertama, Integritas Aplikasi, adalah tempat Anda memilih cara mengelola kunci penandatanganan aplikasi. Opsi defaultnya adalah membiarkan Google mengelola kunci penandatanganan Anda, dan merupakan opsi yang direkomendasikan karena aman dan menjaga aplikasi Anda dapat dipulihkan jika Anda kehilangan kunci upload.

Penandatanganan Aplikasi Play

Penting: Mulai Agustus 2021, Penandatanganan Aplikasi Play diperlukan agar Play Store dapat mengelola dan melindungi penandatanganan akhir aplikasi Anda. Dengan Penandatanganan Aplikasi Play, Google akan mengelola dan melindungi kunci penandatanganan aplikasi Anda serta menggunakannya untuk menandatangani aplikasi Android Anda yang akan didistribusikan kepada pengguna. Kunci yang dibuat Bubblewrap untuk Anda akan menjadi kunci upload, bukan kunci penandatanganan. Meskipun Google mengelola kunci penandatanganan untuk Anda, Anda mengelola dan menjaga kerahasiaan kunci upload, yang Anda gunakan setiap kali Anda menandatangani aplikasi untuk diupload ke Konsol Play. Sistem ini memungkinkan Anda mereset kunci upload jika hilang atau disusupi, dengan menghubungi tim dukungan Play.

Upload dan Penyelesaian Aplikasi

Setelah memilih cara mengelola kunci penandatanganan, Anda akan diminta untuk mengupload app bundle ke rilis. Untuk melakukannya, tarik lalu lepas file app-release-bundle.aab yang dihasilkan Bubblewrap ke dalam formulir. Untuk menyelesaikan rilis, isi detail rilis yang tersisa dan klik tombol Simpan, lalu Tinjau rilis, dan terakhir Mulai peluncuran ke pengujian internal untuk memulai rilis. Tindakan ini akan membuat aplikasi Anda tersedia bagi penguji internal. Kembali ke tab Penguji di halaman Pengujian Internal, Anda dapat menyalin link untuk dibagikan kepada penguji agar mereka dapat mengakses aplikasi Anda.

Meskipun aplikasi pengujian tidak melalui proses peninjauan Play Store secara penuh, mungkin perlu waktu sebelum aplikasi tersebut tersedia untuk didownload dan diuji setelah Anda membuat dan meluncurkan rilis.

5. Coba - Buat Aplikasi

Sekarang giliran Anda! Dengan menggunakan apa yang Anda pelajari di langkah sebelumnya, coba selesaikan hal berikut:

1. Buat aplikasi baru untuk PWA Anda di Konsol Play.
2. Siapkan pengujian internal untuk aplikasi dan tambahkan diri Anda sebagai penguji.
3. Upload app bundle dan buat rilis pengujian untuk aplikasi Anda.
4. Instal aplikasi Anda dari Play Store di perangkat Android atau ChromeOS menggunakan link pengujian.

6. Digital Asset Links

Jika Anda telah menguji PWA di Play, Anda mungkin melihat bahwa PWA tidak berjalan dalam layar penuh. Hal ini karena Anda belum memverifikasi kepemilikan situs melalui file Digital Asset Links. Meskipun Bubblewrap dapat mengonfigurasi dan membuat paket aplikasi Android Anda, Anda harus menyelesaikan penautan dengan memperbarui aplikasi web Anda.

Sebelum Anda Memulai: Bagaimana Digital Asset Links dapat membuktikan bahwa aplikasi dan PWA Anda dimiliki oleh Anda?

Mendapatkan Sidik Jari SHA-256 Aplikasi Anda

Untuk mengonfigurasi Digital Asset Links PWA Anda, Anda memerlukan sidik jari SHA-256 untuk sertifikat yang digunakan untuk menandatangani paket yang diterima pengguna di ponselnya.

Dengan Penandatanganan Aplikasi Play

Jika Anda menyiapkan Penandatanganan Aplikasi Play untuk aplikasi saat membuat rilis (yang sebelumnya direkomendasikan), sidik jari SHA-256 dapat ditemukan di Konsol Play. Ingat, sertifikat ini berbeda dengan sertifikat yang digunakan untuk mengupload aplikasi Anda. Untuk mendapatkan sidik jari, dari dalam aplikasi Anda di Konsol Play, buka Rilis->Penyiapan->Integritas Aplikasi. Di sana, Anda akan melihat sejumlah opsi di bagian Sertifikat kunci penandatanganan aplikasi. Salin nilai sidik jari sertifikat SHA-256.

Tanpa Penandatanganan Aplikasi Play

Jika Anda memilih tidak menggunakan Penandatanganan Aplikasi Play, kunci yang digunakan untuk menandatangani aplikasi akhir akan sama dengan kunci yang Anda gunakan untuk mengupload aplikasi ke Konsol Play. Anda dapat menggunakan keytool Java untuk mengekstrak sidik jari:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Untuk menggunakannya, Anda harus mengetahui jalur ke kunci penandatanganan dan sandi yang relevan. Salin nilai heksadesimal kunci SHA256.

Membuat File Digital Asset Links Anda

Bubblewrap dapat mengelola sidik jari tanda tangan yang telah Anda ambil dan membuat file Digital Asset Links yang benar untuk Anda. Untuk menambahkan sidik jari dengan Bubblewrap, jalankan perintah berikut dari dalam direktori yang sama yang dibuat selama Membungkus PWA Anda dengan Bubblewrap, dengan mengganti <fingerprint> dengan sidik jari yang disalin dari langkah sebelumnya.

$ bubblewrap fingerprint add <fingerprint>

Perintah ini akan menambahkan sidik jari ke daftar sidik jari aplikasi dan membuat file assetlinks.json. Upload file ini ke direktori .well-known di asal yang sama dengan PWA Anda.

assetlinks.json harus ditempatkan di .well-known, harus diberi nama assetlinks.json, harus berada di origin yang sama dengan PWA Anda, dan oleh karena itu harus dapat diakses di my-pwa.origin/.well-known/assetlinks.json. Penyimpangan apa pun akan mencegahnya ditemukan dan ditautkan dengan benar ke aplikasi Anda. Anda dapat memverifikasi bahwa Digital Asset Link Anda telah disiapkan dengan benar menggunakan Digital Asset Links API.

7. Coba - Digital Asset Links

Sekarang giliran Anda! Dengan menggunakan apa yang Anda pelajari di langkah sebelumnya, coba selesaikan hal berikut:

1. Temukan sidik jari SHA-256 aplikasi Anda.
2. Buat file Digital Asset Links untuk aplikasi Anda.
3. Upload file Digital Asset Links ke PWA Anda.
4. Pastikan file Digital Asset Links Anda disiapkan dengan benar menggunakan API dan aplikasi pengujian Anda.

8. Uji Pengetahuan Anda

Sebelum selesai, uji pengetahuan Anda dan lihat apa yang telah Anda pelajari dengan menjawab pertanyaan berikut. Jangan mengintip jawabannya!

Setelah membuat project Android-nya dengan Bubblewrap, Sally melakukan commit pada file ______ yang dihasilkan ke sistem kontrol versinya sehingga dia dapat membangunnya kembali kapan pun dia perlu.

twa-manifest.json kunci penandatanganan app-release-bundle.aab build.gradle

Jack ingin tim QA-nya menguji aplikasi Android PWA-nya. Dia ______ Android App Bundle-nya ke Jalur Pengujian Internal.

mengupload membangun dan mengupload merilis menandatangani dan mengupload

Aplikasi Android PWA Oogie Boogie tidak berjalan dalam layar penuh. Untuk memperbaikinya, mereka mendapatkan sidik jari sertifikat SHA-256 untuk ______ dan menguploadnya ke file Digital Asset Links yang berada di ______ dengan origin yang sama seperti PWA mereka.

kunci upload, /.well-known/assetlinks.json kunci upload, /assetlinks.json kunci penandatanganan, /.well-known/assetlinks.json kunci penandatanganan, /assetlinks.json

9. Uji Pengetahuan Anda - Jawaban

Jawaban untuk pertanyaan Uji Pengetahuan Anda!

1. Setelah membuat project Android-nya dengan Bubblewrap, Sally melakukan commit pada file ______ yang dihasilkan ke sistem kontrol versinya sehingga dia dapat membangunnya kembali kapan pun dia perlu.
   • Jawaban: twa-manifest.json
   • Bagian: Membungkus PWA Anda dengan Bubblewrap
2. Jack ingin tim QA-nya menguji aplikasi Android PWA-nya. Dia ______ Android App Bundle-nya ke Jalur Pengujian Internal.
   • Jawaban: menandatangani dan mengupload
   • Bagian: Menambahkan Aplikasi Anda ke Google Play Store
3. Aplikasi Android PWA Oogie Boogie tidak berjalan dalam layar penuh. Untuk memperbaikinya, mereka mendapatkan sidik jari sertifikat SHA-256 untuk ______ dan menguploadnya ke file Digital Asset Links yang berada di ______ dengan origin yang sama seperti PWA mereka.
   • Jawaban: kunci penandatanganan, /.well-known/assetlinks.json
   • Bagian: Digital Asset Links

10. Selamat!

Selamat! Anda telah berhasil mempelajari cara menambahkan PWA ke Play Store Google.

Jika Anda merasa siap melakukannya, coba langkah-langkah selanjutnya berikut sendiri:

• Membuat rilis produksi aplikasi
• Pelajari lebih lanjut opsi lainnya untuk merilis aplikasi Anda, termasuk rilis khusus ChromeOS dan rilis yang menyertakan aplikasi Android untuk perangkat seluler dan PWA untuk ChromeOS.
• Pelajari cara menyiapkan Layanan Penagihan Play untuk aplikasi Anda dan menerapkannya di PWA dan di backend.

Selamat membuat kode!