Mulai mengembangkan aplikasi web PWA atau Hybrid untuk Android
Panduan ini akan membantu Anda mulai membuat aplikasi web hibrid atau Progressive Web App (PWA) di Windows menggunakan satu basis kode HTML/CSS/JavaScript yang dapat digunakan di web dan di seluruh platform perangkat (Android, iOS, Windows).
Dengan menggunakan kerangka kerja dan komponen yang tepat, aplikasi berbasis web dapat bekerja pada perangkat Android dengan cara yang terlihat sangat mirip dengan pengguna yang sangat mirip dengan aplikasi asli.
Ada dua jenis utama aplikasi web yang dapat diinstal di perangkat Android. Perbedaan utama adalah apakah kode aplikasi Anda disematkan dalam paket aplikasi (hibrid) atau dihosting di server web (pwa).
Aplikasi web hibrid: Kode (HTML, JS, CSS) dikemas dalam APK dan dapat didistribusikan melalui Google Play Store. Mesin tampilan diisolasi dari browser internet pengguna, tidak ada sesi atau berbagi cache.
Progressive Web Apps (PWAs): Kode (HTML, JS, CSS) berada di web dan tidak perlu dikemas sebagai APK. Sumber daya diunduh dan diperbarui sesuai kebutuhan menggunakan Pekerja Layanan. Browser Chrome akan merender dan menampilkan aplikasi Anda, tetapi akan terlihat asli dan tidak menyertakan bilah alamat browser normal, dll. Anda dapat berbagi penyimpanan, cache, dan sesi dengan browser. Ini pada dasarnya seperti menginstal pintasan ke browser Chrome dalam mode khusus. PWAs juga dapat dicantumkan di Google Play Store menggunakan Aktivitas Web Tepercaya.
PWAs dan aplikasi web hibrid sangat mirip dengan aplikasi Android asli di mana mereka:
- Dapat diinstal melalui App Store (Google Play Store dan/atau Microsoft Store)
- Memiliki akses ke fitur perangkat asli seperti kamera, GPS, Bluetooth, pemberitahuan, dan daftar kontak
- Bekerja Offline (tidak ada koneksi internet)
PWAs juga memiliki beberapa fitur unik:
- Dapat diinstal di layar beranda Android langsung dari web (tanpa App Store)
- Dapat diinstal juga melalui Google Play Store menggunakan Aktivitas Web Tepercaya
- Dapat ditemukan melalui pencarian web atau dibagikan melalui tautan URL
- Mengandalkan Pekerja Layanan untuk menghindari kebutuhan untuk mengemas kode asli
Anda tidak memerlukan kerangka kerja untuk membuat aplikasi Hibrid atau PWA, tetapi ada beberapa kerangka kerja populer yang akan dibahas dalam panduan ini, termasuk PhoneGap (dengan Cordova) dan Ionik (dengan Cordova atau Capacitor menggunakan Angular atau React).
Apache Cordova adalah kerangka kerja sumber terbuka yang dapat menyederhanakan komunikasi antara kode JavaScript Anda yang tinggal di WebView asli dan platform Android asli dengan menggunakan plugin. Plugin ini mengekspos titik akhir JavaScript yang dapat dipanggil dari kode Anda dan digunakan untuk memanggil API perangkat Android asli. Beberapa contoh plugin Cordova termasuk akses ke layanan perangkat seperti status baterai, akses file, getaran / nada dering, dll. Fitur-fitur ini biasanya tidak tersedia untuk aplikasi web atau browser.
Ada dua distribusi Cordova yang populer:
PhoneGap: Dukungan telah dihentikan oleh Adobe.
Ionic adalah kerangka kerja yang menyesuaikan antarmuka pengguna (UI) aplikasi Anda agar sesuai dengan bahasa desain setiap platform (Android, iOS, Windows). Ionic memungkinkan Anda menggunakan Angular atau React.
Catatan
Ada versi baru Ionic yang menggunakan alternatif untuk Cordova, yang disebut Capacitor. Alternatif ini menggunakan kontainer untuk membuat aplikasi Anda lebih ramah web.
Untuk mulai membangun PWA atau aplikasi web hibrid dengan Ionic, Anda harus terlebih dahulu menginstal alat berikut:
Node.js untuk berinteraksi dengan ekosistem Ionik. Unduh NodeJS untuk Windows atau ikuti panduan penginstalan NodeJS menggunakan Subsistem Windows untuk Linux (WSL). Anda mungkin ingin mempertimbangkan untuk menggunakan Node Version Manager (nvm) jika Anda akan bekerja dengan beberapa proyek dan versi NodeJS.
Visual Studio Code untuk menulis kode Anda. Unduh Visual Studio Code untuk Windows. Anda mungkin juga ingin menginstal Ekstensi Jarak Jauh WSL jika Anda lebih suka membuat aplikasi dengan baris perintah Linux.
Terminal Windows untuk bekerja dengan antarmuka baris perintah (CLI) pilihan Anda. Instal Terminal Windows dari Microsoft Store.
Git untuk kontrol versi. Unduh Git.
Instal Ionic dan Cordova dengan memasukkan yang berikut ini di baris perintah Anda:
npm install -g @ionic/cli cordova
Buat aplikasi Ionic Angular menggunakan templat aplikasi "Tab" dengan memasukkan perintah:
ionic start photo-gallery tabs
Ubah ke folder aplikasi:
cd photo-gallery
Jalankan aplikasi di browser web Anda:
ionic serve
Untuk informasi selengkapnya, lihat dokumen Ionic Cordova Angular. Kunjungi bagian Membuat aplikasi Angular Anda menjadi PWA dari dokumen Ionic untuk mempelajari cara memindahkan aplikasi Anda agar tidak menjadi hibrid ke PWA.
Instal Ionic dan Cordova-Res dengan memasukkan yang berikut ini di baris perintah Anda:
npm install -g @ionic/cli native-run cordova-res
Buat aplikasi Ionic Angular menggunakan templat aplikasi "Tab" dan tambahkan Kapasitor dengan memasukkan perintah:
ionic start photo-gallery tabs --type=angular --capacitor
Ubah ke folder aplikasi:
cd photo-gallery
Tambahkan komponen untuk membuat aplikasi menjadi PWA:
npm install @ionic/pwa-elements
Impor @ionic/pwa-elements dengan menambahkan yang berikut ini ke file Anda src/main.ts
:
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
Jalankan aplikasi di browser web Anda:
ionic serve
Untuk informasi selengkapnya, lihat dokumen Ionic Capacitor Angular. Kunjungi bagian Membuat aplikasi Angular Anda menjadi PWA dari dokumen Ionic untuk mempelajari cara memindahkan aplikasi Anda agar tidak menjadi hibrid ke PWA.
Instal CLI Ionic dengan memasukkan yang berikut ini di baris perintah Anda:
npm install -g @ionic/cli
Buat proyek baru dengan React dengan memasukkan perintah:
ionic start myApp blank --type=react
Ubah ke folder aplikasi:
cd myApp
Jalankan aplikasi di browser web Anda:
ionic serve
Untuk informasi selengkapnya, lihat dokumen Ionic React. Kunjungi bagian Membuat aplikasi React Anda sebagai PWA dari dokumen Ionic untuk mempelajari cara memindahkan aplikasi Anda agar tidak menjadi hibrid ke PWA.
Untuk menguji aplikasi Ionic Anda di perangkat Android, plug-in perangkat Anda (pastikan terlebih dahulu diaktifkan untuk pengembangan), lalu di baris perintah Anda masukkan:
ionic cordova run android
Untuk menguji aplikasi Ionic Anda di emulator perangkat Android, Anda harus:
Instal komponen yang diperlukan -- Java Development Kit (JDK), Gradle, dan Android SDK.
Buat Perangkat Virtual Android (AVD): Lihat [panduan pengembang Android]](https://developer.android.com/studio/run/managing-avds.html).
Masukkan perintah untuk Ionic untuk membangun dan menyebarkan aplikasi Anda ke emulator:
ionic cordova emulate [<platform>] [options]
. Dalam hal ini, perintah harus:
ionic cordova emulate android --list
Lihat Cordova Emulator di dokumen Ionik untuk informasi selengkapnya.
Umpan balik Windows developer
Windows developer adalah proyek sumber terbuka. Pilih tautan untuk memberikan umpan balik: