Cara Mendapatkan Aplikasi Web Progresif Ke Google Play Store

PWA (Progresif Web Apps) telah bersama kami untuk beberapa waktu sekarang. Namun, setiap kali saya cuba menerangkannya kepada pelanggan, soalan yang sama muncul: "Adakah pengguna saya dapat memasang aplikasi menggunakan kedai aplikasi?" Jawapannya secara tradisinya tidak, tetapi ini berubah dengan Chrome 72 yang menghantar ciri baru yang dipanggil TWA (Aktiviti Web yang Dipercayai).

Aktiviti web yang dipercayai adalah cara baru untuk mengintegrasikan kandungan aplikasi web anda seperti PWA anda dengan aplikasi YourAndroid menggunakan protokol berdasarkan tab tersuai.

Dalam artikel ini, saya akan menggunakan PWA sedia ada NetGuru (WordGuru) dan menerangkan langkah demi langkah apa yang perlu dilakukan untuk menjadikan aplikasi itu tersedia dan siap dipasang terus dari Google Play App Store.

Beberapa perkara yang kami sampaikan di sini mungkin terdengar bodoh kepada mana-mana pemaju Android di luar sana, tetapi artikel ini ditulis dari perspektif pemaju front-end, terutama yang tidak pernah menggunakan Android Studio atau membuat aplikasi Android. Juga, sila ambil perhatian bahawa banyak perkara yang kami tutupi di sini masih sangat eksperimen kerana ia terhad kepada Chrome 72.

Langkah 1: Sediakan aktiviti web yang dipercayai

Menyediakan TWA tidak memerlukan anda menulis sebarang kod Java, tetapi anda perlu mempunyai Android Studio. Sekiranya anda telah membangunkan perisian iOS atau MAC sebelum ini, ini banyak seperti Xcode kerana ia menyediakan persekitaran pembangunan yang baik yang direka untuk menyelaraskan pembangunan Android. Jadi, ambil itu dan temui saya kembali ke sini.

Buat projek TWA baru di Android Studio

Adakah anda mendapat Android Studio? Nah, saya tidak boleh mendengar atau melihat anda, jadi saya akan menganggap anda melakukannya. Teruskan dan retaknya, kemudian klik pada "Mulakan Projek Studio Android Baru." Dari sana, mari kita pilih pilihan "Tambah No Activity", yang membolehkan kita mengkonfigurasi projek.

Konfigurasi ini agak mudah, tetapi selalu baik untuk mengetahui apa yang:

• Nama nama permohonan (tetapi saya yakin anda tahu itu).
• Nama Pakej: Pengenalpastian aplikasi Android di kedai Play. Ia mesti unik, jadi saya cadangkan menggunakan URL PWA dalam urutan terbalik (contohnya com.netguru.wordguru).
• Simpan Lokasi: Di ​​mana projek itu akan wujud di dalam negara.
• Bahasa: Ini membolehkan kami memilih bahasa kod tertentu, tetapi tidak perlu untuk itu kerana aplikasi kami sudah, anda tahu, ditulis. Kita boleh meninggalkan ini di Java, yang merupakan pemilihan lalai.
• Tahap API Minimum: Ini adalah versi API Android yang kami bekerjasama dan diperlukan oleh Perpustakaan Sokongan (yang akan kami sampaikan seterusnya). Mari kita gunakan API 19.

Terdapat beberapa kotak semak di bawah pilihan ini. Mereka tidak relevan untuk kami di sini, jadi biarkan mereka semua tidak terkawal, kemudian teruskan untuk selesai.

Tambahkan Perpustakaan Sokongan TWA

Perpustakaan sokongan diperlukan untuk TWA s. Berita baiknya ialah kita hanya perlu mengubah suai dua fail untuk memenuhi keperluan itu dan kedua -duanya hidup dalam direktori projek yang sama: Skrip Gradle. Kedua -duanya dinamakan Build.gradle, tetapi kita boleh membezakan yang mana dengan melihat penerangan dalam kurungan.

Terdapat pengurus pakej git yang dipanggil JITPack yang dibuat khusus untuk aplikasi Android. Ia cukup mantap, tetapi garis bawah adalah bahawa ia menjadikan penerbitan aplikasi web kami menjadi angin. Ia adalah perkhidmatan yang dibayar, tetapi saya katakan ia bernilai kos jika ini adalah kali pertama anda mendapatkan sesuatu ke kedai Google Play.

Nota Editor: Ini bukan palam yang ditaja untuk JITPack. Ia patut dipanggil kerana siaran ini mengandaikan kebiasaan kecil dengan aplikasi Android atau menyerahkan aplikasi ke Google Play dan ia kurang geseran untuk menguruskan repo aplikasi Android yang menghubungkan terus ke kedai. Yang berkata, ia bukan satu keperluan.

Sebaik sahaja anda berada di Jitpack, mari kita sambungkan projek kami. Buka Fail Build.gradle (Projek: WordGuru) Kami hanya melihat dan memberitahu untuk melihat Jitpack untuk repositori aplikasi:

 AllProjects {
  repositori {
    …
    Maven {url 'https://jitpack.io'}
    …
  }
}

Ok, sekarang mari kita buka fail binaan lain yang lain. Di sinilah kita boleh menambah sebarang kebergantungan yang diperlukan untuk projek ini dan kita memang mempunyai satu:

 // Build.Gradle (Modul: App)

kebergantungan {
  …
  Pelaksanaan 'com.github.googlechrome: custom-tabs-client: a0f7418972'
  …
}

Perpustakaan TWA menggunakan ciri -ciri Java 8, jadi kami akan memerlukan Java 8.

 // Build.Gradle (Modul: App)

Android {
  …
  CompileOptions {
    Sourcecompatiibility Javaversion.Version_1_8
    TargetCompatibility Javaversion.Version_1_8
  }
  …
}

Terdapat juga pembolehubah yang dipanggil Pemegang Manifestplace yang akan kami sampaikan di bahagian seterusnya. Buat masa ini, mari tambahkan perkara berikut untuk menentukan di mana aplikasi dihoskan, URL lalai dan nama aplikasi:

 // Build.Gradle (Modul: App)

Android {
  …
  DefaultConfig {
    …
    ManifestPlaceholders = [
      HostName: "wordguru.netguru.com",
      DefaultUrl: "https://wordguru.netguru.com",
      LauncherName: "Wordguru"
    ]
    …
  }
  …
}

Sediakan butiran aplikasi dalam aplikasi Android Manifes

Setiap aplikasi Android mempunyai aplikasi Android Manifest (androidmanifest.xml) yang memberikan butiran penting mengenai aplikasi, seperti sistem operasi yang terikat dengan, maklumat pakej, keserasian peranti, dan banyak perkara lain yang membantu Google Play memaparkan keperluan aplikasi.

Perkara yang kita benar -benar bimbang di sini adalah aktiviti (). Inilah yang melaksanakan antara muka pengguna dan diperlukan untuk "aktiviti" dalam "aktiviti web yang dipercayai."

Sudah cukup lucu, kami memilih pilihan "Tambah No Activity" semasa menubuhkan projek kami di Android Studio dan itu kerana manifes kami kosong dan hanya mengandungi tag aplikasi.

Mari kita mulakan dengan membuka fail manfifest. Kami akan menggantikan nama pakej sedia ada dengan ID aplikasi kami sendiri dan label dengan nilai dari pembolehubah Pemegang ManifestPlace yang kami tentukan dalam bahagian sebelumnya.

Kemudian, kami akan menambah aktiviti TWA dengan menambahkan tag di dalam tag .

<!-- manifests/AndroidManifest.xml -->

<manifest xmlns: andro pakej="com.netguru.wordguru"> // sorotan

  <permohonan android: allowbackup="Benar" icon="@mipmap/ic_launcher" label="$ {launchername}" sorotan supportsrtl="true" tema="@style/apptheme">

    <aktiviti android: name="android.support.customtabs.trusted.launcheractivity" label="$ {launchername}"> // sorotan

      <meta-data android: name="android.support.customtabs.trusted.default_url" value="$ {defaultUrl}"></meta-data> // sorotan

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      <intent-filter>
        <action android: name="android.intent.action.main"></action>
        <kategori android: name="android.intent.category.launcher"></kategori>
      

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      <intent-filter android: autovery="True">
        <action android: name="android.intent.action.view"></action>
        <kategori android: name="android.intent.category.default"></kategori>
        <kategori android: name="android.intent.category.browsable"></kategori>
        <data android: skema="HTTPS" host="$ {hostname}"></data> // sorotan
      
    </intent-filter></intent-filter></aktiviti>
  
</permohonan></manifest>

Dan itu, kawan -kawan saya, adalah langkah 1. Mari kita beralih ke langkah 2.

Langkah 2: Sahkan hubungan antara laman web dan aplikasinya

TWA s memerlukan sambungan antara aplikasi Android dan PWA. Untuk melakukan itu, kami menggunakan pautan aset digital.

Sambungan mesti ditetapkan pada kedua -dua hujung, di mana TWA adalah aplikasi dan PWA adalah laman web.

Untuk menubuhkan sambungan itu, kita perlu mengubah suai pemegang manifestlplace kita lagi. Kali ini, kita perlu menambah elemen tambahan yang dipanggil AssetStatements yang menyimpan maklumat mengenai PWA kami.

 // Build.Gradle (Modul: App)

Android {
  …
  DefaultConfig {
    …
    ManifestPlaceholders = [
      …
      AssetStatements: '[{"Hubungan": ["Delegate_permission/Common.Handle_all_urls"],'  
        '"sasaran": {"namespace": "web", "site": "https://wordguru.netguru.com"}}]'
      …
    ]
    …
  }
  …
}

Sekarang, kita perlu menambah tag meta-data baru ke tag aplikasi kami. Ini akan memaklumkan aplikasi Android bahawa kami ingin mewujudkan hubungan dengan aplikasi yang ditentukan dalam Pemegang Manifestplace.

<!-- manifests/AndroidManifest.xml -->

<manifest xmlns: andro pakej="$ {PackageId}">

  <mohon>
    …
      <meta-data android: name="Asset_Statements" value="$ {AssetStatements}"></meta-data>
    …
  
</mohon></manifest>

Itu sahaja! Kami hanya menubuhkan permohonan untuk hubungan laman web. Sekarang mari kita melompat ke dalam penukaran laman web untuk permohonan.

Untuk mewujudkan sambungan ke arah yang bertentangan, kita perlu membuat fail .json yang akan tersedia di Path App /.Well-welly/assetlinks.json. Fail ini boleh dibuat menggunakan penjana yang dibina ke Android Studio. Lihat, saya memberitahu anda Android Studio membantu menyelaraskan perkembangan Android!

Kami memerlukan tiga nilai untuk menghasilkan fail:

• Hosting Site Domain: Ini adalah URL PWA kami (contohnya https://wordguru.netguru.com/).
• Nama Pakej App: Ini adalah nama pakej TWA kami (misalnya com.netguru.wordguru).
• App Package Cap jari (SHA256): Ini adalah hash kriptografi yang unik yang dihasilkan berdasarkan Google Play Store Keystore.

Kami sudah mempunyai nilai pertama dan kedua. Kita boleh mendapatkan yang terakhir menggunakan Android Studio.

Mula -mula kita perlu menjana APK yang ditandatangani. Di studio Android pergi ke: Bina → Menjana bundle yang ditandatangani atau APK → APK .

Seterusnya, gunakan KeyStore yang sedia ada, jika anda sudah mempunyai satu. Jika anda memerlukannya, pergi ke "Buat Baru ..." pertama.

Kemudian mari kita isi borang. Pastikan untuk mengingati kelayakan kerana mereka adalah apa yang akan ditandatangani permohonan itu dan mereka mengesahkan pemilikan permohonan anda.

Ini akan membuat fail utama yang diperlukan untuk menjana cap jari pakej aplikasi (SHA256). Fail ini sangat penting kerana ia berfungsi sebagai bukti bahawa anda adalah pemilik permohonan. Jika fail ini hilang, anda tidak akan dapat melakukan kemas kini lanjut ke aplikasi anda di kedai.

Seterusnya, mari pilih jenis bundle. Dalam kes ini, kami memilih "melepaskan" kerana ia memberi kami satu bundle pengeluaran. Kami juga perlu menyemak versi tandatangan.

Ini akan menjana APK kami yang akan digunakan kemudian untuk membuat pelepasan di Google Play Store. Selepas membuat kedai utama kami, kami boleh menggunakannya untuk menjana cap jari pakej aplikasi yang diperlukan (SHA256).

Mari kembali ke Android Studio, dan pergi ke Alat → Pembantu Pautan App . Ini akan membuka bar sisi yang menunjukkan langkah -langkah yang diperlukan untuk mewujudkan hubungan antara aplikasi dan laman web. Kami mahu pergi ke Langkah 3, "Mengisytiharkan Persatuan Laman Web" dan mengisi data yang diperlukan: domain tapak dan ID aplikasi. Kemudian, pilih fail utama kedai yang dijana pada langkah sebelumnya.

Selepas mengisi borang Tekan "Menjana Fail Pautan Aset Digital" yang akan menghasilkan fail Assetlinks.json kami. Sekiranya kita membukanya, ia harus kelihatan seperti ini:

 [{
  "Hubungan": ["Delegate_permission/common.handle_all_urls"],
  "Sasaran": {
    "ruang nama": "android_app",
    "Package_name": "com.netguru.wordguru",
    "sha256_cert_fingerprints": ["8a: f4: ....: 29:28"]
  }
}]

Ini adalah fail yang perlu kami sediakan di dalam aplikasi kami /.well-welly/assetlinks.json Path. Saya tidak akan menerangkan bagaimana untuk menjadikannya tersedia di jalan itu kerana ia terlalu khusus projek dan di luar skop artikel ini.

Kami boleh menguji hubungan dengan mengklik butang "Pautan dan Sahkan". Sekiranya semuanya berjalan lancar, kami mendapat pengesahan dengan "Kejayaan!"

Yay! Kami telah menjalin hubungan dua hala antara aplikasi Android kami dan PWA kami. Ini semua menurun dari sini, jadi mari kita pulang ke rumah.

Langkah 3: Dapatkan aset yang diperlukan

Google Play memerlukan beberapa aset untuk memastikan aplikasinya dibentangkan dengan baik di kedai. Khususnya, inilah yang kita perlukan:

• Ikon aplikasi: Kami memerlukan pelbagai saiz, termasuk 48 × 48, 72 × 72, 96 × 96, 144 × 144, 192 × 192 ... atau kita boleh menggunakan ikon penyesuaian.
• Ikon tinggi: Ini adalah imej 512 × 512 PNG yang digunakan di seluruh kedai.
• Ciri Grafik: Ini adalah sepanduk PNG 1024 × 500 JPG atau 24-bit (tiada alpha) yang digunakan oleh Google Play pada paparan butiran aplikasi.
• Tangkapan skrin: Google Play akan menggunakannya untuk memamerkan pandangan yang berbeza dari aplikasi yang pengguna dapat menyemak sebelum memuat turunnya.

Mempunyai semua itu, kami boleh meneruskan ke konsol pemaju Google Play Store dan menerbitkan aplikasi!

Langkah 4: Terbitkan ke Google Play!

Mari pergi ke langkah terakhir dan akhirnya tolak aplikasi kami ke kedai.

Menggunakan APK yang kami hasilkan sebelumnya (yang terletak di direktori AndroidStudiOprojects), kami perlu pergi ke konsol Google Play untuk menerbitkan aplikasi kami. Saya tidak akan menerangkan proses menerbitkan aplikasi di kedai sebagai wizard menjadikannya cukup mudah dan kami diberikan bimbingan langkah demi langkah sepanjang proses.

Ia mungkin mengambil masa beberapa jam untuk permohonan itu dikaji semula dan diluluskan, tetapi apabila ia akhirnya akan muncul di kedai.

Jika anda tidak dapat mencari APK, anda boleh membuat yang baru dengan pergi ke Build → Menjana Bundle / APK yang Ditandatangani → Membina APK , lulus fail Keystore sedia ada kami dan mengisi alias dan kata laluan yang kami gunakan apabila kami menjana kedai utama. Selepas APK dijana, notis harus muncul dan anda boleh sampai ke fail dengan mengklik pada pautan "Cari".

Tahniah, aplikasi anda berada di Google Play!

Itu sahaja! Kami hanya menolak PWA kami ke kedai Google Play. Proses ini tidak begitu intuitif seperti yang kita mahu, tetapi masih, dengan sedikit usaha ia pasti boleh dilakukan, dan percayalah, ia memberikan pengisian yang hebat pada akhirnya apabila anda melihat aplikasi anda dipaparkan di alam liar.

Perlu dinyatakan bahawa ciri ini masih menjadi fasa awal dan saya akan menganggapnya percubaan untuk beberapa waktu. Saya tidak akan mengesyorkan dengan pelepasan pengeluaran aplikasi anda sekarang kerana ini hanya berfungsi dengan Chrome 72 dan ke atas - mana -mana versi sebelum yang akan dapat memasang aplikasinya, tetapi aplikasi itu sendiri akan terhempas dengan serta -merta yang bukan pengalaman pengguna yang terbaik.

Juga, pelepasan rasmi Custom-Tabs-Client tidak menyokong TWA lagi. Sekiranya anda tertanya -tanya mengapa kami menggunakan pautan GitHub mentah dan bukannya pelepasan perpustakaan rasmi, itulah sebabnya.

Atas ialah kandungan terperinci Cara Mendapatkan Aplikasi Web Progresif Ke Google Play Store. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!