Menambahkan Progressive Web App ke Google Play

1. Selamat datang

Di lab ini, Anda akan menggunakan Progressive Web App yang sudah ada, yang telah Anda deploy dan gabungkan ke aplikasi untuk didistribusikan di Google Play Store.

Yang akan Anda pelajari

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

Yang perlu Anda ketahui

Yang Anda butuhkan

  • Progressive Web App yang dipublikasikan di internet dan Anda dapat mengubah
  • Bubblewrap Command Line Interface sudah terinstal dan siap digunakan
  • Akun developer Google Play
  • Kunci Penandatanganan yang ada, jika Anda sudah memiliki aplikasi yang diluncurkan di Google Play
  • Perangkat Android atau Chrome OS untuk diuji

Apa yang tidak akan dicakup

2. Bubblewrap yang menggabungkan PWA Anda

Bubblewrap adalah alat untuk menggabungkan 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.

Untuk memulai, buat direktori project Anda agar dapat tinggal di dalamnya dan memindahkannya ke:

$ 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

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

Wizard Bubblewrap CLI yang menampilkan inisialisasi dari airhorner dengan domain diganti dengan example..com dan URL awal diganti.

Kunci Penandatanganan

Google Play Store mewajibkan paket aplikasi ditandatangani secara digital dengan sertifikat saat diupload, sering kali disebut sebagai kunci penandatanganan. Ini adalah sertifikat yang ditandatangani sendiri dan berbeda dengan yang digunakan untuk menayangkan 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 dengan yang digunakan oleh listingan tersebut.

Wizard Balonwrap meminta lokasi dan nama kunci penandatanganan yang sudah ada milik pengguna.

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

Wizard Bubblewrap CLI yang menanyakan apakah pengguna ingin membuat kunci penandatanganan baru.

Output Bubblewrap

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

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

Dengan file-file ini, sekarang kita memiliki semua yang dibutuhkan untuk membangun Android Application Bundle.

Membuat Android App Bundle

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

$ bubblewrap build

Output CLI Bubblewrap untuk mem-build project, meminta sandi untuk kunci penandatanganan, dan menampilkan pembuatan aplikasi Android versi lain.

Perintah build akan menghasilkan dua file penting:

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

3. Coba Sekarang - Bubblewrap

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

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

4. Menambahkan Aplikasi Anda ke Play Store Google

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

Membuat Aplikasi

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

Layar yang menunjukkan formulir Buat aplikasi Konsol Play.

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

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

Menyiapkan Pengujian Internal

Pengujian internal merupakan cara yang bagus untuk merilis aplikasi dengan cepat tanpa meninjau sekelompok penguji tepercaya yang Anda pilih. Lihat tugas di checklist Mulai pengujian sekarang, lalu pilih Pilih penguji.

Mulai checklist sekarang

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 pada menu Rilis di sidebar. Hal pertama yang harus dilakukan di sini adalah membuat daftar email penguji untuk menguji aplikasi Anda. Untuk melakukannya, klik tautan Buat daftar email di bagian Penguji di halaman. Ini akan membuka pop-up untuk membuat daftar email Anda.

Pop-up yang menunjukkan formulir buat daftar email, yang mencakup nama daftar, alamat email, link untuk mengupload file CSV alamat email, dan area untuk menampilkan alamat email yang diupload.

Dalam 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 Save changes. Anda dapat kembali ke daftar email yang telah dibuat untuk menambahkan atau menghapus alamat email sesuai kebutuhan. Setelah menambahkan penguji, saatnya untuk membuat rilis pengujian. Klik tombol Buat rilis baru di bagian atas halaman.

Halaman pengujian internal dengan panah yang menunjuk ke tombol buat rilis baru.

Membuat Rilis Pengujian

Setelah mengklik tombol Buat rilis baru, Anda akan diminta melalui sejumlah bagian. Bagian pertama, Integritas Aplikasi, adalah tempat Anda memilih cara mengelola kunci penandatanganan aplikasi. Opsi default adalah mengizinkan Google mengelola kunci penandatanganan, dan merupakan opsi yang direkomendasikan karena aman dan membuat aplikasi dapat dipulihkan jika kunci upload hilang.

Penandatanganan Aplikasi Play

Diagram alir yang menunjukkan, dari kiri ke kanan, developer dan kunci upload mereka yang kemudian menandatangani aplikasi dan mengirimkannya ke Google. Kemudian, Google memiliki kunci penandatanganan aplikasi dan menandatangani aplikasi dengan kunci tersebut, lalu mengirimkannya kepada pengguna

Finalisasi dan Upload Aplikasi

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

Halaman pengujian internal, dengan panah yang mengarah ke link salin link untuk membagikan link pengujian kepada penguji.

5. Coba Sekarang - Membuat Aplikasi

Sekarang giliran Anda. Dengan menggunakan apa yang telah 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 Anda dan buat rilis pengujian untuk aplikasi Anda.
  4. Instal aplikasi Anda dari Play Store di perangkat Android atau Chrome OS menggunakan link pengujian.

6. Digital Asset Links

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

Dapatkan Sidik Jari SHA-256 Aplikasi Anda

Untuk mengonfigurasi Link Aset Digital PWA, 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 yang digunakan untuk mengupload aplikasi Anda. Untuk mendapatkan sidik jari, dari dalam aplikasi Anda di Konsol Play, buka Releases->Setup->App Integrity. Di sana, Anda akan melihat sejumlah opsi pada Sertifikat kunci penandatanganan aplikasi. Salin nilai dari sidik jari sertifikat SHA-256.

Layar Integritas Aplikasi dengan sidik jari sertifikat SHA-256 ditandai.

Tanpa Penandatanganan Aplikasi Play

Jika Anda memilih tidak ikut 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 perlu mengetahui jalur ke kunci penandatanganan dan sandi yang relevan. Salin nilai heksadesimal kunci SHA256.

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 Bubblewrapping PWA Anda, ganti <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.

7. Coba Sekarang - Link Aset Digital

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

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

8 Menguji Pengetahuan Anda

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

Setelah membuat project Android dengan Bubblewrap, Sally melakukan commit pada file ______ yang dihasilkan ke sistem kontrol versinya sehingga dia dapat membuat ulang file tersebut kapan pun ia membutuhkannya.

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

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

upload build dan upload rilis tanda tangan dan upload

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 ada di ______ dengan asal yang sama dengan PWA mereka.

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

9. Menguji Pengetahuan Anda - Jawaban

Jawaban untuk pertanyaan Uji Pengetahuan Anda!

  1. Setelah membuat project Android dengan Bubblewrap, Sally melakukan commit pada file ______ yang dihasilkan ke sistem kontrol versinya sehingga dia dapat membuat ulang file tersebut kapan pun ia membutuhkannya.
  2. Jack sedang meminta tim QA untuk menguji aplikasi Android PWA-nya. Dia ______ Android App Bundle ke Jalur Pengujian Internal.
  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 ada di ______ dengan asal yang sama dengan PWA mereka.
    • Jawaban: kunci penandatanganan, /.well-known/assetlinks.json
    • Bagian: Link Aset Digital

10. Selamat!

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

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

Selamat membuat kode!