Toolchain untuk menjalankan Aplikasi Chrome di perangkat seluler masih dalam pratinjau developer awal. Jangan ragu untuk memberikan masukan Anda kepada kami menggunakan issue tracker GitHub, forum developer Aplikasi Chrome, di Stack Overflow, atau halaman Developer G+ kami.
Ringkasan
Anda dapat menjalankan Aplikasi Chrome di Android dan iOS melalui toolchain berdasarkan Apache Cordova, framework pengembangan seluler open source untuk membuat aplikasi seluler dengan kemampuan native menggunakan HTML, CSS, dan JavaScript.
Apache Cordova menggabungkan kode web aplikasi Anda dengan shell aplikasi native dan memungkinkan Anda mendistribusikan aplikasi web campuran melalui Google Play dan/atau Apple App Store. Untuk menggunakan Apache Cordova
dengan Aplikasi Chrome yang sudah ada, gunakan alat command line
cca
(c ordova c hrome a pp).
Referensi lainnya
- Ada beberapa pertimbangan khusus yang harus Anda ingat saat mengembangkan Cordova; kami telah mencantumkannya di bagian pertimbangan.
- Untuk melihat API Chrome mana yang didukung di perangkat seluler, buka halaman Status API.
- Untuk melihat pratinjau Aplikasi Chrome di perangkat Android tanpa toolchain, gunakan Chrome Apps Developer Tool (ADT).
Mari kita mulai.
Langkah 1: Instal alat pengembangan Anda
Toolchain Aplikasi Chrome untuk seluler dapat menargetkan iOS 6+ dan Android 4.x+.
Dependensi pengembangan untuk semua platform
Diperlukan Node.js versi 0.10.0 (atau yang lebih baru) dengan
npm
:- Windows: Instal Node.js menggunakan file penginstal yang dapat dieksekusi yang dapat didownload dari nodejs.org.
- OS X atau Linux: File yang dapat dieksekusi penginstalan juga tersedia dari nodejs.org. Jika ingin menghindari kebutuhan akses root, akan lebih mudah untuk menginstal melalui nvm. Contoh:
curl https://raw.github.com/creationix/nvm/master/install.sh | sh source ~/.bash_profile || source ~/.profile || source ~/.bashrc nvm install 0.10 nvm alias default 0.10
Menargetkan Android
Saat mengembangkan aplikasi untuk Android, Anda juga harus menginstal:
- Java JDK 7 (atau yang lebih baru)
- Android SDK versi 4.4.2 (atau yang lebih tinggi)
- Instal Android SDK dan Android Developer Tools yang disertakan dengan Android ADT Bundle.
- Tambahkan
sdk/tools
dansdk/platform-tools
ke variabel lingkungan JALUR Anda. - OS X: Versi Eclipse yang disertakan dengan Android SDK memerlukan JRE 6. Jika membuka Eclipse.app tidak meminta Anda menginstal JRE 6, dapatkan melalui Mac App Store.
- Linux: Android SDK memerlukan library dukungan 32 bit. Di Ubuntu, dapatkan ini melalui:
apt-get install ia32-libs
.
- Apache Ant
- Tambahkan
apache-ant-x.x.x/bin
ke variabel lingkungan PATH Anda.
- Tambahkan
Menarget iOS
Harap perhatikan bahwa pengembangan iOS hanya dapat dilakukan di OS X. Selain itu, Anda harus menginstal:
- Xcode 5 (atau lebih tinggi) yang mencakup alat command line Xcode
- ios-deploy (diperlukan untuk men-deploy ke perangkat iOS)
npm install -g ios-deploy
- ios-sim (diperlukan untuk men-deploy ke Simulator iOS)
npm install -g ios-sim
- Opsional: Mendaftar sebagai developer iOS
- Hal ini diperlukan untuk pengujian di perangkat sebenarnya dan untuk mengirimkannya ke app store.
- Anda dapat melewati pendaftaran jika hanya berencana menggunakan simulator iPhone/iPad.
Instal alat command line cca
Instal cca
melalui npm:
npm install -g cca
Untuk mengupdate toolchain nanti dengan rilis baru: npm update -g cca
.
Pastikan semuanya telah diinstal dengan benar dengan menjalankan perintah ini dari command line:
cca checkenv
Anda akan melihat nomor versi cca
yang di-output dan konfirmasi penginstalan SDK Android atau iOS.
Langkah 2: Buat project
Untuk membuat project Aplikasi Chrome seluler default di direktori bernama YourApp
, jalankan:
cca create YourApp
Jika sudah membuat Aplikasi Chrome dan ingin mentransfernya ke platform seluler, Anda dapat menggunakan
tanda --link-to
untuk membuat symlink ke aplikasi tersebut:
cca create YourApp --link-to=path/to/manifest.json
Jika ingin menyalin file Aplikasi Chrome yang ada, Anda dapat menggunakan tanda --copy-from
:
cca create YourApp --copy-from=path/to/manifest.json
Belum punya Aplikasi Chrome sendiri? Coba salah satu dari banyak contoh Aplikasi Chrome dengan dukungan seluler.
Langkah 3: Kembangkan
Anda dapat membangun dan menjalankan aplikasi dengan dua cara:
- Opsi A: Dari command line, menggunakan alat
cca
, atau - Opsi B: Dengan menggunakan IDE, seperti Eclipse atau Xcode. Penggunaan IDE sepenuhnya bersifat opsional (tetapi sering kali berguna) untuk membantu peluncuran, konfigurasi, dan proses debug aplikasi seluler hybrid Anda.
Opsi A: Mengembangkan dan mem-build menggunakan command line
Dari root folder project yang dihasilkan cca
:
Android
- Untuk menjalankan aplikasi di Android Emulator:
cca emulate android
- Catatan: Anda harus menyiapkan emulator. Anda dapat menjalankan
android avd
untuk menyiapkannya. Download image emulator tambahan dengan menjalankanandroid
. Agar image intel berjalan lebih cepat, instal HAXM Intel.
- Catatan: Anda harus menyiapkan emulator. Anda dapat menjalankan
- Untuk menjalankan aplikasi di perangkat Android yang terhubung:
cca run android
iOS
- Untuk menjalankan aplikasi di Simulator iOS:
cca emulate ios
- Untuk menjalankan aplikasi di perangkat iOS yang terhubung:
cca run ios
- Catatan: Ini mengharuskan Anda menyiapkan Profil Penyediaan untuk perangkat.
Opsi B: Mengembangkan dan mem-build menggunakan IDE
Android
- Pada Eclipse, pilih
File
->Import
. - Pilih
Android
>Existing Android Code Into Workspace
. - Impor dari jalur yang baru saja Anda buat dengan
cca
.- Anda akan memiliki dua project untuk diimpor, salah satunya adalah
*-CordovaLib
.
- Anda akan memiliki dua project untuk diimpor, salah satunya adalah
- Klik tombol Putar untuk menjalankan aplikasi.
- Anda harus membuat Konfigurasi Run (seperti pada semua aplikasi Java). Anda biasanya akan diminta untuk melakukan tindakan ini secara otomatis untuk pertama kalinya.
- Anda juga perlu mengelola perangkat/emulator untuk pertama kalinya.
iOS
Buka project di Xcode dengan mengetik perintah berikut di jendela terminal:
cd YourApp open platforms/ios/*.xcodeproj
Pastikan Anda membuat target yang tepat.
Di kiri atas (di samping tombol Run dan Stop), terdapat menu dropdown untuk memilih project dan perangkat target. Pastikan
YourApp
dipilih, bukanCordovaLib
.Klik tombol Play.
Membuat perubahan pada kode sumber aplikasi Anda
File HTML, CSS, dan JavaScript Anda berada dalam direktori www
folder project cca Anda.
Penting: Setelah melakukan perubahan pada www/
, Anda harus menjalankan cca prepare
sebelum men-deploy aplikasi. Jika Anda menjalankan cca build
, cca run
, atau cca emulate
dari command line, langkah persiapan dilakukan secara otomatis. Jika mengembangkan aplikasi menggunakan Eclipse/XCode, Anda harus menjalankan
cca prepare
secara manual.
Proses debug
Anda dapat men-debug Aplikasi Chrome di perangkat seluler dengan cara yang sama seperti saat men-debug aplikasi Cordova.
Langkah 4: Langkah Berikutnya
Setelah Anda memiliki Aplikasi Chrome seluler yang berfungsi, ada banyak cara untuk meningkatkan pengalaman di perangkat seluler.
Manifes Seluler
Ada setelan Aplikasi Chrome tertentu yang hanya berlaku untuk platform seluler. Kami telah membuat
file www/manifest.mobile.json
untuk menampungnya, dan nilai spesifik dirujuk di seluruh
dokumentasi plugin dan panduan ini.
Anda harus menyesuaikan nilainya di sini sebagaimana mestinya.
Ikon
Aplikasi seluler membutuhkan resolusi ikon beberapa lebih banyak daripada Aplikasi Chrome desktop.
Untuk Android, ukuran ini diperlukan:
- 36px, 48px, 78px, 96px
Untuk aplikasi iOS, ukuran yang diperlukan akan berbeda tergantung apakah Anda mendukung iOS 6 atau iOS 7. Jumlah ikon minimum yang diperlukan adalah:
- iOS 6: 57px, 72px, 114px, 144px
- iOS 7: 72px, 120px, 152px
Daftar ikon lengkap akan terlihat seperti ini dalam file manifest.json
Anda:
"icons": {
"16": "assets/icons/icon16.png",
"36": "assets/icons/icon36.png",
"48": "assets/icons/icon48.png",
"57": "assets/icons/icon57.png",
"72": "assets/icons/icon72.png",
"78": "assets/icons/icon78.png",
"96": "assets/icons/icon96.png",
"114": "assets/icons/icon114.png",
"120": "assets/icons/icon120.png",
"128": "assets/icons/icon128.png",
"144": "assets/icons/icon144.png",
"152": "assets/icons/icon152.png"
}
Ikon akan disalin ke tempat yang sesuai untuk setiap platform setiap kali Anda menjalankan
cca prepare
.
Layar Pembuka
Aplikasi di iOS menampilkan layar pembuka singkat saat aplikasi dimuat. Serangkaian layar pembuka Cordova default
disertakan dalam platforms/ios/[AppName]/Resources/splash
.
Ukuran yang dibutuhkan adalah:
- 320x480 piksel + 2x
- 768 x 1024 piksel + 2x (potret iPad)
- 1024 x 768 piksel + 2x (lanskap iPad)
- 640x1146 piksel
Gambar layar pembuka saat ini tidak diubah oleh cca
.
Langkah 5: Publikasikan
Dalam direktori platforms
project, Anda memiliki dua project native yang lengkap: satu untuk Android, dan satu untuk iOS. Anda dapat membuat versi rilis project ini dan memublikasikannya ke Google Play atau
App Store iOS.
Publikasikan ke Play Store
Untuk memublikasikan aplikasi Android ke Play Store:
Update kedua ID versi Android, lalu jalankan
cca prepare
:android:versionName
ditetapkan menggunakan kunciversion
diwww/manifest.json
(ini juga menetapkan versi aplikasi terpaket desktop).android:versionCode
disetel menggunakan kunciversionCode
diwww/manifest.mobile.js
.
Edit (atau buat)
platforms/android/ant.properties
dan tetapkan propertikey.store
sertakey.alias
(seperti yang dijelaskan dalam dokumen developer Android).Buat project Anda:
./platforms/android/cordova/build --release
Temukan .apk bertanda tangan yang terletak di dalam
platforms/android/ant-build/
.Upload aplikasi yang telah ditandatangani ke konsol developer Google Play.
Publikasikan ke App Store iOS
- Update versi aplikasi dengan menyetel kunci
CFBundleVersion
diwww/manifest.mobile.js
, lalu jalankancca prepare
. Buka file project Xcode yang ada dalam direktori
platforms/ios
Anda:membuka platform/ios/*.xcodeproj
Ikuti Panduan App Distribution Apple.
Pertimbangan khusus
Jika Anda baru menggunakan Aplikasi Chrome, kesalahan terbesarnya adalah beberapa fitur web dinonaktifkan. Namun, beberapa di antaranya saat ini berfungsi di Cordova.
Aplikasi Chrome mungkin tidak langsung berfungsi di perangkat seluler. Beberapa masalah umum terkait porting ke perangkat seluler:
- Masalah tata letak pada layar kecil, terutama saat dalam orientasi potret.
- Perbaikan yang disarankan: Gunakan kueri media CSS guna mengoptimalkan konten Anda untuk layar yang lebih kecil.
- Ukuran jendela Aplikasi Chrome yang disetel melalui chrome.app.window akan diabaikan, bukan menggunakan
dimensi native perangkat.
- Perbaikan yang disarankan: Menghapus dimensi jendela hard code; desain aplikasi dengan mempertimbangkan berbagai ukuran yang berbeda.
- Tombol dan link kecil akan sulit diketuk dengan jari.
- Perbaikan yang disarankan: Sesuaikan target sentuh Anda menjadi minimal 44 x 44 titik.
- Perilaku tak terduga saat mengandalkan pengarahan kursor mouse yang tidak ada di layar sentuh.
- Perbaikan yang disarankan: Selain mengarahkan kursor, aktifkan elemen UI seperti dropdown dan tooltip saat diketuk.
- Penundaan ketuk 300 md.
- Perbaikan yang disarankan: Gunakan polyfill JavaScript FastClick by FT Labs.
- Baca artikel HTML5Rocks ini untuk mendapatkan info latar belakang.
Chrome API yang didukung
Kami telah menyediakan banyak API Chrome inti bagi Aplikasi Chrome untuk Seluler, termasuk:
- identity - proses login pengguna menggunakan OAuth2
- pembayaran - menjual item virtual dalam aplikasi seluler Anda
- pushMessaging - mengirim pesan ke aplikasi dari server Anda
- soket - mengirim dan menerima data melalui jaringan menggunakan TCP dan UDP
- notifikasi (khusus Android) - mengirim notifikasi lengkap dari aplikasi seluler
- storage - menyimpan dan mengambil data nilai kunci secara lokal
- syncFileSystem - menyimpan dan mengambil file yang didukung oleh Google Drive
- alarm - menjalankan tugas secara berkala
- idle - mendeteksi kapan status tidak ada aktivitas mesin berubah
- daya - mengganti fitur pengelolaan daya sistem
Namun, tidak semua Chrome JavaScript API diimplementasikan. Dan tidak semua fitur Chrome Desktop tersedia di perangkat seluler:
- tidak ada tag
<webview>
- tidak ada IndexedDB
- tidak ada getUserMedia()
- tidak ada NaCl
Anda dapat melacak kemajuan dari halaman Status API kami.
Alat Developer Aplikasi Chrome
Chrome Apps Developer Tool (ADT) untuk Android adalah aplikasi Android mandiri yang memungkinkan Anda mendownload dan menjalankan Aplikasi Chrome tanpa menyiapkan toolchain pengembangan seperti yang dijelaskan di atas. Gunakan Chrome ADT jika Anda ingin melihat pratinjau Aplikasi Chrome yang ada dengan cepat (sudah dikemas sebagai .crx) di perangkat Android.
Chrome ADT untuk Android saat ini dalam rilis pra-alfa. Untuk mencobanya, lihat catatan rilis ChromeADT.apk untuk mengetahui petunjuk penginstalan dan penggunaan.