Menerbitkan PWA ke Toko Aplikasi Utama: Mengapa dan Bagaimana

Dimulai dengan Google Play Store, satu demi satu pasar aplikasi ikut-ikutan menyambut Progressive Web Apps (Apa itu Progressive Web App?) ke dalam toko mereka, menjadikannya pendekatan baru untuk pengiriman perangkat lunak. Dengan semua ini dalam bermain, akan sia-sia untuk tidak memanfaatkan teknologi yang baru ditemukan ini untuk memperluas jangkauan aplikasi Anda dengan lebih baik.

Untuk memberi Anda perspektif yang lebih jelas tentang seluruh gerakan Aplikasi Web Progresif, khususnya proses publikasi, hari ini kami akan meninjau status PWA saat ini di pasar aplikasi utama serta cara menerbitkan PWA ke toko tersebut.

Mengapa Anda harus mempublikasikan Aplikasi Web Progresif Anda ke toko aplikasi utama?

Dulu Progressive Web Apps terbatas pada instalasi web (Tambahkan ke Layar Utama) saja. Namun, seiring berjalannya waktu, pasar aplikasi seperti Google dan Microsoft mulai mengenali potensi PWA dan membuat inisiatif untuk memajukan adopsi teknologi ini di masa depan.

Jika Anda memiliki kemampuan dan dana, pendapat profesional kami adalah Anda harus melakukannya—jadikan PWA omni-platform Anda. Lagi pula, merek-merek besar seperti Twitter, Uber, dan Spotify semuanya ikut-ikutan dan disambut dengan hasil yang luar biasa, membuktikan bahwa teknologi ini memang tidak semuanya pemasaran dan layak untuk dipertimbangkan. Microsoft sendiri bahkan melangkah lebih jauh dengan berencana menjadikan Progressive Web Apps sebagai pengalaman utama di Windows.

 Bacaan yang direkomendasikan : 12 Contoh Aplikasi Web Progresif Terbaik.

Cara mempublikasikan PWA Anda ke toko aplikasi utama

Google Play Store

Menjadi pelopor gerakan PWA, tidak mengherankan melihat Google Play Store memegang tangan terbuka untuk Aplikasi Web Progresif. Dengan TWA (Aktivitas Web Tepercaya) di tempat, seluruh urutan penerbitan telah menjadi lebih mudah dan akan segera berakhir.

Persyaratan

• Android Studio terpasang
• Akun Pengembang Google
• Aplikasi Web Progresif yang berfungsi dan diperiksa kualitasnya.

Langkah 1 : Buat tiruan dari Aplikasi Android TWA Starter dan modifikasi

• Kloning proyek svgomg-twa dengan perintah berikut:

 git clone https://github.com/GoogleChromeLabs/svgomg-twa.git

• Impor proyek ke Android Studio menggunakan File > New > Import Project .

Di /app/build.gradle , ubah twaManifest sesuai tujuan Anda. Spesifik tentang apa dan bagaimana mengubahnya dapat ditemukan di dalam file build.gradle.

Catatan: applicationId harus mengikuti format <com>.<your-brand>.<your-app>

Setelah modifikasi, /app/build.gradle Anda akan terlihat seperti ini:

 def twaManifest = [
    applicationId: 'com.simicart.app',
    hostName: 'simicart.com', // Domain yang dibuka di TWA.
    launchUrl: '/', // Jalur awal untuk TWA. Harus relatif terhadap domain.
    nama: 'SimiCart PWA', // Nama yang ditampilkan di Peluncur Android.
    themeColor: '#ED8A19', // Warna yang digunakan untuk status bar.
    navigationColor: '#303F9F', // Warna yang digunakan untuk bilah navigasi.
    backgroundColor: '#bababa', // Warna yang digunakan untuk latar belakang layar splash.
    enableNotifications: false, // Setel ke true untuk mengaktifkan delegasi notifikasi.
    // Tambahkan pintasan untuk aplikasi Anda di sini. Setiap pintasan harus menyertakan bidang berikut:
    // - nama: String yang akan muncul di pintasan.
    // - short_name: String yang lebih pendek digunakan jika |name| terlalu panjang.
    // - url: Jalur absolut dari URL untuk meluncurkan aplikasi dengan (misalnya '/ buat').
    // - ikon: Nama sumber daya di folder yang dapat digambar untuk digunakan sebagai ikon.
    jalan pintas: [
        nama: 'Buka SimiCart', 
        short_name: 'Buka', 
        url: '/buka', 
        ikon: 'percikan'
    ]
,
    // Durasi animasi fade out dalam milidetik yang akan diputar saat menghapus splash screen.
    splashScreenFadeOutDurasi: 300
]

Langkah 2 : Buat penyimpanan kunci dan verifikasi APK

Penyimpanan kunci atau kunci unggah diperlukan untuk verifikasi APK Anda. Untuk membuat penyimpanan kunci, luncurkan Android Studio dan navigasikan ke Build → Generate Signed Bundle/APK dan isi bidang yang diperlukan.

Setelah Anda membuat Key Store, Anda harus mengekstrak sidik jari SHA256 darinya menggunakan perintah berikut:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Jenis entri: PrivateKeyEntry
...
sidik jari sertifikat:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? salin baris ini

Langkah 3 : Konfigurasikan Tautan Aset Digital

Tautan Aset Digital diperlukan untuk verifikasi kepemilikan konten web Anda yang nantinya dapat digunakan untuk menautkan ke APK Anda.

Buat file pernyataan

Gunakan sidik jari SHA256 yang Anda ekstrak sebelumnya dan buat file pernyataan dengan Generator dan Penguji Daftar Pernyataan.

Setelah Anda membuat file pernyataan, langkah selanjutnya adalah membuat file yang dapat diakses publik yang berisi informasi dari Alat Aset Digital. File harus ditempatkan di host web Anda dan di lokasi ini:

 .terkenal/assetlinks.json

Lokasi file ini bergantung pada proses pembuatan aplikasi web Anda, tetapi biasanya file ini harus berada di direktori yang digunakan, yaitu direktori 'publik' atau 'dist'.

Setelah semuanya selesai, langkah selanjutnya dan terakhir yang harus Anda lakukan adalah men-deploy aplikasi Anda.

Langkah 4 : Bangun dan rilis aplikasi Anda di Google Play

Dengan Konsol Google Play Anda pada pengaturan default, buka Semua Aplikasi → Buat Aplikasi .

Buat Tes Internal

Navigasikan ke Rilis aplikasi → Jalur Pengujian Internal → Buat rilis untuk membuat Jalur Pengujian Internal aplikasi Anda.

Bangun APK yang Ditandatangani

Di Android Studio, arahkan ke Build → Generate Signed Bundle/APK dan gunakan penyimpanan kunci SHA256 yang telah kita ekstrak sebelumnya. Pastikan Anda mencentang kedua kotak versi tanda tangan.

Unggah APK

Anda sekarang berada di akhir proses ini. Untuk mengunggah apk Anda, cukup buka Google Play Store, Rilis Aplikasi → Jalur Uji Internal → Edit Rilis .

Jangan lupa untuk melengkapi Daftar Toko

Semua bidang yang wajib diisi harus diisi sebelum aplikasi Anda dapat dicantumkan untuk proses peninjauan. Bidang ini diperlukan untuk informasi penting seperti detail harga, cantuman toko, peringkat konten, dll. Ketika proses ini selesai, Anda akan melihat empat tanda centang hijau ️ yang menunjukkan bahwa semua bidang wajib diisi.

Dan itu saja. PWA Anda sekarang siap untuk ditinjau dan akan siap untuk diunduh publik dalam beberapa jam.

Apple App Store

Dari semua pasar aplikasi utama, Apple App Store mungkin saja yang paling tidak ramah atau bahkan memusuhi PWA, yang agak ironis mengingat Steve Jobs adalah orang pertama yang melihat masa depan yang penuh dengan Aplikasi Web Progresif.

Mesin Safari lengkap ada di dalam iPhone. Jadi, Anda dapat menulis aplikasi Web 2.0 dan Ajax yang luar biasa yang terlihat persis dan berperilaku persis seperti aplikasi di iPhone. Dan aplikasi ini dapat berintegrasi sempurna dengan layanan iPhone. Mereka dapat melakukan panggilan, mereka dapat mengirim email, mereka dapat mencari lokasi di Google Maps.

Steve Jobs, 2007

Di iOS, PWA sangat terbatas dalam hal fitur. Tidak ada dukungan untuk pemberitahuan push, manifes aplikasi web hanya didukung sebagian, dan fitur baru seperti Galeri Aplikasi Baru sering mengabaikan PWA sama sekali. Dan karena itu, masuk akal jika PWA tidak diterima di Apple App Store, sesuai dengan Pedoman Tinjauan App Store Apple:

Aplikasi Anda harus menyertakan fitur, konten, dan UI yang meningkatkannya melampaui situs web yang dikemas ulang . Jika aplikasi Anda tidak terlalu berguna, unik, atau "seperti aplikasi", itu tidak termasuk dalam App Store.

Fungsi Minimum, Pedoman Tinjauan App Store

Karena Apple berusaha sekuat tenaga untuk melumpuhkan semua kemampuan PWA, segala upaya untuk menerbitkan PWA—bahkan ketika dengan pembungkus aplikasi asli seperti Cordova—adalah sia-sia. Untuk saat ini, kami hanya dapat berharap bahwa versi iOS di masa mendatang akan memberikan dukungan yang lebih baik untuk PWA, tetapi untuk saat ini, memublikasikan PWA ke Apple App Store tidak dimungkinkan , itulah sebabnya Anda harus mempertimbangkan pendekatan aplikasi asli sebagai gantinya jika sebagian besar audiens target Anda menggunakan perangkat berbasis iOS.

 Baca selengkapnya: PWA di iOS 14 Beta: Perubahan Halus

Toko Microsoft

Seperti yang dinyatakan dalam artikel Windows 10 dan PWA kami: Masa Depan Pengiriman Perangkat Lunak, Microsoft telah meletakkan dasar untuk toko Aplikasi Web Progresif selama beberapa waktu dan langkah demi langkah menjadi kenyataan. PWA dari merek yang lebih populer sudah mengisi seluruh pasar aplikasi dan dengan hasil yang patut dicontoh untuk diikuti orang lain.

Seperti Google, Microsoft menyambut PWA dan lebih jauh lagi—mereka bahkan berencana untuk mempopulerkan dan mengganti aplikasi UWP asli dengan aplikasi hibrida – semacam Aplikasi Web Progresif yang dibungkus dengan cangkang asli.

Secara teori, memublikasikan Aplikasi Web Progresif Anda ke Microsoft Store seharusnya tidak membutuhkan upaya apa pun karena awalnya direncanakan sebagai proses otomatis yang menggunakan Bing sebagai mekanisme perayapan untuk PWA berkualitas. Namun, semuanya masih dalam tahap percobaan dan tidak bekerja seefektif yang direncanakan, itulah sebabnya Anda perlu mengirimkan PWA Anda secara manual sebagai paket aplikasi Windows (.appx). Tapi jangan khawatir, prosesnya tidak menegangkan seperti toko aplikasi tertentu .

Persyaratan

• Akun Windows Dev Center
• PWABuilder
• Aplikasi Web Progresif yang berfungsi dan diperiksa kualitasnya yang memenuhi kebijakan toko

Langkah 1 : Pesan nama untuk aplikasi Anda

Langkah pertama dalam memublikasikan aplikasi di Microsoft Store adalah memesan nama. Jika Anda bertanya-tanya apa yang akan terjadi jika seorang anak gila memutuskan untuk memesan setiap nama yang ada: jangan khawatir, reservasi nama akan kedaluwarsa setelah 3 bulan.

Isi bidang yang diperlukan dan catat di suatu tempat karena informasi ini akan diperlukan nanti.

Langkah 2: Buat AppX menggunakan PWABuilder

Seperti disebutkan di atas, PWABuilder adalah cara yang bagus untuk menghasilkan paket fungsional yang dapat diterbitkan di pasar aplikasi utama. Ini adalah salah satu alat pertama di pasar yang dikembangkan oleh Microsoft semata-mata untuk tujuan memajukan adopsi PWA.

Hasilkan Manifes

Di PWABuilder, masukkan URL PWA Anda dan klik Mulai . Perhatikan bahwa langkah ini sangat penting karena secara otomatis mengidentifikasi dan/atau mengisi informasi yang hilang di manifest.json Anda, yang sering kali diperlukan untuk PWA yang tidak dibuat secara khusus untuk Microsoft Store.

 Bacaan yang disarankan: Manifes PWA: Membuat manifes aplikasi web Anda dengan cara mudah

Langkah selanjutnya adalah membuat service worker untuk PWA Anda, tetapi dengan asumsi bahwa Anda adalah Progressive Web App biasa di mana service worker sudah terintegrasi, langkah ini akan dilewati dan kami akan melanjutkan ke langkah terakhir—mendapatkan paket .appx Anda.

Hasilkan AppX

Setelah mengklik menghasilkan AppX, Anda akan melihat sesuatu seperti pop-up ini:

Di sinilah informasi sebelumnya dapat berguna. Isi kolom dan kotak unduhan yang berisi paket .appx akan ditampilkan. Unduh dan Anda sekarang akan siap untuk menerbitkan PWA Anda ke Microsoft Store.

Jika Anda ingin menguji PWA Anda sebelum menerbitkannya di toko, selalu ada opsi untuk mengujinya di Windows dengan mengaktifkan Mode Pengembang → Klik kanan pada test_install.ps1 → Jalankan dengan PowerShell . Melakukan hal ini akan secara otomatis menambahkan PWA Anda ke desktop dan menu Start, dari mana ia dapat diluncurkan dan diuji untuk melihat apakah semuanya bekerja dengan benar.

Langkah 3: Kirim paket aplikasi Anda ke Microsoft Store

Untuk memublikasikan PWA Anda ke Microsoft Store, Anda harus menavigasi ke folder paket di dalam .zip yang Anda unduh sebelumnya. Di folder ini adalah semua yang Anda perlukan untuk mempublikasikan ke Microsoft Store. Untuk klarifikasi, folder ini tidak berisi kode Anda karena hanya berfungsi sebagai mekanisme pengarah ke PWA Anda di web dan metadata Store lain yang tidak terkait.

Setelah Anda menemukan windows.appx, buka halaman pengiriman di Pusat Dev Anda dan isi informasi yang diperlukan:

Setelah menyelesaikan semua langkah dan mengisi semua bidang yang diperlukan, tombol “ Kirim ke Toko ” akan menyala, menunjukkan bahwa PWA Anda sekarang siap untuk proses peninjauan. Diperlukan waktu satu jam hingga beberapa hari untuk menyelesaikan proses ini; setelah selesai, PWA Anda akan disertifikasi dan tersedia untuk unduhan publik/pribadi (tergantung pada pengaturan ketersediaan Anda di Dev Center).

Kesimpulan

Setelah semua ini, mungkin Anda masih bertanya-tanya mengapa Anda harus membangun Aplikasi Web Progresif—apalagi melalui semua kesulitan ini untuk menerbitkannya. Dan Anda benar untuk mengajukan pertanyaan mendasar seperti itu.

Progressive Web App selangkah demi selangkah membuktikan dirinya sebagai masa depan pengiriman perangkat lunak dan langkah alami berikutnya dalam Evolusi Teknologi Web. Sampai sekarang, itu sudah banyak digunakan di mana-mana di dunia eCommerce di mana pengalaman terpadu dan menarik di semua perangkat adalah kunci untuk konversi tinggi.

Menjadi teknologi baru, sudah cukup sulit untuk membangun satu Aplikasi Web Progresif apa adanya. Dengan SimiCart, Anda tidak perlu lagi khawatir tentang fase pengembangan PWA Magento Anda karena kami menyediakan solusi lengkap dan hemat biaya terbaik di pasar.